ディスプレイ(Google One タップ)

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 Tap を紹介しない

このセクションが適用されるのは、FedCM が無効になっている場合のみです。FedCM が有効になっている場合、ブラウザはページ コンテンツの上にユーザー プロンプトを表示します。

表示されたすべての情報をエンドユーザーに確実に見せるため、Google One Tap が他のコンテンツで覆われないようにしてください。そうしないと、ポップアップ ウィンドウが表示される場合があります。

ページ レイアウトと要素の Z-Index プロパティを再度確認して、Google One Tap が他のコンテンツによって覆われていないことを確認します。境界内の 1 ピクセルのみが覆われる場合でも、UX フローの変更がトリガーされる可能性があります。