ワンタップ プロンプトの位置を変更する

警告: One Tap が FedCM API を使用するように移行すると、ブラウザが One Tap プロンプトのサイズと位置を制御します。カスタム ポジションはサポートされていません。新しいワンタップ統合では、プロンプトの位置をカスタマイズしないでください。既存の統合については、移行ガイドを確認し、必要に応じてアプリを更新します。

目的: デフォルトのログイン フローが要件を満たしていない場合は、いくつかの方法でカスタマイズできます。利用可能なカスタマイズ オプションについては、以下をご覧ください。

デフォルトでは、ワンタップ プロンプトはパソコンのウェブブラウザ ウィンドウの右上に表示されます。FedCM が使用されている場合は、ブラウザがプロンプトの場所を完全に制御します。そのため、カスタム レイアウトはサポートされていません。

それ以外の場合は、コンテナ要素内にワンタップを表示して、プロンプトの位置を変更します。そのためには、コンテナ要素の DOM ID を data-prompt_parent_id 属性で指定します。

警告: ワンタップ プロンプトのコンテンツを非表示にしないでください。ワンタップ プロンプトのコンテンツが Google の iframe からのものであることをユーザーが認識できないようにしないでください。これを行わないと、プロジェクトの停止、アカウントの強制停止、またはその両方の措置が取られる可能性があります。

次のコードサンプルでは、g_id_onload 要素をコンテナ要素として再利用し、指定した位置にワンタップ プロンプトを表示します。

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-prompt_parent_id="g_id_onload"
     style="position: absolute; top: 100px; right: 30px;
            width: 0; height: 0; z-index: 1001;">
</div>

data-prompt_parent_id 属性は、モバイル ウェブブラウザでは無視されます。