无法使用 Google 身份服务获取用户信息答案

【问题标题】：Cannot get user info with Google Identity Services无法使用 Google 身份服务获取用户信息
【发布时间】：2021-11-17 19:16:04
【问题描述】：

嗯，我正在将 Google 身份服务集成到我的应用程序中。但它不运行。我正在按照https://developers.google.com/identity/gsi/web中的说明进行操作

所以我将这些行添加到 index.html 文件的头部

<meta name="google-signin-client_id" content="MY_GOOGLE_ID.apps.googleusercontent.com">
<script src="https://accounts.google.com/gsi/client" async defer></script>

这些在正文的开头：

    <script>
      function handleCredentialResponse(response) {
        console.log('hello, world');
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
      
        google.accounts.id.initialize({
          client_id: 'MY_GOOGLE_ID.apps.googleusercontent.com',
          callback: handleCredentialResponse
        });
        
        // Display the One Tap prompt
        google.accounts.id.prompt();
        
        // Display the Sign In With Google Button
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: 'outline', size: 'large' }
        );
      }
      </script>

然后将此行添加到我的Navbar.js

<li className='nav-item'>
  <div id="buttonDiv" class="g-signin2" data-onsuccess="onSignIn"></div>
</li>

据我了解，当用户正确登录时，Google 应该会调用 handleCredentialResponse 回调，但我的 console.log 上没有出现任何内容。

我可以使用不同的凭据正确登录。用户图像和电子邮件地址出现在按钮中，但我没有收到该事件的通知。

我尝试按照说明进行操作，但似乎 Google 建议顶部链接中提到的这些新方法，但说明仍然适用于旧实现。

有人可以帮忙吗？

【问题讨论】：

标签： google-signin google-authentication

【解决方案1】：

所以当你在你的标签中初始化按钮时，它会有一个“data-callback”参数。像下面这样传递你的处理程序。

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         **data-callback="handleCredentialResponse"**
         data-login_uri="https://your.domain/your_login_endpoint"
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </body>
</html>

【讨论】：