このリファレンス ページでは、Sign In with Google HTML データ属性 API について説明します。この API を使用すると、ウェブページにワンタップ プロンプトまたは [Google でログイン] ボタンを表示できます。
ID が「g_id_onload」の要素
[Google でログイン] データ属性は、<div>
や <span>
など、表示または非表示の任意の要素に配置できます。唯一の要件は、要素 ID を g_id_onload
に設定することです。この ID を複数の要素に設定しないでください。
データ属性
次の表に、データ属性とその説明を示します。
属性 | |
---|---|
data-client_id |
アプリのクライアント ID |
data-auto_prompt |
Google One タップを表示します。 |
data-auto_select |
Google One Tap での自動選択を有効にします。 |
data-login_uri |
ログイン エンドポイントの URL |
data-callback |
JavaScript ID トークン ハンドラ関数の名前 |
data-native_login_uri |
パスワード認証情報ハンドラ エンドポイントの URL |
data-native_callback |
JavaScript パスワード認証情報ハンドラ関数の名前 |
data-native_id_param |
credential.id 値のパラメータ名 |
data-native_password_param |
credential.password 値のパラメータ名 |
data-cancel_on_tap_outside |
ユーザーがメッセージの外側をクリックした場合にメッセージをキャンセルするかどうかを制御します。 |
data-prompt_parent_id |
ワンタップ プロンプト コンテナ要素の DOM ID |
data-skip_prompt_cookie |
指定された Cookie の値が空でない場合、ワンタップ操作をスキップします。 |
data-nonce |
ID トークンのランダムな文字列 |
data-context |
ワンタップ プロンプトのタイトルと単語 |
data-moment_callback |
プロンプト UI ステータス通知リスナーの関数名 |
data-state_cookie_domain |
親ドメインとそのサブドメインでワンタップを呼び出す必要がある場合は、親ドメインをこの属性に渡して、1 つの共有 Cookie が使用されるようにします。 |
data-ux_mode |
[Google でログイン] ボタンの UX フロー |
data-allowed_parent_origin |
中間 iframe の埋め込みを許可するオリジン。この属性が存在する場合、ワンタップは中間 iframe モードで実行されます。 |
data-intermediate_iframe_close_callback |
ユーザーがワンタップを手動で閉じると、デフォルトの中間 iframe 動作がオーバーライドされます。 |
data-itp_support |
ITP ブラウザでアップグレードされたワンタップ UX を有効にします。 |
data-login_hint |
ユーザーにヒントを提供して、アカウント選択をスキップします。 |
data-hd |
アカウントの選択をドメインごとに制限する。 |
data-use_fedcm_for_prompt |
ブラウザがユーザーのログイン プロンプトを制御し、ウェブサイトと Google の間のログインフローを仲介できるようにします。 |
data-enable_redirect_uri_validation |
リダイレクト URI の検証ルールに準拠したボタン リダイレクト フローを有効にします。 |
属性タイプ
以降のセクションでは、各属性のタイプと例について詳しく説明します。
data-client_id
この属性は、アプリのクライアント ID です。これは Google Cloud コンソールで検索して作成できます。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | はい | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
data-auto_prompt
この属性は、ワンタップ表示するかどうかを指定します。デフォルト値は true
です。この値が false
の場合、Google ワンタップは表示されません。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
ブール値 | 省略可 | data-auto_prompt="true" |
data-auto_select
この属性は、1 つの Google セッションのみがアプリを承認した場合に、ユーザー操作なしで ID トークンを自動的に返すかどうかを決定します。デフォルト値は false
です。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
ブール値 | 省略可 | data-auto_select="true" |
data-login_uri
この属性は、ログイン エンドポイントの URI です。
この値は、API コンソールで構成した OAuth 2.0 クライアントの承認済みリダイレクト URI のいずれかと完全に一致する必要があります。また、リダイレクト URI の検証ルールに準拠している必要があります。
現在のページがログイン ページである場合は、この属性を省略できます。その場合、認証情報はデフォルトでこのページに投稿されます。
コールバック関数が定義されておらず、ユーザーが [Google でログイン] ボタンまたは [ワンタップ] ボタンをクリックした場合、または自動ログインが行われた場合、ID トークン認証情報レスポンスがログイン エンドポイントに投稿されます。
詳しくは、以下の表をご覧ください。
タイプ | 省略可 | 例 |
---|---|---|
URL | デフォルトは、現在のページの URI または指定した値です。data-ux_mode="popup" と data-callback が設定されている場合は無視されます。 |
data-login_uri="https://www.example.com/login" |
ログイン エンドポイントは、本文に ID トークン値を含む credential
キーを含む POST リクエストを処理する必要があります。
ログイン エンドポイントへのリクエストの例を次に示します。
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
データ コールバック
この属性は、返された ID トークンを処理する JavaScript 関数の名前です。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | data-login_uri が設定されていない場合は必須です。 |
data-callback="handleToken" |
data-login_uri
属性と data-callback
属性のいずれかを使用できます。これは、次のコンポーネントと UX モードの構成に依存します。
data-login_uri
属性は、data-callback
属性を無視する [Google でログイン] ボタンのredirect
UX モードで必須です。Google ワンタップと Google ログイン ボタンの
popup
UX モードには、これらの 2 つの属性のいずれかを設定する必要があります。両方を設定した場合は、data-callback
属性の優先度が高くなります。
名前空間内の JavaScript 関数は、HTML API ではサポートされていません。代わりに、名前空間のないグローバル JavaScript 関数を使用してください。(たとえば、mylib.callback
ではなく mylibCallback
を使用しているなど)。
data-native_login_uri
この属性は、パスワード認証情報ハンドラ エンドポイントの URL です。data-native_login_uri
属性または data-native_callback
属性のいずれかを設定すると、Google セッションがない場合、JavaScript ライブラリはネイティブ認証情報マネージャーにフォールバックします。data-native_callback
属性と data-native_login_uri
属性の両方を設定することはできません。詳細については、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-login_uri="https://www.example.com/password_login" |
data-native_callback
この属性は、ブラウザのネイティブ認証情報マネージャーから返されたパスワード認証情報を処理する JavaScript 関数の名前です。data-native_login_uri
属性または data-native_callback
属性のいずれかを設定すると、Google セッションがない場合、JavaScript ライブラリはネイティブ認証情報マネージャーにフォールバックします。data-native_callback
と data-native_login_uri
の両方を設定することはできません。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-native_callback="handlePasswordCredential" |
名前空間内の JavaScript 関数は、HTML API ではサポートされていません。代わりに、名前空間のないグローバル JavaScript 関数を使用してください。(たとえば、mylib.callback
ではなく mylibCallback
を使用しているなど)。
data-native_id_param
パスワード認証情報をパスワード認証情報ハンドラ エンドポイントに送信するときに、credential.id
フィールドのパラメータ名を指定できます。デフォルト名は email
です。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
URL | 省略可 | data-native_id_param="user_id" |
data-native_password_param
パスワード認証情報ハンドラ エンドポイントにパスワード認証情報を送信するときに、credential.password
値のパラメータ名を指定できます。デフォルト名は password
です。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
URL | 省略可 | data-native_password_param="pwd" |
data-cancel_on_tap_outside
この属性は、ユーザーがプロンプトの外側をクリックした場合にワンタップ リクエストをキャンセルするかどうかを設定します。デフォルト値は true
です。無効にするには、値を false
に設定します。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
ブール値 | 省略可 | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
この属性は、コンテナ要素の DOM ID を設定します。設定されていない場合は、ウィンドウの右上にワンタップ プロンプトが表示されます。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
この属性は、指定された Cookie の値が空でない場合、ワンタップ機能をスキップします。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-skip_prompt_cookie="SID" |
data-nonce
この属性は、ID トークンがリプレイ攻撃を防ぐために使用するランダムな文字列です。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-nonce="biaqbm70g23" |
ノンスの長さは、環境でサポートされている JWT の最大サイズと、個々のブラウザとサーバー HTTP サイズの制約によって制限されます。
data-context
この属性を使用すると、ワンタップ プロンプトに表示されるタイトルとメッセージのテキストを変更できます。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-context="use" |
次の表に、使用可能なコンテキストとその説明をすべて示します。
コンテキスト | |
---|---|
signin |
「Google でログイン」 |
signup |
「Google で登録」 |
use |
[Google で使用する] |
data-moment_callback
この属性は、プロンプト UI ステータス通知リスナーの関数名です。詳細については、データ型 PromptMomentNotification
を参照してください。
詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-moment_callback="logMomentNotification" |
名前空間内の JavaScript 関数は、HTML API ではサポートされていません。代わりに、名前空間のないグローバル JavaScript 関数を使用してください。(たとえば、mylib.callback
ではなく mylibCallback
を使用しているなど)。
data-state_cookie_domain
親ドメインとそのサブドメインにワンタップを表示する必要がある場合は、親ドメインをこの属性に渡して、単一の共有状態 Cookie が使用されるようにします。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-state_cookie_domain="example.com" |
data-ux_mode
この属性は、[Google でログイン] ボタンで使用される UX フローを設定します。デフォルト値は popup
です。この属性はワンタップ UX には影響しません。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-ux_mode="redirect" |
次の表に、使用可能な UX モードとその説明を示します。
UX モード | |
---|---|
popup |
ポップアップ ウィンドウでログイン UX フローを実行します。 |
redirect |
フルページ リダイレクトによってログイン UX フローを実行します。 |
data-allowed_parent_origin
中間 iframe の埋め込みを許可するオリジン。この属性が存在する場合、ワンタップは中間 iframe モードで実行されます。詳細については、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列または文字列配列 | 省略可 | data-allowed_parent_origin="https://example.com" |
次の表に、サポートされている値の型とその説明を示します。
値の型 | ||
---|---|---|
string |
単一ドメインの URI。 | 「https://example.com」 |
string array |
カンマ区切りのドメイン URI のリスト。 | "https://news.example.com,https://local.example.com" |
data-allowed_parent_origin
属性の値が無効な場合、中間 iframe モードのワンタップ初期化は失敗して停止します。
ワイルドカード接頭辞もサポートされています。たとえば、"https://*.example.com"
は、example.com
とそのサブドメインをすべてのレベルで照合します(news.example.com
、login.news.example.com
など)。ワイルドカードを使用する際は、次の点に注意してください。
- パターン文字列は、ワイルドカードとトップレベル ドメインのみで構成することはできません。たとえば、
https://*.com
とhttps://*.co.uk
は無効です。上記のとおり、"https://*.example.com"
はexample.com
とそのサブドメインと一致します。カンマ区切りのリストを使用して、2 つの異なるドメインを表すこともできます。たとえば、"https://example1.com,https://*.example2.com"
はドメインexample1.com
、example2.com
、example2.com
のサブドメインと一致します。 - ワイルドカード ドメインは安全な https:// スキームで始まる必要があるため、
"*.example.com"
は無効と見なされます。
data-intermediate_iframe_close_callback
ユーザーがワンタップ UI の [X] ボタンをタップしてワンタップを手動で閉じる場合のデフォルトの中間 iframe 動作をオーバーライドします。デフォルトの動作では、中間 iframe は DOM からすぐに削除されます。
data-intermediate_iframe_close_callback
フィールドは、中間 iframe モードでのみ有効になります。また、影響はワンタップ iframe ではなく、中間 iframe にのみ及ぶため、コールバックが呼び出される前に、ワンタップ UI が削除されます。
タイプ | 必須 | 例 |
---|---|---|
関数 | 省略可 | data-intermediate_iframe_close_callback="logBeforeClose" |
名前空間内の JavaScript 関数は、HTML API ではサポートされていません。代わりに、名前空間のないグローバル JavaScript 関数を使用してください。(たとえば、mylib.callback
ではなく mylibCallback
を使用しているなど)。
data-itp_support
このフィールドは、Intelligent Tracking Prevention(ITP)をサポートするブラウザで
アップグレードされたワンタップ UX を有効にするかどうかを決定します。デフォルト値は false
です。詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
ブール値 | 省略可 | data-itp_support="true" |
data-login_hint
アプリがログインするユーザーを事前に把握している場合は、Google にログイン ヒントを提供できます。成功すると、アカウントの選択はスキップされます。指定できる値は、メールアドレスまたは ID トークンの sub フィールドです。
詳細については、
login_hint
の OpenID Connect ドキュメントをご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列。メールアドレスまたは ID トークンの sub フィールド値にできます。 |
省略可 | data-login_hint="elisa.beckett@gmail.com" |
data-hd
ユーザーが複数のアカウントを持っていて、Workspace アカウントでのみログインする必要がある場合は、これを使用して Google にドメイン名のヒントを提供します。成功すると、アカウント選択時に表示されるユーザー アカウントは、指定されたドメインに限定されます。ワイルドカード値: *
は、ユーザーに Workspace アカウントのみを提供し、アカウント選択時にコンシューマ アカウント(user@gmail.com)を除外します。
詳細については、
hd
の OpenID Connect ドキュメントをご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列。完全修飾ドメイン名または *。 | 省略可 | data-hd="*" |
data-use_fedcm_for_prompt
ブラウザがユーザーのログイン プロンプトを制御し、ウェブサイトと Google の間でログインフローを仲介できるようにします。デフォルトは false です。詳細については、FedCM への移行のページをご覧ください。
タイプ | 必須 | 例 |
---|---|---|
ブール値 | 省略可 | data-use_fedcm_for_prompt="true" |
data-enable_redirect_uri_validation
リダイレクト URI の検証ルールに準拠したボタンのリダイレクト フローを有効にします。
タイプ | 必須 | 例 |
---|---|---|
ブール値 | 省略可 | data-enable_redirect_uri_validation="true" |
クラスが「g_id_signin」の要素
要素の class
属性に g_id_signin
を追加すると、要素は [Google でログイン] ボタンとしてレンダリングされます。
同じページに複数の [Google でログイン] ボタンをレンダリングできます。各ボタンに独自のビジュアル設定を設定できます。設定は、次のデータ属性によって定義されます。
ビジュアル データの属性
次の表に、画像データ属性とその説明を示します。
属性 | |
---|---|
data-type |
ボタンの種類: アイコン、標準ボタン。 |
data-theme |
ボタンのテーマ。たとえば、filled_blue や filled_black などです。 |
data-size |
ボタンのサイズ。たとえば、小または大などです。 |
data-text |
ボタンのテキスト。(「Google でログイン」や「Google で登録」など)。 |
data-shape |
ボタンの形状。(長方形や円形など)。 |
data-logo_alignment |
Google ロゴの配置: 左または中央。 |
data-width |
ボタンの幅(ピクセル単位)。 |
data-locale |
ボタンのテキストは、この属性で設定された言語でレンダリングされます。 |
data-click_listener |
設定されている場合、この関数は [Google でログイン] ボタンがクリックされたときに呼び出されます。 |
data-state |
設定されている場合、この文字列は ID トークンと共に返されます。 |
属性タイプ
以降のセクションでは、各属性のタイプと例について詳しく説明します。
data-type
ボタンのタイプ。デフォルト値は standard
です。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | はい | data-type="icon" |
次の表に、使用可能なボタンの種類とその説明をすべて示します。
タイプ | |
---|---|
standard |
|
icon |
data-theme
ボタンのテーマ。デフォルト値は outline
です。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-theme="filled_blue" |
次の表に、使用可能なテーマとその説明を示します。
テーマ | |
---|---|
outline |
|
filled_blue |
|
filled_black |
データサイズ
ボタンのサイズ。デフォルト値は large
です。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-size="small" |
次の表に、使用可能なボタンサイズとその説明を示します。
サイズ | |
---|---|
large |
|
medium |
|
small |
data-text
ボタンのテキスト。デフォルト値は signin_with
です。data-text
属性が異なるアイコンボタンのテキストに視覚的な違いはありません。唯一の例外は、画面のユーザー補助のためにテキストが読み上げられる場合です。
詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-text="signup_with" |
次の表に、使用可能なボタンテキストとその説明を示します。
テキスト | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
data-shape
ボタンの形状。デフォルト値は rectangular
です。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-shape="rectangular" |
次の表に、使用可能なボタンの形状とその説明を示します。
図形 | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
data-logo_alignment
Google ロゴの配置。デフォルト値は left
です。この属性は、standard
ボタンタイプにのみ適用されます。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-logo_alignment="center" |
次の表に、使用可能なアライメントとその説明を示します。
logo_alignment | |
---|---|
left |
|
center |
data-width
ボタンの最小幅(ピクセル単位)。使用できる最大幅は 400 ピクセルです。
詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-width=400 |
data-locale
省略可。指定した言語 / 地域を使用してボタンのテキストを表示します。指定しない場合、ユーザーの Google アカウントまたはブラウザの設定がデフォルトで使用されます。ライブラリを読み込むときに、hl
パラメータと言語コードを src ディレクティブに追加します(例: gsi/client?hl=<iso-639-code>
)。
設定されていない場合は、ブラウザのデフォルトのロケールまたは Google セッション ユーザーの設定が使用されます。そのため、ユーザーによって表示されるローカライズされたボタンのバージョンが異なる場合があり、サイズが異なる場合もあります。
詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-locale="zh_CN" |
data-click_listener
data-click_listener
属性を使用して、[Google でログイン] ボタンがクリックされたときに呼び出される JavaScript 関数を定義できます。
<script> function onClickHandler(){ console.log("Sign in with Google button clicked...") } </script> ..... <div class="g_id_signin" data-size="large" data-theme="outline" data-click_listener="onClickHandler"> </div>
この例では、[Google でログイン] ボタンがクリックされると、[Sign in with Google button clicked...] というメッセージがコンソールに記録されます。
data-state
省略可。同じページに複数の [Google でログイン] ボタンをレンダリングできるため、各ボタンに固有の文字列を割り当てることができます。ID トークンとともに同じ文字列が返されるため、ユーザーがクリックしてログインしたボタンを特定できます。
詳しくは、以下の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 省略可 | data-state="button 1" |
サーバーサイドの統合
サーバーサイド エンドポイントは、次の HTTP POST
リクエストを処理する必要があります。
ID トークン ハンドラ エンドポイント
ID トークン ハンドラ エンドポイントは、ID トークンを処理します。対応するアカウントのステータスに基づいて、ユーザーをログインさせ、登録ページに誘導するか、アカウントのリンクページに誘導して詳細情報を確認します。
HTTP POST
リクエストには、次の情報が含まれます。
形式 | 名前 | 説明 |
---|---|---|
Cookie | g_csrf_token |
ハンドラ エンドポイントへのリクエストごとに変更されるランダムな文字列。 |
リクエスト パラメータ | g_csrf_token |
前の Cookie 値 g_csrf_token と同じ文字列。 |
リクエスト パラメータ | credential |
Google が発行する ID トークン。 |
リクエスト パラメータ | select_by |
認証情報の選択方法。 |
リクエスト パラメータ | state |
このパラメータは、ユーザーが [Google でログイン] ボタンをクリックしてログインし、ボタンの state 属性が指定されている場合にのみ定義されます。 |
証明書
デコードされた ID トークンは次の例のようになります。
header { "alg": "RS256", "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature "typ": "JWT" } payload { "iss": "https://accounts.google.com", // The JWT's issuer "nbf": 161803398874, "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID "sub": "3141592653589793238", // The unique ID of the user's Google Account "hd": "gmail.com", // If present, the host domain of the user's GSuite email address "email": "elisa.g.beckett@gmail.com", // The user's email address "email_verified": true, // true, if Google has verified the email address "azp": "314159265-pi.apps.googleusercontent.com", "name": "Elisa Beckett", // If present, a URL to user's profile picture "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler", "given_name": "Eliza", "family_name": "Beckett", "iat": 1596474000, // Unix timestamp of the assertion's creation time "exp": 1596477600, // Unix timestamp of the assertion's expiration time "jti": "abc161803398874def" }
sub
フィールドは、Google アカウントのグローバルに一意の識別子です。sub
フィールドは、すべての Google アカウントに固有で、決して再利用されないため、ユーザーの ID としてのみ使用してください。Google アカウントには異なる時点で複数のメールアドレスを設定できるため、メールアドレスを ID として使用しないでください。
email
、email_verified
、hd
フィールドを使用して、Google がメールアドレスをホストし、そのメールアドレスに対して信頼できるかどうかを判断できます。Google が正式な権限を持つ場合は、お客様が正当なアカウント所有者であることが確認されます。
Google が正式な情報源となるケース:
email
に@gmail.com
という接尾辞が付いている場合は、Gmail アカウントです。email_verified
が true でhd
が設定されている場合、これは Google Workspace アカウントです。
ユーザーは Gmail や Google Workspace を使用せずに Google アカウントを登録できます。email
に @gmail.com
接尾辞が含まれておらず、hd
がない場合、Google は信頼できる情報源ではないため、ユーザーの確認にはパスワードなどのチャレンジ メソッドを使用することをおすすめします。email_verified
は、Google アカウントの作成時に Google がユーザーを最初に確認したため true になることもありますが、サードパーティのメール アカウントの所有権がそれ以降変更されている可能性があります。
exp
フィールドには、サーバーサイドでトークンを検証するための有効期限が表示されます。Google でログインから取得した ID トークンは 1 時間です。有効期限が切れる前にトークンを確認する必要があります。セッション管理に exp
を使用しないでください。ID トークンの有効期限が切れた場合、ユーザーがログアウトされたわけではありません。ユーザーのセッション管理はアプリの責任です。
select_by
次の表に、select_by
フィールドで使用できる値を示します。値の設定には、セッションと同意ステータスとともに使用されるボタンのタイプが使用されます。
ユーザーが [ワンタップ] ボタンまたは [Google でログイン] ボタンを押すか、タッチレスの自動ログイン プロセスを使用した。
既存のセッションが見つかったか、ユーザーが Google アカウントを選択してログインし、新しいセッションを確立した。
ユーザーは、アプリと ID トークンの認証情報を共有する前に、次のいずれかを行います。
- [確認] ボタンを押して認証情報の共有に同意した
- 以前に同意を許可し、[アカウントを選択] を使用して Google アカウントを選択している。
このフィールドの値は、次のいずれかのタイプに設定します。
値 | 説明 |
---|---|
auto |
認証情報の共有に同意したことがある既存のセッションを持つユーザーの自動ログイン。FedCM でサポートされていないブラウザにのみ適用されます。 |
user |
以前に同意を許可した既存のセッションを持つユーザーが、ワンタップ [このまま続行] ボタンを押して認証情報を共有しました。FedCM でサポートされていないブラウザにのみ適用されます。 |
fedcm |
ユーザーがワンタップの [このユーザーとして続行] ボタンを押して、FedCM を使用して認証情報を共有しました。FedCM でサポートされているブラウザにのみ適用されます。 |
fedcm_auto |
FedCM One Tap を使用して認証情報の共有に同意したことがある既存のセッションを持つユーザーの自動ログイン。FedCM でサポートされているブラウザにのみ適用されます。 |
user_1tap |
既存のセッションがあるユーザーがワンタップ [このまま続行] ボタンを押して同意し、認証情報を共有しました。Chrome v75 以降にのみ適用されます。 |
user_2tap |
既存のセッションがないユーザーがワンタップ [このユーザーとして続行] ボタンを押してアカウントを選択し、ポップアップ ウィンドウで [確認] ボタンを押して同意し、認証情報を共有しました。Chromium 以外のブラウザが対象です。 |
btn |
以前に同意を行った既存のセッションを持つユーザーが、[Google でログイン] ボタンを押して [アカウントを選択] から Google アカウントを選択し、認証情報を共有しました。 |
btn_confirm |
既存のセッションを持つユーザーが [Google でログイン] ボタンを押して [確認] ボタンを押して、同意して認証情報を共有しました。 |
btn_add_session |
以前に同意を行ったことがあるが、既存のセッションのないユーザーが、[Google でログイン] ボタンを押して Google アカウントを選択し、認証情報を共有しました。 |
btn_confirm_add_session |
既存のセッションがないユーザーが、まず [Google でログイン] ボタンを押して Google アカウントを選択し、次に [確認] ボタンを押して同意し、認証情報を共有しました。 |
state
このパラメータは、ユーザーが [Google でログイン] ボタンをクリックしてログインし、クリックしたボタンの data-state
属性が指定されている場合にのみ定義されます。このフィールドの値は、ボタンの data-state
属性で指定した値と同じです。
同じページに複数の [Google でログイン] ボタンをレンダリングできるため、各ボタンに固有の文字列を割り当てることができます。したがって、この state
パラメータを使用して、ユーザーがログインするためにクリックしたボタンを特定できます。
パスワード認証情報ハンドラのエンドポイント
パスワード認証情報ハンドラ エンドポイントは、ネイティブ認証情報マネージャーが取得したパスワード認証情報を処理します。
HTTP POST
リクエストには、次の情報が含まれます。
形式 | 名前 | 説明 |
---|---|---|
Cookie | g_csrf_token |
ハンドラ エンドポイントへのリクエストごとに変更されるランダムな文字列。 |
リクエスト パラメータ | g_csrf_token |
前の Cookie 値 g_csrf_token と同じ文字列。 |
リクエスト パラメータ | email |
Google が発行するこの ID トークン。 |
リクエスト パラメータ | password |
認証情報の選択方法。 |