「Google でログイン」Google API のリファレンス

このリファレンス ページでは、「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	親ドメインとそのサブドメインでワンタップを呼び出す必要がある場合は、親ドメインをこの属性に渡して、単一の共有 Cookie が使用されるようにします。
data-ux_mode	「Google でログイン」ボタンの UX フロー
data-allowed_parent_origin	中間 iframe の埋め込みを許可するオリジン。この属性が存在する場合、One Tap は中間 iframe モードで実行されます。
data-intermediate_iframe_close_callback	ユーザーが手動でワンタップを閉じるときの、デフォルトの中間 iframe の動作をオーバーライドします。
data-itp_support	ITP ブラウザでワンタップ UX のアップグレードを有効にします。

属性タイプ

以降のセクションでは、各属性のタイプと例について詳しく説明します。

データ クライアント ID

この属性は、Google Cloud コンソールで検索、作成されるアプリのクライアント ID です。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	表示	data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

この属性は、ワンタップを表示するかどうかを決定します。デフォルト値は true です。この値が false の場合、Google One のタップは表示されません。詳しくは、次の表をご覧ください。

タイプ	必須	例
ブール値	任意	data-auto_prompt="true"

データの自動選択

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

タイプ	必須	例
ブール値	任意	data-auto_select="true"

data-login_uri

この属性は、ログイン エンドポイントの URI です。

値は OAuth 2.0 クライアントの承認済みリダイレクト URI と正確に一致する必要があります。これは、API Console で構成し、リダイレクト 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 関数の名前です。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	data-login_uri が設定されていない場合は必須です。	data-callback="handleToken"

data-login_uri 属性と data-callback 属性のいずれかを使用できます。これは、次のコンポーネントと UX モードの構成によって異なります。

• data-login_uri 属性は、「Google でログイン」ボタン redirect UX モードでは必須ですが、data-callback 属性は無視されます。

• Google One Tap と 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 属性の両方を設定することはできません。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	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 を両方設定することはできません。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	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

この属性は、ユーザーがプロンプトの外でクリックしたときに One Tap リクエストをキャンセルするかどうかを設定します。デフォルト値は true です。無効にするには、値を false に設定します。詳しくは、次の表をご覧ください。

タイプ	必須	例
ブール値	任意	data-cancel_on_tap_outside="false"

data-prompt_parent_id

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

タイプ	必須	例
string	任意	data-prompt_parent_id="parent_id"

data-skip_prompt_cookie

指定された Cookie が空以外の場合、この属性はワンタップをスキップします。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-skip_prompt_cookie="SID"

データノンス

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

タイプ	必須	例
string	任意	data-nonce="biaqbm70g23"

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

データ コンテキスト

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

タイプ	必須	例
string	任意	data-context="use"

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

コンテキスト
signin	「Google でログイン」
signup	「Google で登録」
use	「Google で使用」

data-moment_callback

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

タイプ	必須	例
string	任意	data-moment_callback="logMomentNotification"

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

data-state_cookie_domain

親ドメインとそのサブドメインにワンタップを表示する必要がある場合は、親ドメインをこの属性に渡して、単一の共有状態の Cookie を使用します。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-state_cookie_domain="example.com"

data-ux_mode

この属性を使用して、[Google でログイン] ボタンで使用する UX フローを設定します。デフォルト値は popup です。この属性はワンタップ UX には影響しません。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-ux_mode="redirect"

次の表に、利用可能な UX モードとその説明を示します。

UX モード
popup	ポップアップ ウィンドウでログイン UX フローを実行します。
redirect	フルページ リダイレクトによりログイン UX フローを実施する

data-allowed_parent_origin

中間 iframe の埋め込みを許可するオリジン。この属性が存在する場合、One Tap は中間 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 モードでのみ有効になります。これは、One Tap 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"

クラス「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 でログイン] ボタンがクリックされたときに呼び出されます。

属性タイプ

以降のセクションでは、各属性のタイプと例について詳しく説明します。

データ型

ボタンのタイプ。デフォルト値は standard です。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	表示	data-type="icon"

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

タイプ
standard	テキストまたはカスタマイズされた情報を含むボタン:
icon	テキストのないアイコンボタン:

data-theme

ボタンのテーマ。デフォルト値は outline です。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-theme="filled_blue"

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

テーマ
outline	標準のボタンテーマ:
filled_blue	青いボタンのボタン:
filled_black	黒色のボタンのテーマ:

データサイズ

ボタンのサイズ。デフォルト値は large です。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-size="small"

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

サイズ
large	大きいボタン:
medium	中サイズのボタン:
small	小さいボタン:

データテキスト

ボタンのテキスト。デフォルト値は signin_with です。data-text 属性が異なるアイコンボタンのテキストの視覚的な違いはありません。唯一の例外は、画面のユーザー補助機能のためにテキストが読み取られることです。

詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-text="signup_with"

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

Text
signin_with	ボタンのテキストは「Sign in with Google」です。
signup_with	ボタンのテキストは「Sign up with Google」です。
continue_with	ボタンのテキストは「Continue with Google」です。
signin	ボタンのテキストは「Sign in」です。

データの形状

ボタンの形状。デフォルト値は rectangular です。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-shape="rectangular"

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

形状
rectangular	長方形のボタン。icon ボタンタイプに使用した場合、square と同じです。
pill	楕円形のボタン。icon ボタンタイプに使用した場合、circle と同じです。
circle	円形のボタン。standard ボタンタイプに使用した場合、pill と同じです。
square	正方形のボタン。standard ボタンタイプに使用した場合、rectangular と同じです。

data-logo_alignment

Google ロゴの配置。デフォルト値は left です。この属性は、standard ボタンタイプにのみ適用されます。詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-logo_alignment="center"

次の表に、利用可能なアライメントとその説明を示します。

ロゴの配置
left	Google ロゴを左揃えにします。
center	Google ロゴが中央揃えされます。

データの幅

ボタンの最小幅（ピクセル単位）。指定できる幅は最大 400 ピクセルです。

詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-width=400

データ ロケール

（省略可）指定されたロケールを使用してボタンテキストを表示します。それ以外の場合は、デフォルトでユーザーの Google アカウントまたはブラウザ設定を表示します。ライブラリを読み込むときに、src パラメータに hl パラメータと言語コードを追加します（例: gsi/client?hl=<iso-639-code>）。

設定されていない場合は、ブラウザのデフォルトの言語 / 地域、または Google セッション ユーザーの設定が使用されます。そのため、ローカライズされたボタンのバージョンが異なると、サイズも異なる可能性があります。

詳しくは、次の表をご覧ください。

タイプ	必須	例
string	任意	data-locale="zh_CN"

click_listener

click_listener 属性を使用すると、「Google でログイン」ボタンがクリックされたときに呼び出される JavaScript 関数を定義できます。

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

上記の例では、[Google でログイン] ボタンがクリックされると、[Google でログイン] ボタンがクリックされました... というメッセージがコンソールに記録されます。

サーバーサイドの統合

サーバー側のエンドポイントは、次の HTTP POST リクエストを処理する必要があります。

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

ID トークン ハンドラ エンドポイントは、ID トークンを処理します。対応するアカウントのステータスに基づいて、ユーザーをログインさせ、登録ページまたはアカウント リンクのページで詳細を確認してもらうことができます。

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

形式	Name	説明
cookie	g_csrf_token	ハンドラ エンドポイントへのリクエストごとに変化するランダムな文字列。
リクエスト パラメータ	g_csrf_token	前の Cookie の値（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": "[e-mail]", // 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 アカウント用のグローバルに一意の識別子が含まれます。

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_verfied は、Google アカウントの作成時に最初にユーザーの確認を行った際にも有効になりますが、サードパーティのメール アカウントの所有権は変更されている場合があります。

exp フィールドには、サーバー側のトークンを確認するための有効期限が表示されます。「Google でログイン」で取得した ID トークンの場合は 1 時間です。有効期限の前にトークンを確認する必要があります。セッション管理に exp を使用しないでください。ID が期限切れでも、ユーザーがログアウトしたとは限りません。アプリは、ユーザーのセッション管理を担当します。

#select_by

次の表に、select_by フィールドに指定できる値を示します。値の設定には、セッションの種類と同意ステータスとともに使用されるボタンのタイプが使用されます。

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

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

• ID トークンの認証情報をアプリと共有する前に、ユーザーは次のいずれかを行う

  • [確認] ボタンを押して、認証情報の共有に同意しました。
  • 以前に同意を得て [アカウントを選択] を使用して Google アカウントを選択したことがあるユーザー。

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

値	説明
auto	認証情報の共有に同意済みの既存のセッションを持つユーザーの自動ログイン。
user	以前に同意した既存のセッションがあるユーザーは、One Tap の [続行] ボタンを押して認証情報を共有できます。
user_1tap	既存のセッションを使用するユーザーは、ワンタップの [続行] ボタンを押して同意に同意し、認証情報を共有する必要があります。Chrome v75 以降にのみ適用されます。
user_2tap	既存のセッションのないユーザーは、One Tap をタップして [アカウント] を選択してから、ポップアップ ウィンドウの [確認] ボタンを押して同意を付与し、認証情報を共有する必要があります。Chromium 以外のブラウザに適用されます。
btn	以前に同意したユーザーが [Google でログイン] ボタンを押し、[アカウントを選択] から Google アカウントを選択して認証情報を共有する。
btn_confirm	既存のセッションを使用しているユーザーが [Google でログイン] ボタンを押し、[確認] ボタンを押して同意を付与し、認証情報を共有する。
btn_add_session	以前に同意したことのない既存のユーザーは、[Google でログイン] ボタンを押して Google アカウントを選択し、認証情報を共有していました。
btn_confirm_add_session	既存のセッションを持たないユーザーが最初に [Google でログイン] ボタンを押して Google アカウントを選択し、次に [確認] ボタンを押して同意して認証情報を共有する。

パスワード認証情報ハンドラのエンドポイント

パスワード認証情報ハンドラ エンドポイントは、ネイティブの認証情報マネージャーが取得したパスワード認証情報を処理します。

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

形式	Name	説明
cookie	g_csrf_token	ハンドラ エンドポイントへのリクエストごとに変化するランダムな文字列。
リクエスト パラメータ	g_csrf_token	前の Cookie の値 g_csrf_token と同じ文字列。
リクエスト パラメータ	email	Google が発行するこの ID トークン。
リクエスト パラメータ	password	認証情報の選択方法

注: email および password パラメータ名はデータ属性で変更できます。