Google One Tap を表示するすべてのページに、次のコード スニペットを配置します。
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
data-login_uri 属性は、独自のウェブアプリのログイン エンドポイントの URI です。カスタムデータ属性を追加できます。カスタムデータ属性は、Google から取得した ID トークンとともにログイン エンドポイントに送信されます。
データ属性の完全なリストについては、g_id_onload リファレンス ページをご覧ください。
Google One タップをカバーしない
このセクションが適用されるのは、FedCM が無効になっている場合のみです。FedCM が有効になっていると、ブラウザはページ コンテンツの上にユーザー プロンプトを表示します。
エンドユーザーに表示されるすべての情報を確実に見ることができるように、Google One Tap が他のコンテンツで隠れないようにする必要があります。そうしないと、ポップアップ ウィンドウがトリガーされることがあります。
ページ レイアウトと要素の Z-Index プロパティを再確認し、Google One Tap が他のコンテンツによって常に覆われていないかご確認ください。UX フローの変更は、境界の 1 つのピクセルのみが覆われている場合でもトリガーされる場合があります。