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

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

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

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

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

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

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

自動ログインが有効になっているページの場合、これらの条件が満たされると、ユーザー操作なしで訪問者 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 のタップ操作に関するメッセージが自動的に表示されるページに誘導されます。この設定では、自動選択を禁止する必要があります。そうしないと、ユーザーは自動的に再ログインし、デッドループ 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 による One Tap をレンダリングするときに、その URL パラメータを確認し、自動ログインがある場合は無効にします。

主なユーザー ジャーニー

自動ログインページ。

FedCM の使用

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

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

FedCM なし

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

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

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

  • 複数の Google セッション

    FedCM の使用

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

    FedCM なし

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

  • 単一の Google セッション

    FedCM の使用

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

    FedCM なし

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