自動ログインと自動ログアウト

このページでは、ユーザーが Google One Tap でログインまたはログアウトする方法に関連する機能を実装する方法について説明します。

ユーザーを自動的にログインさせる

Google ワンタップは自動ログインをサポートしています。これにより、ユーザーがサイトに戻るときに手動で行う必要がある手順を排除し、円滑なユーザー エクスペリエンス（UX）を提供します。ユーザーは、前回のアクセス時に選択した Google アカウントを覚えておく必要がないため、プラットフォーム上で不要な重複アカウントが作成される可能性が低くなります。

自動ログインは、[Google でログイン] ボタンとワンタップ ダイアログを補完することを目的としています。この機能はサイト全体で使用されることを想定しており、手動での登録やアカウントの切り替えは、ユーザーがサイトからログアウトした後にのみ行われます。

自動ログインを行うには、次の条件を満たす必要があります。

  • ユーザーはまず Google アカウントにログインする必要があります。
  • アカウント プロフィールをアプリと共有することに以前同意している。
  • FedCM を使用している場合、過去 10 分間に 1 回だけログインを試みた。この期間中にログイン試行が繰り返されると、ワンタップが表示されます。
  • FedCM を使用する場合、ユーザーが FedCM のロールアウト前にウェブサイトを承認していても、Chrome では、各 Chrome インスタンスで Google アカウントを使用してウェブサイトにログインすることの再確認が求められます。この変更は、ワンタップを使用している既存のサイトのコンバージョン率に影響する可能性があります。Chrome M121 アップデートでは、自動ログインの改善により、コンバージョン率の低下の問題が軽減されます。

自動ログインが有効になっているページで、これらの条件が満たされている場合、ユーザーの ID トークン認証情報はユーザーの操作なしで自動的に返されます。これらの条件が満たされない場合、ページで自動ログインが有効になっていても、ユーザーはデフォルトでワンタップ フローを使用してログインまたは同意を行います。複数の Google アカウントを持つユーザーがサイトにアクセスする場合、まず 1 つの Google アカウントにログインし、そのアカウントに同意する必要があります。

自動ログインの成功率は、JavaScript コールバック（callback または data-callback）でレスポンスを処理するときに、返された CredentialResponse オブジェクトの select_by フィールドの auto 値を使用して測定できます。select_by は、login_uri または data-login_uri に送信される HTTP POST リクエストには含まれません。

自動ログインを有効にするには、次のスニペットに示すように、コードに data-auto_select="true" を追加します。

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-auto_select="true">
</div>

ログアウト

ユーザーがウェブサイトからログアウトすると、Google ワンタップ プロンプトが自動的に表示されるページにリダイレクトされます。この設定では、自動選択を禁止する必要があります。そうしないと、ユーザーが自動的に再度ログインされ、デッドループ UX が発生します。

FedCM の使用

ユーザー エクスペリエンスを向上させるため、自動ログインの試行間隔は 10 分に設定されています。この期間中は、代わりにワンタップ プロンプトが表示されます。ユーザーは、ワンタップを明示的にクリックしてログインする必要があります。

FedCM を使用しない場合

ユーザーがログアウトした後に自動選択を禁止するには、すべてのログアウト リンクとボタンにクラス名 g_id_signout を追加します。以下のコード スニペットをご覧ください。

<div class="g_id_signout">Sign Out</div>

次の JavaScript コード スニペットを使用して、ログアウトすることもできます。

const button = document.getElementById('signout_button');
button.onclick = () => {
  google.accounts.id.disableAutoSelect();
}

デッドループ UX を防ぐため、ユーザーのログアウト ステータスは、Google Identity Services ライブラリによって設定される g_state という名前の Cookie に保存されます。デフォルトでは、Cookie のドメインは現在のページのドメインに設定されます。親ドメインとサブドメインにワンタップが表示される場合、状態 Cookie はすべてのドメインで表示される必要があります。data-state_cookie_domain 属性を使用して、g_state Cookie ドメインを親ドメインに設定します。たとえば、example.com の親ドメインと webapp.example.com という名前のサブドメインの g_id_onload 要素に data-state_cookie_domain="example.com" を追加します。

ドメインで使用されているすべての Cookie をモニタリングするサービスがある場合は、g_state Cookie を通知する必要があります。

ログイン後のページにクライアント ライブラリを読み込まない場合は、次の解決策を使用して、ログアウト後にデッドループ UX が発生しないようにします。

  • ログアウト時に、ワンタップが表示されないページ（https://example.com/logged_out など）または自動ログインが常に無効になっているページにユーザーをリダイレクトします。
  • ログアウト時に、URL にパラメータを追加します。例: logged_out=1。JavaScript API でワンタップをレンダリングする場合は、URL パラメータを確認し、存在する場合は自動ログインを無効にします。

主なユーザー ジャーニー

自動ログイン ページ。

FedCM の使用

FedCM 自動ログインのポップアップ

ユーザーは、[X] ボタンをクリックしてワンタップ プロンプトを閉じることができます。ユーザー補助を考慮して、ユーザーが [X] ボタンをクリックした場合でも、ID トークンはウェブサイトと共有されます。

ユーザー エクスペリエンスを向上させるため、自動ログインの試行間隔は 10 分に設定されています。この期間中は、代わりにワンタップ プロンプトが表示されます。ユーザーは、ワンタップを明示的にクリックしてログインする必要があります。

FedCM を使用しない場合

自動ログイン ポップアップの例。

ユーザーが 5 秒以内に [キャンセル] ボタンをクリックしないと、ID トークンがウェブサイトと共有されます。

ログインがキャンセルされると、アクティブな Google セッションの数に基づいて、アカウント選択ページまたはリピーター ページが表示されます。

  • 複数の Google セッション

Account Chooser ページの例

  • 1 回の Google セッション

ワンタップのリピーター ページ