2024 年第 1 四半期に、Chrome のサードパーティ Cookie のサポート終了が開始されます。移行ガイドに沿って変更の可能性を確認し、ウェブサイトへのログインで悪影響が生じないようにしてください。

このページは Cloud Translation API によって翻訳されました。

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

このページでは、ユーザーが 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 につながります。

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 パラメータを確認し、自動ログインがある場合は無効にします。