vue项目中第三方Google登录

vue使用google登录业务逻辑及常见报错

总结出来就是需要有client_id,用client_id去拿google的用户信息,然后拿到返回信息进行解析、传送等操作,新api提供的是一键登录,减少了开发的复杂性。

1. 注册google为开发者创建凭证获取client_id(一般公司项目都会提供)google创建凭证地址

vue项目中第三方Google登录_第1张图片

2. 下载 web client_id,注意不要使用iosAndorra 的client_id,格式为***id.apps.googleusercontent.com

vue项目中第三方Google登录_第2张图片

3. 代码示例

   <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);
    },

4. 返回信息

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": "[email protected]", // 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"
}

5. 样式调整

因为是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. 其它问题,比如不稳定、登录弹窗强制退出可能是旧版本不支持等原因,欢迎交流。

你可能感兴趣的:(vue.js,javascript,前端)