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

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

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

Google One Tap は自動ログインをサポートしています。自動ログインでは、サイトに戻ったときに訪問者が手動で行う手順が不要になり、スムーズなユーザー エクスペリエンス(UX)が実現します。ユーザーは前回のアクセス時に選択した Google アカウントを覚えておく必要がないため、プラットフォームで不要な重複アカウントが作成される可能性を低減できます。

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

自動ログインを行うには、次の条件が必要です。

  • ユーザーは、まず Google アカウントにログインする必要があります。
  • アカウント プロフィールをアプリと共有することに以前に同意した
  • FedCM を使用する場合、過去 10 分間に一度だけログインを試行した。 このウィンドウでログインが繰り返し試行されると、ワンタップが表示されます。

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

自動ログインの成功率は、返された認証情報オブジェクトの select_by フィールドの auto 値を使用して測定できます。

自動ログインを有効にするには、次のスニペットに示すように、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 One Tap のメッセージが自動的に表示されるページに誘導されます。この設定では、自動選択を禁止する必要があります。そうしないと、ユーザーは自動的に再度ログインし、デッドループの 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();
}

そのため、ログアウト ステータスがドメインの Cookie を介して記録されるため、UX のデッドループを回避できます。

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

ログイン後のページにクライアント ライブラリを読み込まない場合は、以下の方法を使用して、ログアウト後のデッドループ UX を防止します。

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

主なユーザー ジャーニー

自動ログインのページ。

FedCM の使用

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

ユーザーが 5 秒以内に [X] をクリックしてキャンセルしなかった場合、ID トークンがウェブサイトと共有されます。

FedCM を使用しない場合

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

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

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

  • 複数の Google セッション

    FedCM の使用

    FedCM アカウント選択ツール ページ

    FedCM を使用しない場合

    Account Chooser ページ
  • 単一の Google セッション

    FedCM の使用

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

    FedCM を使用しない場合

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