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

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

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

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

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

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

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

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

select_by

自動ログインを有効にするには、次のスニペットに示すように、コードに 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 ドメインを親ドメインに設定します。たとえば、 data-state_cookie_domain="example.com" を g_id_onload 要素に追加します。 親ドメインが example.com で、サブドメインの名前が webapp.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 ページの例

  • 単一の Google セッション

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