警告:このデータは、 Googleユーザーデータポリシーに基づいて提供されています。ポリシーを確認して遵守してください。そうしないと、プロジェクトまたはアカウントが停止される可能性があります。

Google HTMLAPIリファレンスでサインイン

このリファレンスページでは、Sign In With GoogleHTMLデータ属性APIについて説明します。 APIを使用して、Webページにワンタッププロンプトまたは[Googleでサインイン]ボタンを表示できます。

IDが「g_id_onload」の要素

あなたのような任意の表示または非表示要素のある、Googleのデータ属性、サインインを置くことができる<div><span> 。唯一の要件は、要素のIDに設定されていることであるg_id_onload 。このIDを複数の要素に配置しないでください。

データ属性

次の表に、データ属性とその説明を示します。

属性
data-client_idアプリケーションのクライアントID
data-auto_prompt GoogleOneタップを表示します。
data-auto_select Google OneTapでの自動選択を有効にします。
data-login_uriログインエンドポイントのURL
data-callback JavaScriptIDトークンハンドラー関数名
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ワンタッププロンプトコンテナ要素のDOMID
data-skip_prompt_cookie指定されたCookieの値が空でない場合、ワンタップをスキップします。
data-nonce IDトークンのランダムな文字列
data-contextワンタッププロンプトのタイトルと単語
data-moment_callbackプロンプトUIステータス通知リスナーの関数名
data-state_cookie_domain親ドメインとそのサブドメインでワンタップを呼び出す必要がある場合は、親ドメインをこの属性に渡して、単一の共有Cookieが使用されるようにします。
data-ux_modeサインインとGoogleボタンのUXフロー
data-allowed_parent_origin中間iframeの埋め込みが許可されているオリジン。この属性が存在する場合、ワンタップは中間iframeモードで実行されます。
data-intermediate_iframe_close_callbackユーザーが手動でワンタップを閉じると、デフォルトの中間iframe動作が上書きされます。

属性タイプ

次のセクションには、各属性のタイプと例の詳細が含まれています。

data-client_id

この属性はアプリのクライアントIDであり、Google DevelopersConsoleで検出および作成されます。詳細については、次の表を参照してください。

タイプ必須
ストリングはいdata-client_id="CLIENT_ID.apps.googleusercontent.com"

データ-auto_prompt

この属性は、ワンタップを表示するかどうかを決定します。デフォルト値はtrue 。この値があると、Googleワンタップでは表示されませんfalse 。詳細については、次の表を参照してください。

タイプ必須
ブール値オプションdata-auto_prompt="true"

data-auto_select

この属性は、1つのGoogleセッションのみがアプリを承認した場合に、ユーザーの操作なしでIDトークンを自動的に返すかどうかを決定します。デフォルト値はfalse 。詳細については、次の表を参照してください。

タイプ必須
ブール値オプションdata-auto_select="true"

data-login_uri

この属性は、ログインエンドポイントのURIです。現在のページがログインページである場合は省略できます。その場合、資格情報はデフォルトでこのページに投稿されます。

IDトークンのクレデンシャル応答は、コールバック関数が定義されておらず、ユーザーが[Googleでサインイン]または[ワンタップ]ボタンをクリックするか、自動サインが行われると、ログインエンドポイントに送信されます。

詳細については、次の表を参照してください。

タイプオプション
URLデフォルトは、現在のページのURI、または指定した値です。
無視されたときにdata-ux_mode="popup"data-callback設定されています。
data-login_uri="https://www.example.com/login"

ログインエンドポイントは含むPOSTリクエスト処理しなければならないcredential体内のIDトークン値を持つキーを。

以下は、ログインエンドポイントへのリクエストの例です。

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属性が付き、Googleのボタンサインインのために必要とされるredirect無視UXモード、 data-callback属性を。

  • これら二つの属性の1つはGoogleのひとつをタップして、Googleのサインインボタンに設定する必要がありpopup UXモード。両方が設定されている場合は、 data-callback属性が優先順位が高いです。

名前空間内のJavaScript関数は、HTMLAPIではサポートされていません。代わりに、名前空間のないグローバルJavaScript関数を使用してください。例えば、使用mylibCallbackするのではなく、 mylib.callback

data-native_login_uri

この属性は、パスワードクレデンシャルハンドラエンドポイントのURLです。あなたはどちらかに設定した場合data-native_login_uri属性やdata-native_callback属性をGoogleのセッションがない場合、JavaScriptライブラリは、バックネイティブの資格証明マネージャに落ちます。あなたは両方を設定することが許可されていないdata-native_callbackdata-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_callbackdata-native_login_uri 。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-native_callback="handlePasswordCredential"

名前空間内のJavaScript関数は、HTMLAPIではサポートされていません。代わりに、名前空間のないグローバルJavaScript関数を使用してください。例えば、使用mylibCallbackするのではなく、 mylib.callback

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"

データ-cancel_on_tap_outside

この属性は、ユーザーがプロンプトの外側をクリックした場合にワンタップ要求をキャンセルするかどうかを設定します。デフォルト値はtrue 。それを無効にするには、に値を設定しfalse 。詳細については、次の表を参照してください。

タイプ必須
ブール値オプションdata-cancel_on_tap_outside="false"

データ-prompt_parent_id

この属性は、コンテナ要素のDOMIDを設定します。設定されていない場合は、ウィンドウの右上隅にワンタッププロンプトが表示されます。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-prompt_parent_id="parent_id"

指定されたCookieの値が空でない場合、この属性はワンタップをスキップします。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-skip_prompt_cookie="SID"

データ-ノンス

この属性は、リプレイ攻撃を防ぐためにIDトークンによって使用されるランダムな文字列です。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-nonce="biaqbm70g23"

ノンスの長さは、ご使用の環境でサポートされている最大JWTサイズ、および個々のブラウザーとサーバーのHTTPサイズの制約に制限されます。

データコンテキスト

この属性は、ワンタッププロンプトに表示されるタイトルとメッセージのテキストを変更します。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-context="use"

次の表に、使用可能なコンテキストとその説明を示します。

環境
signin 「Googleでログイン」
signup 「Googleにサインアップ」
use 「Googleで使用」

data-moment_callback

この属性は、プロンプトUIステータス通知リスナーの関数名です。詳細については、データ型を参照してくださいPromptMomentNotification 。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-moment_callback="logMomentNotification"

名前空間内のJavaScript関数は、HTMLAPIではサポートされていません。代わりに、名前空間のないグローバルJavaScript関数を使用してください。例えば、使用mylibCallbackするのではなく、 mylib.callback

親ドメインとそのサブドメインでワンタップを表示する必要がある場合は、親ドメインをこの属性に渡して、単一の共有状態の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_pa​​rent_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.comlogin.news.example.com )。ワイルドカードを使用する際の注意事項:

  • パターン文字列は、ワイルドカードとトップレベルドメインのみで構成することはできません。たとえば、 https://*.comhttps://*.co.uk無効です。上述したように、 "https://*.example.com"一致しますexample.comおよびそのサブドメインを。カンマ区切りのリストを使用して、2つの異なるドメインを表すこともできます。たとえば、 "https://example1.com,https://*.example2.com"ドメインと一致しますexample1.comexample2.comのとサブドメインexample2.com
  • ワイルドカードドメインは、安全なhttps://スキームで始まる必要があります。 "*.example.com"無効とみなされます。

data-intermediate_iframe_close_callback

ユーザーがワンタップUIの[X]ボタンをタップして手動でワンタップを閉じるときのデフォルトの中間iframe動作をオーバーライドします。デフォルトの動作では、中間iframeをDOMからすぐに削除します。

data-intermediate_iframe_close_callbackフィールドは、中間のiframeモードで有効になります。また、One Tap iframeではなく、中間iframeにのみ影響します。ワンタップUIは、コールバックが呼び出される前に削除されます。

タイプ必須
関数オプションdata-intermediate_iframe_close_callback='logBeforeClose'

名前空間内のJavaScript関数は、HTMLAPIではサポートされていません。代わりに、名前空間のないグローバルJavaScript関数を使用してください。例えば、使用mylibCallbackするのではなく、 mylib.callback

クラス「g_id_signin」の要素

あなたが追加した場合g_id_signin要素のにclass属性、要素が付き、Googleのサイン・インボタンとしてレンダリングされます。

同じページに複数のSignIn WithGoogleボタンをレンダリングできます。各ボタンは、独自の視覚設定を持つことができます。設定は、次のデータ属性によって定義されます。

ビジュアルデータ属性

次の表に、ビジュアルデータの属性とその説明を示します。

属性
data-typeボタンの種類:アイコン、または標準ボタン。
data-themeボタンのテーマ。たとえば、filled_blueまたはfilled_blackです。
data-sizeボタンのサイズ。たとえば、小さいまたは大きい。
data-textボタンのテキスト。たとえば、「Googleでログイン」や「Googleで登録」などです。
data-shapeボタンの形。たとえば、長方形または円形。
data-logo_alignment Googleロゴの配置:左または中央。
data-widthボタンの幅(ピクセル単位)。
data-localeボタンのテキストは、この属性で設定された言語で表示されます。

属性タイプ

次のセクションには、各属性のタイプと例に関する詳細が含まれています。

データ・タイプ

ボタンの種類。デフォルト値はstandard 。詳細については、次の表を参照してください。

タイプ必須
ストリングはいdata-type="icon"

次の表に、使用可能なボタンの種類とその説明を示します。

タイプ
standardテキストまたは個人情報を含むボタン:
iconテキストのないアイコンボタン:

データテーマ

ボタンのテーマ。デフォルト値はoutline 。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-theme="filled_blue"

次の表に、使用可能なテーマとその説明を示します。

テーマ
outline標準のボタンテーマ:
背景が白の標準ボタン白い背景のアイコンボタン白い背景のパーソナライズされたボタン
filled_blue青で塗りつぶされたボタンのテーマ:
背景が青色の標準ボタン青い背景のアイコンボタン青い背景のパーソナライズされたボタン
filled_black黒で塗りつぶされたボタンのテーマ:
背景が黒の標準ボタン黒の背景のアイコンボタン黒の背景を持つパーソナライズされたボタン

データサイズ

ボタンのサイズ。デフォルト値はlarge 。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-size="small"

次の表に、使用可能なボタンのサイズとその説明を示します。

サイズ
large大きなボタン:
大きな標準ボタン大きなアイコンボタン大きくてパーソナライズされたボタン
medium中型ボタン:
ミディアムスタンダードボタン中程度のアイコンボタン
small小さなボタン:
小さなボタン小さなアイコンボタン

データ-テキスト

ボタンのテキスト。デフォルト値はsignin_with 。異なる持っているアイコンボタンのテキストの視覚的な違いはありませんdata-text属性が。唯一の例外は、画面のアクセシビリティのためにテキストを読み取る場合です。

詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-text="signup_with"

次の表に、使用可能なボタンのテキストとその説明を示します。

文章
signin_withボタンのテキストは「Googleでログイン」です。
「Googleでログイン」というラベルの付いた標準ボタンテキストが表示されていないアイコンボタン
signup_withボタンのテキストは「Googleにサインアップ」です。
「Googleにサインアップ」というラベルの付いた標準ボタンテキストが表示されていないアイコンボタン
continue_withボタンのテキストは「ContinuewithGoogle」です。
「Googleで続行」というラベルの付いた標準ボタンテキストが表示されていないアイコンボタン
signup_withボタンのテキストは「サインイン」です。
「サインイン」というラベルの付いた標準ボタンテキストが表示されていないアイコンボタン

データ形状

ボタンの形。デフォルト値はrectangular 。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-shape="rectangular"

次の表に、使用可能なボタンの形状とその説明を示します。

rectangular長方形のボタン。以下のために使用された場合はiconボタンタイプ、それは同じだsquare
長方形の標準ボタン長方形のアイコンボタン長方形のパーソナライズされたボタン
pill丸薬の形をしたボタン。以下のために使用された場合はiconボタンタイプ、それは同じだcircle
錠剤型の標準ボタン錠剤の形をしたアイコンボタン丸薬の形をしたパーソナライズされたボタン
circle円形のボタン。以下のために使用した場合standardボタンタイプ、それは同じだpill
円形の標準ボタン円形のアイコンボタン円形のパーソナライズされたボタン
square四角いボタン。以下のために使用した場合standardボタンタイプ、それは同じだrectangular
四角い標準ボタン四角いアイコンボタン正方形のパーソナライズされたボタン

data-logo_alignment

Googleロゴの配置。デフォルト値はleft 。この属性は、に適用されるstandardボタンタイプ。詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-logo_alignment="center"

次の表に、使用可能な配置とその説明を示します。

logo_alignment
left Googleロゴを左揃えにします。
左側にGロゴが付いた標準ボタン
center Googleロゴを中央揃えにします。
中央にGロゴが入った標準ボタン

データ幅

ボタンの最小幅(ピクセル単位)。使用可能な最大幅は400ピクセルです。

詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-width=400

データロケール

ボタンテキストのプリセットロケール。設定されていない場合は、ブラウザのデフォルトロケールまたはGoogleセッションユーザーの設定が使用されます。したがって、ユーザーが異なれば、ローカライズされたボタンのバージョンも、サイズも異なる可能性があります。

詳細については、次の表を参照してください。

タイプ必須
ストリングオプションdata-locale="zh_CN"

サーバー側の統合

お使いのサーバ側のエンドポイントは、以下のHTTP処理しなければならないPOSTリクエストを。

IDトークンハンドラエンドポイント

IDトークンハンドラエンドポイントはIDトークンを処理します。対応するアカウントのステータスに基づいて、ユーザーをサインインし、サインアップページに誘導するか、アカウントリンクページに誘導して追加情報を入手できます。

HTTP POSTリクエストには、次の情報が含まれています。

フォーマット名前説明
クッキーg_csrf_tokenハンドラエンドポイントへのリクエストごとに変化するランダムな文字列。
リクエストパラメータg_csrf_token前回のクッキーの値と同じだ文字列、 g_csrf_token .
リクエストパラメータcredential Googleが発行するIDトークン。
リクエストパラメータselect_byクレデンシャルの選択方法。

デコードされ、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"
}

次の表に使用できる値select_byフィールド。セッションおよび同意状態とともに使用されるボタンのタイプは、値を設定するために使用されます。

  • ユーザーは、ワンタップまたはGoogleでサインインボタンを押すか、タッチレスの自動サインインプロセスを使用しました。

  • 既存のセッションが見つかったか、ユーザーがGoogleアカウントを選択してログインし、新しいセッションを確立しました。

  • IDトークンのクレデンシャルをアプリと共有する前に、ユーザーは次のいずれかを行います。

    • [確認]ボタンを押して、資格情報を共有することに同意するか、
    • 以前に同意を与え、Googleアカウントを選択するためにアカウントの選択を使用していました。

このフィールドの値は、次のいずれかのタイプに設定されます。

価値説明
auto以前に資格情報の共有に同意した既存のセッションを持つユーザーの自動サインイン。
user以前に同意を付与した既存のセッションを持つユーザーは、ワンタップの[続行]ボタンを押して資格情報を共有しました。
user_1tap既存のセッションを持つユーザーがワンタップの[続行]ボタンを押して、同意を付与し、資格情報を共有しました。 Chromev75以降にのみ適用されます。
user_2tap既存のセッションを持たないユーザーは、ワンタップの[続行]ボタンを押してアカウントを選択し、ポップアップウィンドウの[確認]ボタンを押して同意を付与し、資格情報を共有します。 Chromiumベース以外のブラウザに適用されます。
btn以前に同意を付与した既存のセッションを持つユーザーは、[Googleでサインイン]ボタンを押し、[アカウントの選択]からGoogleアカウントを選択して資格情報を共有しました。
btn_confirm既存のセッションを持つユーザーが[Googleでサインイン]ボタンを押し、[確認]ボタンを押して、同意を付与し、資格情報を共有しました。
btn_add_session以前に同意を付与した既存のセッションのないユーザーは、[Googleでサインイン]ボタンを押してGoogleアカウントを選択し、資格情報を共有しました。
btn_confirm_add_session既存のセッションを持たないユーザーは、最初に[Googleでサインイン]ボタンを押してGoogleアカウントを選択し、次に[確認]ボタンを押して同意し、資格情報を共有します。

パスワードクレデンシャルハンドラエンドポイント

パスワードクレデンシャルハンドラエンドポイントは、ネイティブクレデンシャルマネージャが取得するパスワードクレデンシャルを処理します。

HTTP POSTリクエストには、次の情報が含まれています。

フォーマット名前説明
クッキーg_csrf_tokenハンドラエンドポイントへのリクエストごとに変化するランダムな文字列。
リクエストパラメータg_csrf_token前回のクッキーの値と同じだ文字列、 g_csrf_token
リクエストパラメータemail Googleが発行するこのIDトークン。
リクエストパラメータpasswordクレデンシャルの選択方法。