相关疑难解决方法(0)

我正在从Google 登录平台迁移到较新的Google Identity Services 库。

应用程序.svelte：

<svelte:head>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</svelte:head>

<div id="g_id_onload"
     data-client_id="x.apps.googleusercontent.com"
     data-callback="handleCredentialResponse">
</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>

<script>
    function decodeJwtResponse(token) {
        let base64Url = token.split('.')[1]
        let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
        return JSON.parse(jsonPayload)
    }

    let responsePayload;
    function handleCredentialResponse(response) {
        // decodeJwtResponse() is a custom function defined by you
        // to decode the credential response. …

我正在按照此文档谷歌一键登录在我的反应应用程序中实现谷歌一键登录。

我已将以下代码添加到我的组件 JSX 中，并且开始出现 google 提示登录：

  const handleCredentialResponse = response => {
    console.log('response', response);
  };

return (
    <Fragment>
      <div
        id="g_id_onload"
        data-auto_select = 'false'
        data-client_id={clientId}
        data-callback={(e) => handleCredentialResponse(e)}>
      </div>
    </Fragment>
  );

我面临的问题是回调函数没有触发。在寻找解决方案后，我偶然发现了这个SO问题。OP 提出了类似的问题，并使用 javascript API 语法来显示谷歌一键点击而不是 HTML 代码为了遵循上述问题，我阅读了此文档使用一键 JavaScript API。但我无法理解变量 google 从哪里来？

示例代码：

window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  }

如果有人可以告诉我这可能会解决我的回调函数不触发的问题。谢谢！