Google One Tap を表示

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 は他のコンテンツの対象となりません。UX フロー 境界の 1 つのピクセルしか覆われていない場合でも、変更がトリガーされる場合があります。