creator-Google登录接入

creator-Google登录接入

---

前篇

• https://developers.google.com/identity/gsi/web/guides/overview?hl=zh-cn
• 自动登录和退出登录 - https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out?hl=zh-cn
• 登录模型
  • 使用代码模型 - https://developers.google.com/identity/oauth2/web/guides/use-code-model?hl=zh-cn
  • 使用令牌模型 - https://developers.google.com/identity/oauth2/web/guides/use-token-model?hl=zh-cn
• 适用于客户端 Web 应用的 OAuth 2.0 - https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn

---

使用代码登录模型

1. 源站授权

   获取 Google API 客户端 ID - https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid?hl=zh-cn

   

2. 登录

   <script src="https://accounts.google.com/gsi/client"> </script>
   <script>
       const clientCode = google.accounts.oauth2.initCodeClient({
         client_id: 'GG_CLIENT_ID',
         scope: 'email profile openid',
         callback: (codeResponse) => {
            console.log("codeResponse: ", codeResponse);
   
         },
       });
   });
   </script>
   
   
   <button type="button" onclick="clientCode.requestCode()">login</button>

   • 登录成功后返回

     authuser: "0"
     code: "asdasd"
     prompt: "consent"
     scope: "email profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid"

---

服务器校验

• 授权 - https://developers.google.com/android-publisher/authorization?hl=zh-cn
• 令牌类型 - https://cloud.google.com/docs/authentication/token-types?hl=zh-cn

---

踩坑

源站没有被授权 400

• 报错: The given origin is not allowed for the given client ID.

• 解决办法: Key Point: Add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box for local tests or development.

  

  • 参考: https://stackoverflow.com/questions/68438293/the-given-origin-is-not-allowed-for-the-given-client-id-gsi

  • 获取 Google API 客户端 ID - https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid?hl=zh-cn

---

重定向没被授权 400

• 报错: it doesn't comply with Google's OAuth 2.0 policy for keeping apps secure

• 原因是因为重定向的 uri 没有加入到 重定向授权

  ```js
  const client = google.accounts.oauth2.initCodeClient({

  client_id: GG_CLIENT_ID,
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "http://localhost:57090", // 这个要加入授权
  state: "AAA"
  

  });

• 解决办法: redirect_uri 加入到重定向授权

  

---

拒绝访问 403

• 报错: 尚未完成 google 验证流程。此应用正在测试中 仅供已获开发者批准的测试人员使用。如果您认为自己应有权使用 请联系开发者。

  

• 原因: APP 后台设置为 测试模式, 还未发布, 且未加入测试白名单

• 解决办法: APP 发布出去

  

---