使用 google one-tap javascript API 时如何定义变量 google

Question

我正在按照此文档谷歌一键登录在我的反应应用程序中实现谷歌一键登录。我已将以下代码添加到我的组件 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();  }如果有人可以告诉我这可能会解决我的回调函数不触发的问题。谢谢！

Answer 1

检查上述包中的源代码我发现我必须

代替：

 google.accounts.id.initialize({

    client_id: CLIENT_ID,

    callback: data => handleCredentialResponse(data),

    state_cookie_domain: 'https://example.com',

  });

和

 window.google.accounts.id.initialize({

    client_id: CLIENT_ID,

    callback: data => handleCredentialResponse(data),

    state_cookie_domain: 'https://example.com',

  });

Answer 2

我通过安装 Google 帐户类型来修复它

npm install @types/google.accounts

Answer 3

async只需从脚本标签中删除该属性：

前：

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

后：

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

如果您使用 Typescript，您可以创建一个google.d.ts文件：

/// <reference types="google-one-tap" />

/// <reference types="google.accounts" />

declare global {

  const google: typeof import('google-one-tap');

}

google-one-tap并google.accounts可以在 NPM 上找到。