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

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

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

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