时间戳

首页 > 解决方案 > 使用 Google 登录 - Console.log

google-signin - 使用 Google 登录 - Console.log

问题描述

我正在尝试将这个新示例用于使用 Google 登录的新示例，因为 oAuth 将于 2023 年停用。问题是，我如何传递此值 console.log("Email:" + responsePayload.email); 到一个隐藏的 html 字段？我能够使用当前的 oAuth Java funstion 做到这一点，但似乎无法使用这个新版本的代码传递值。

decodeJwtResponse() 是您定义的自定义函数 - 可能是我所缺少的。如果可能，我想将整个函数保留在 java 脚本中。我搞不清楚了

    <div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-callback="handleCredentialResponse">
</div>
<script>
  function handleCredentialResponse(response) {
     // decodeJwtResponse() is a custom function defined by you
     // to decode the credential 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>

标签： google-signin

解决方案

要解码令牌，您需要 Base64 URL 解码消息并将其解析回带有 的对象JSON.parse，这就是jwt-decode所做的。

如果你没有使用带有 NPM 的捆绑器，你可以导入它：

console.log(jwt_decode('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'))
<script src="https://unpkg.com/jwt-decode/build/jwt-decode.js"></script>

或者作为 ES6 模块：

<script type="module">
// Or https://unpkg.com/jwt-decode/build/jwt-decode.esm.js
import jwtDecode from 'https://esm.run/jwt-decode';

console.log(jwtDecode('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'))
</script>

推荐阅读