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

このページでは、ユーザーが 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 ワンタップ プロンプトが自動的に表示されるページにリダイレクトされます。この設定では、自動選択を禁止する必要があります。そうしないと、ユーザーは自動的に再度ログインされ、デッドループ UX につながります。

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

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

主なユーザー ジャーニー

自動ログインページ。