前期准备
前往google api 的auth声明可以google登陆的域名以及获取client_id google api 官网
使用html的google登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://accounts.google.com/gsi/client" async></script>
</head>
<div id="g_id_onload"
data-client_id="292700998486-i3ndfejpv4tko2qvahbfia3qi3a75br2.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
<script>
function handleCredentialResponse(response) {
// decodeJwtResponse() is a custom function defined by you
// to decode the credential response.
console.log('response', response)
// const responsePayload = decodeJwtResponse(response.credential);
// console.log("ID: " + responsePayload.sub);
// console.log('Full Name: ' + responsePayload.name);
// console.log('Given Name: ' + responsePayload.given_name);
// console.log('Family Name: ' + responsePayload.family_name);
// console.log("Image URL: " + responsePayload.picture);
// console.log("Email: " + responsePayload.email);
}
</script>
</html>
使用js的google登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://accounts.google.com/gsi/client" async></script>
</head>
<button onclick="handleLogin()">login</button>
<div id="google_btn"></div>
<script>
function handleLogin() {
google.accounts.id.initialize({
client_id: '292700998486-i3ndfejpv4tko2qvahbfia3qi3a75br2.apps.googleusercontent.com',
context: 'signin',
ux_mode: 'popup',
callback: (response) => {
console.log('response', response)
},
auto_prompt: false
})
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
// google.accounts.id.prompt() // 这个代码是实现在当前页面弹出 登陆google账号的选择
}
</script>
</html>
遇到的问题
1、本地uri测试的设置
2、无法自定义google登录按钮
无法自定义修改google登录的按钮样式。
解决方法是： 将google的按钮opactiy设置为0，然后盖在自定义按钮的上面来实现自定义效果。
