サイトにワンタップ プロンプトを追加して、ユーザーがウェブアプリに登録またはログインできるようにします。HTML と JavaScript を使用してプロンプトをレンダリングし、カスタマイズします。
前提条件
設定の手順に沿って、OAuth 同意画面を構成し、クライアント ID を取得して、クライアント ライブラリを読み込みます。
ログインページに [Google でログイン] ボタンを追加します。
プロンプトのレンダリング
ワンタップを表示するページにコード スニペットを配置します。
HTML
ワンタップ プロンプトを表示し、JWT 認証情報をログイン エンドポイントに返します。
<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 トークンとともにログイン エンドポイントに送信されます。
必要に応じて、data-skip_prompt_cookie 属性と Cookie を使用して、コンテンツを変更できない静的 HTML ページにワンタップ プロンプトを表示するかどうかを制御します。指定した Cookie が設定されている場合、プロンプトは表示されません。
省略可能な data-context 属性を使用して、プロンプト タイトルで使用されるテキストを変更します。たとえば、data-context: "signup" は「ログイン」を「登録」に変更します。
デフォルトでは、ユーザーがプロンプトの外側をクリックすると、ワンタップ プロンプトは自動的に閉じます。data-cancel_on_tap_outside 属性を false に設定すると、この動作を無効にできます。
サポートされている属性の一覧については、g_id_onload リファレンスをご覧ください。
JavaScript
ワンタップ プロンプトを表示し、JWT 認証情報をブラウザの JavaScript コールバック ハンドラに返します。
<script> window.onload = function () { google.accounts.id.initialize({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: 'YOUR_CALLBACK_HANDLER' }); google.accounts.id.prompt(); } </script> JavaScript でワンタップ プロンプトを構成するには、まず initialize() メソッドを呼び出す必要があります。次に、prompt() メソッドを呼び出してプロンプト UI を表示します。
オプションの context フィールドを使用して、プロンプト タイトルで使用されるテキストを変更します。たとえば、context: 'signup' は「ログイン」を「登録」に変更します。
デフォルトでは、ユーザーがプロンプトの外側をクリックすると、ワンタップ プロンプトは自動的に閉じます。この動作を無効にするには、cancel_on_tap_outside プロパティを false に設定します。
データ オプションの詳細なリストについては、idConfiguration リファレンスをご覧ください。
メッセージのステータス
JavaScript コールバック関数を使用して、プロンプトの UI ステータス通知をリッスンします。
通知は次のタイミングで送信されます。
表示モメント:
prompt()メソッドが呼び出された後に発生します。通知には、UI が表示されるかどうかを示すブール値が含まれています。スキップされた瞬間: 自動キャンセルまたは手動キャンセルによってワンタップ プロンプトが閉じられた場合、または Google が認証情報を発行できなかった場合（選択したセッションで Google からログアウトした場合など）に発生します。
この場合は、次の ID プロバイダ（存在する場合）に進むことをおすすめします。
閉じたモーメント: Google が認証情報を正常に取得した場合、またはユーザーが認証情報の取得フローを停止した場合に発生します。たとえば、ユーザーがログイン ダイアログにユーザー名とパスワードの入力を開始したときに、
google.accounts.id.cancel()メソッドを呼び出してワンタップ プロンプトを閉じ、閉じたモーメントをトリガーできます。
HTML
data-moment_callback 属性を使用して、JavaScript コールバック関数を指定します。通知を受け取るには、コールバック ハンドラが必要です。
<html> <head> <script> function continueWithNextIdp(notification) { if (notification.isNotDisplayed() || notification.isSkippedMoment()) { // try Next provider if One Tap is not displayed or skipped } } </script> </head> <body> ... <div id="g_id_onload" data-client_id="YOUR_GOOGLE_CLIENT_ID" data-login_uri="https://your.domain/your_login_endpoint" data-moment_callback="continueWithNextIdp" </div> ... </body> </html> ユーザーのログインや登録を容易にするために、複数の ID プロバイダと通信して、使用可能な認証情報を探すことができます。次の ID プロバイダを呼び出すために、プロンプトの UI ステータスを確認することもできます。
JavaScript
コールバック ハンドラをパラメータとして google.accounts.id.prompt に渡します。ここでは、通知の更新を処理するために矢印関数を使用しています。
<script> window.onload = function () { google.accounts.id.initialize({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: 'YOUR_CALLBACK_HANDLER' }); google.accounts.id.prompt((notification) => { if (notification.isNotDisplayed() || notification.isSkippedMoment()) { // try next provider if OneTap is not displayed or skipped } }); } </script> ボタンとプロンプト
[Google でログイン] ボタンとワンタップ プロンプトが 1 つのページに一緒に表示される場合があります。
HTML
g_id_onload 要素と g_id_signin 要素の両方を含めて、[Google でログイン] ボタンとワンタップ プロンプトの両方を表示します。
<div id="g_id_onload" data-client_id="YOUR_GOOGLE_CLIENT_ID" data-context="signin" data-ux_mode="redirect" data-login_uri="https://your.domain/your_login_endpoint" data-itp_support="true"> </div> <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin_with" data-size="large" data-logo_alignment="left"> </div> JavaScript
renderButton() 関数と prompt() 関数の両方を同時に呼び出して、「Google でログイン」ボタンとワンタップ プロンプトを表示します。
<script> window.onload = function () { google.accounts.id.initialize({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: 'YOUR_CALLBACK_HANDLER' }); const parent = document.getElementById('google_btn'); google.accounts.id.renderButton(parent, {theme: "filled_blue"}); google.accounts.id.prompt(); } </script> ワンタップを覆わない
このセクションは、FedCM が無効な場合にのみ適用されます。FedCM が有効になっている場合、ブラウザはページ コンテンツの上にユーザー プロンプトを表示します。
エンドユーザーにすべての情報が表示されるためには、Google One Tap が他のコンテンツで覆われないようにする必要があります。そうしないと、ポップアップ ウィンドウがトリガーされることがあります。
ページ レイアウトと要素の z-index プロパティを再確認し、Google One Tap が他のコンテンツで覆われないようにしてください。境界の 1 つのピクセルだけが覆われていても、UX フロー変更がトリガーされることがあります。
認証情報のレスポンス
認証情報レスポンスには、Google 署名付きの JWT が含まれています。レスポンスは、JavaScript コールバック関数を使用してブラウザに返すか、ログイン エンドポイントへのリダイレクトを通じてプラットフォームに返されます。
JS コールバック
HTML または JavaScript を使用してコールバックを構成します。
HTML
<div id="g_id_onload" data-client_id="YOUR_GOOGLE_CLIENT_ID" data-callback="YOUR_CALLBACK_HANDLER" </div> JavaScript
google.accounts.id.initialize({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: 'YOUR_CALLBACK_HANDLER' }); たとえば、handleCredentialResponse は JWT をデコードし、ID トークンの一部のフィールドをコンソールに出力します。
<script> google.accounts.id.initialize({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: handleCredentialResponse }); function handleCredentialResponse(response) { const responsePayload = decodeJwtResponse(response.credential); console.log("ID: " + responsePayload.sub); console.log('Full Name: ' + responsePayload.name); console.log('Given Name: ' + responsePayload.given_name); console.log('Family Name: ' + responsePayload.family_name); console.log("Image URL: " + responsePayload.picture); console.log("Email: " + responsePayload.email); } function decodeJwtResponse(token) { let base64Url = token.split('.')[1]; let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); return JSON.parse(jsonPayload); } </script> リダイレクト
認証情報をプラットフォームのログイン エンドポイントに返すには、OAuth 2.0 ウェブ クライアントの [承認済みリダイレクト URI] 設定に URL を追加します。
HTML または JavaScript を使用してリダイレクト URI を構成します。
HTML
<div id="g_id_onload" data-client_id="YOUR_GOOGLE_CLIENT_ID" data-ux_mode="redirect" data-login-uri="YOUR_LOGIN_URI" </div> JavaScript
google.accounts.id.initialize({ client_id: 'YOUR_GOOGLE_CLIENT_ID', ux_mode: 'redirect', login_uri: 'YOUR_LOGIN_URI' });