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

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

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

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

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

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

• ユーザーは、まず Google アカウントにログインする必要があります。
• アカウント プロフィールをアプリと共有することに同意している。
• FedCM を使用している場合、過去 10 分間にログイン試行が 1 回のみだった。この期間にログインが繰り返されると、ワンタップが表示されます。
• FedCM を使用する場合、ユーザーが FedCM のロールアウト前にウェブサイトを承認していた場合でも、Chrome では各 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();
}

主なユーザー ジャーニー

自動ログインページ。