このページは Cloud Translation API によって翻訳されました。

Google One Tap を表示

サイトにワンタッププロンプトを追加して、ユーザーがウェブアプリに登録またはログインできるようにします。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() メソッドを呼び出してワンタッププロンプトを閉じ、閉じたモーメントをトリガーできます。

警告: 閉じられたモーメントが発生した場合は、次のいずれの ID プロバイダも試さないでください。

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'
});

Google One Tap を表示 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

前提条件

プロンプトのレンダリング

HTML

JavaScript

メッセージのステータス

HTML

JavaScript

ボタンとプロンプト

HTML

JavaScript

ワンタップを覆わない

認証情報のレスポンス

JS コールバック

HTML

JavaScript

リダイレクト

HTML

JavaScript

Google One Tap を表示