vue使用google登录业务逻辑及常见报错
总结出来就是需要有client_id,用client_id去拿google的用户信息,然后拿到返回信息进行解析、传送等操作,新api提供的是一键登录,减少了开发的复杂性。
client_id
,注意不要使用ios
或Andorra
的client_id,格式为***id.apps.googleusercontent.com
。 <div class="g_id_signin" id="g_id_signin">div>
npm i jwt_decode
// a. 引入jwt_decode,google登录后返回的是jwt,看业务需要是在前后端哪里解析,这里是在前端解析,所以引入了一下 jwt_decode npm包
import jwt_decode from "jwt-decode";
// b. 在data里面放入我们的 client_id
data(){
return {
GOOGLE_CLIENT_ID:"59****************7.apps.googleusercontent.com",
}
// c. 在created函数内初始化google
// 使用谷歌登录的api
const script = document.createElement("script");
script.src = "https://accounts.google.com/gsi/client";
document.body.appendChild(script);
window.addEventListener("load", () => {
window.google.accounts.id.initialize({
// 主要就是填写client_id
client_id: this.GOOGLE_CLIENT_ID,
auto_select: false,
callback: this.handleCredentialResponse,
});
// 设置按钮的样式等
window.google.accounts.id.renderButton(
document.getElementById("g_id_signin"),
{
theme: "filled_blue",
size: "samll",
// width:'320',
type: "standard",
text: "signin_with",
}
);
});
// d. methods获取回调信息
async handleCredentialResponse(response) {
// 获取回调响应的凭证数据 然后拿这个凭证给后台,jwt进行解析获取登录信息
// await api.googleLogin(code);
const profile = jwt_decode(response.credential); // 解析返回的信息
// id = profile.sub; email = profile.email; 需要什么取什么,然后传给后端验证
console.log("GOOGLE response:", profile);
},
header
{
"alg": "RS256",
"kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
"typ": "JWT"
}
payload
{
"iss": "https://accounts.google.com", // The JWT's issuer
"nbf": 161803398874,
"aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
"sub": "3141592653589793238", // The unique ID of the user's Google Account
"hd": "gmail.com", // If present, the host domain of the user's GSuite email address
"email": "elisa.g.beckett@gmail.com", // The user's email address
"email_verified": true, // true, if Google has verified the email address
"azp": "314159265-pi.apps.googleusercontent.com",
"name": "Elisa Beckett",
// If present, a URL to user's profile picture
"picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
"given_name": "Eliza",
"family_name": "Beckett",
"iat": 1596474000, // Unix timestamp of the assertion's creation time
"exp": 1596477600, // Unix timestamp of the assertion's expiration time
"jti": "abc161803398874def"
}
因为是google提供的按钮,所以我们不需要些什么样式,logo什么都有的,需要调整的可以参考官网进行调整。样式调整传送
You have created a new client application that uses libraries for user authentication or
error : idpiframe initialization failed...
a. ERROR:如上;原因:新项目使用原来的google api登录,替换成新api就可以了,区分新旧方法简单的方法就是看使用连接:旧的链接为https://apis.google.com/js/client.js
, 新链接为 https://accounts.google.com/gsi/client
,看链接只是区分新旧方法,并不是直接替换链接就行
当前来源未在Google OAuth 客户端中注册
b. ERROR:如上;原因:测试域名不是google客户端添加允许的域名,详情请看【使用】(1)的配置;
c. 其它问题,比如不稳定、登录弹窗强制退出可能是旧版本不支持等原因,欢迎交流。