ディスプレイ（Google One タップ）

Google One タップを表示するすべてのページに、次のコード スニペットを配置します。

<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 をインタラクティブにカスタマイズし、コードを生成できます。

Google One タップは含めないでください

表示される情報をエンドユーザーが確認できるように、Google One タップの他のコンテンツが隠れてはなりません。そうしないと、ポップアップ ウィンドウがトリガーされることがあります。

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

キーポイント: Google One タップを他のコンテンツでカバーしないでください。

警告: ワンタップ プロンプトのすべての内容を非表示にしないでください。One Tap プロンプトのコンテンツが Google iframe からのものであるという印象を隠さない。そうしないと、プロジェクトが停止されたり、アカウントが停止されたりする可能性があります。