グーグルワンタップJavaScriptAPIを使用するときに変数グーグルを定義する方法

Dec 10 2020

私はこのドキュメントのグーグルワンタップサインインに従って、reactアプリにグーグルワンタップサインインを実装しています。

コンポーネント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コードの代わりにGoogleワンタップを表示した場合上記の質問に従うには、このドキュメントを読みます。ワンタップJavaScriptAPIを使用します。しかし、変数googleがどこから来ているのか理解できませんか?

サンプルコード:

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

誰かが私にコールバック関数がトリガーされないという私の問題を解決するかもしれないと言うことができれば。ありがとう!

回答

1 Alwaysalearner Dec 31 2020 at 20:21

NileshPatelとこのパッケージreact-google-one-tap-loginによって投稿されたコメントの助けを借りて解決策を見つけました。

上記のパッケージのソースコードをチェックすると、私は何とかしなければならないことがわかりました

交換:

 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',
  });