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

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

このリファレンスページでは、Sign-In JavaScript API について説明します。この API を使用すると、ウェブページにワンタッププロンプトまたは [Google でログイン] ボタンを表示できます。

メソッド: google.accounts.id.initialize

google.accounts.id.initialize メソッドは、構成オブジェクトに基づいて Google でログインクライアントを初期化します。メソッドの次のコード例をご覧ください。

google.accounts.id.initialize(IdConfiguration)

次のコード例は、onload 関数を使用して google.accounts.id.initialize メソッドを実装しています。

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

google.accounts.id.initialize メソッドは、同じウェブページのすべてのモジュールで暗黙的に使用できる Google でログインクライアントインスタンスを作成します。

同じウェブページで複数のモジュール（ワンタップ、パーソナライズされたボタン、取り消しなど）を使用する場合でも、google.accounts.id.initialize メソッドを呼び出すのは 1 回のみです。
google.accounts.id.initialize メソッドを複数回呼び出した場合、最後の呼び出しの構成のみが記憶され、使用されます。

google.accounts.id.initialize メソッドを呼び出すたびに構成がリセットされ、同じウェブページの以降のすべてのメソッドで新しい構成がすぐに使用されます。

データ型: IdConfiguration

次の表に、IdConfiguration データ型のフィールドと説明を示します。

フィールド
`client_id`	アプリケーションのクライアント ID
`color_scheme`	ワンタッププロンプトに適用される配色。
`auto_select`	自動選択を有効にします。
`callback`	ID トークンを処理する JavaScript 関数。Google One Tap と [Google でログイン] ボタンの `popup` UX モードでは、この属性が使用されます。
`login_uri`	ログインエンドポイントの URL。[Google でログイン] ボタンの `redirect` UX モードでは、この属性が使用されます。
`native_callback`	パスワード認証情報を処理する JavaScript 関数。
`cancel_on_tap_outside`	ユーザーがプロンプトの外側をクリックした場合、プロンプトをキャンセルします。
`prompt_parent_id`	ワンタッププロンプトコンテナ要素の DOM ID
`nonce`	ID トークンのランダムな文字列
`context`	ワンタッププロンプトのタイトルと単語
`state_cookie_domain`	親ドメインとそのサブドメインでワンタップを呼び出す必要がある場合は、このフィールドに親ドメインを渡して、単一の共有 Cookie が使用されるようにします。
`ux_mode`	[Google でログイン] ボタンの UX フロー
`allowed_parent_origin`	中間 iframe の埋め込みを許可されているオリジン。このフィールドが存在する場合、One Tap は中間 iframe モードで実行されます。
`intermediate_iframe_close_callback`	ユーザーが手動で One Tap を閉じたときに、デフォルトの中間 iframe の動作をオーバーライドします。
`itp_support`	ITP ブラウザでアップグレードされたワンタップ UX を有効にします。
`login_hint`	ユーザーヒントを指定して、アカウント選択をスキップします。
`hd`	ドメインでアカウントの選択を制限します。
`use_fedcm_for_prompt`	ブラウザがユーザーのログインプロンプトを制御し、ウェブサイトと Google の間のログインフローを仲介できるようにします。
`use_fedcm_for_button`	このフィールドは、Chrome（デスクトップ M125 以降、Android M128 以降）で FedCM ボタンの UX を使用するかどうかを決定します。デフォルトは `false` です。
`button_auto_select`	FedCM ボタンフローの自動選択オプションを有効にするかどうか。有効にすると、アクティブな Google セッションがあるリピーターは自動的にログインし、アカウント選択ツールのプロンプトが表示されなくなります。デフォルト値は `false` です。

client_id

このフィールドは、Google Cloud コンソールで確認して作成するアプリケーションのクライアント ID です。詳しくは、以下の表をご覧ください。

タイプ	必須	例
文字列	○	`client_id: "CLIENT_ID.apps.googleusercontent.com"`

color_scheme

このフィールドは、ワンタッププロンプトに適用される配色です。詳しくは、次の表をご覧ください。

タイプ	必須	例
文字列	省略可。デフォルトでは、ユーザーのシステムのデフォルトのカラーパターンが使用されます。	`color_scheme: "dark"`

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

カラーパターン
`default`	ユーザーのシステムでデフォルトのカラーパターンを適用します。ユーザーの設定に応じて、ライトまたはダークのいずれかのパターンが適用されます。
`light`	ライトカラーパターンを適用します。
`dark`	暗いカラーパターンを適用します。

auto_select

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

タイプ	必須	例
ブール値	省略可	`auto_select: true`

callback

このフィールドは、ワンタッププロンプトまたはポップアップウィンドウから返された ID トークンを処理する JavaScript 関数です。Google One Tap または [Google でログイン] ボタンの popup UX モードを使用する場合は、この属性が必要です。詳しくは、次の表をご覧ください。

タイプ	必須	例
関数	ワンタップと `popup` UX モードで必須	`callback: handleResponse`

login_uri

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

この値は、Google Cloud コンソールで構成した OAuth 2.0 クライアントの承認済みリダイレクト URI のいずれかと完全に一致し、リダイレクト URI の検証ルールに準拠している必要があります。

現在のページがログインページの場合、この属性は省略できます。その場合、認証情報はデフォルトでこのページに投稿されます。

ユーザーが [Google でログイン] ボタンをクリックし、リダイレクト UX モードが使用されている場合、ID トークン認証情報のレスポンスはログインエンドポイントに投稿されます。

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

タイプ	省略可	例
URL	デフォルトでは、現在のページの URI または指定した値になります。 `ux_mode: "redirect"` が設定されている場合にのみ使用されます。	`login_uri: "https://www.example.com/login"`

ログインエンドポイントは、本文に ID トークン値を含む credential パラメータを含む POST リクエストを処理する必要があります。

native_callback

このフィールドは、ブラウザの組み込みの認証情報マネージャーから返されたパスワード認証情報を処理する JavaScript 関数の名前です。詳しくは、次の表をご覧ください。

タイプ	必須	例
関数	省略可	`native_callback: handleResponse`

cancel_on_tap_outside

このフィールドは、ユーザーがプロンプトの外側をクリックした場合に、ワンタップリクエストをキャンセルするかどうかを設定します。デフォルト値は true です。値を false に設定すると、無効にできます。詳しくは、以下の表をご覧ください。

タイプ	必須	例
ブール値	省略可	`cancel_on_tap_outside: false`

prompt_parent_id

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

タイプ	必須	例
文字列	省略可	`prompt_parent_id: 'parent_id'`

nonce

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

タイプ	必須	例
文字列	省略可	`nonce: "biaqbm70g23"`

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

コンテキスト

このフィールドは、ワンタッププロンプトに表示されるタイトルとメッセージのテキストを変更します。ITP ブラウザでは効果がありません。デフォルトは signin です。

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

タイプ	必須	例
文字列	省略可	`context: "use"`

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

コンテキスト
`signin`	「ログイン」
`signup`	「登録して」
`use`	「使用」

state_cookie_domain

親ドメインとそのサブドメインでワンタップを表示する必要がある場合は、このフィールドに親ドメインを渡して、単一の共有状態 Cookie が使用されるようにします。詳しくは、以下の表をご覧ください。

タイプ	必須	例
文字列	省略可	`state_cookie_domain: "example.com"`

ux_mode

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

タイプ	必須	例
文字列	省略可	`ux_mode: "redirect"`

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

UX モード
`popup`	ポップアップウィンドウでログイン UX フローを実行します。
`redirect`	ページ全体のリダイレクトによってログイン UX フローを実行します。

allowed_parent_origin

中間 iframe の埋め込みを許可されているオリジン。このフィールドが存在する場合、ワンタップは中間 iframe モードで実行されます。詳しくは、次の表をご覧ください。

タイプ	必須	例
文字列または文字列配列	省略可	`allowed_parent_origin: "https://example.com"`

次の表に、サポートされている値の型とその説明を示します。

値の型
`string`	単一のドメイン URI。	`"https://example.com"`
`string array`	ドメイン URI の配列。	`["https://news.example.com", "https://local.example.com"]`

ワイルドカード接頭辞もサポートされています。たとえば、"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" は無効と見なされます。

allowed_parent_origin フィールドの値が無効な場合、中間 iframe モードのワンタップ初期化は失敗して停止します。

intermediate_iframe_close_callback

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

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

タイプ	必須	例
関数	省略可	`intermediate_iframe_close_callback: logBeforeClose`

itp_support

このフィールドは、Intelligent Tracking Prevention（ITP）をサポートするブラウザでアップグレードされたワンタップ UX を有効にするかどうかを決定します。デフォルト値は false です。詳しくは、次の表をご覧ください。

タイプ	必須	例
ブール値	省略可	`itp_support: true`

login_hint

アプリがどのユーザーをログインさせるべきかを事前に把握している場合は、Google にログインヒントを提供できます。成功すると、アカウントの選択はスキップされます。指定できる値は、メールアドレスまたは ID トークンの sub フィールド値です。

詳細については、OpenID Connect のドキュメントの login_hint フィールドをご覧ください。

タイプ	必須	例
文字列。メールアドレスまたは ID トークンの `sub` フィールドの値。	省略可	`login_hint: 'elisa.beckett@gmail.com'`

HD

ユーザーが複数のアカウントを持っていて、Workspace アカウントでのみログインする必要がある場合は、これを使用して Google にドメイン名のヒントを提供します。成功すると、アカウント選択時に表示されるユーザーアカウントは、指定されたドメインに限定されます。ワイルドカード値: * は、アカウントの選択時に Workspace アカウントのみをユーザーに提供し、一般ユーザー向けアカウント（user@gmail.com）を除外します。

詳細については、OpenID Connect ドキュメントの hd フィールドをご覧ください。

タイプ	必須	例
文字列。完全修飾ドメイン名または *。	省略可	`hd: '*'`

use_fedcm_for_prompt

ブラウザがユーザーのログインプロンプトを制御し、ウェブサイトと Google の間のログインフローを仲介できるようにします。デフォルトは false です。詳細については、FedCM への移行ページをご覧ください。

タイプ	必須	例
ブール値	省略可	`use_fedcm_for_prompt: true`

use_fedcm_for_button

このフィールドは、Chrome（デスクトップ M125 以降、Android M128 以降）で FedCM ボタンの UX を使用するかどうかを決定します。デフォルトは false です。詳しくは、次の表をご覧ください。

タイプ	必須	例
ブール値	省略可	`use_fedcm_for_button: true`

button_auto_select

このフィールドは、FedCM ボタンフローで自動選択オプションを有効にするかどうかを決定します。有効にすると、アクティブな Google セッションがあるリピーターは自動的にログインし、アカウント選択ツールのプロンプトが表示されなくなります。デフォルトは false ですオプトインの開始時に、ボタンの自動ログインを明示的に有効にする必要があります。詳しくは、以下の表をご覧ください。

タイプ	必須	例
ブール値	省略可	`button_auto_select: true`

メソッド: google.accounts.id.prompt

google.accounts.id.prompt メソッドは、initialize() メソッドが呼び出された後に、ワンタッププロンプトまたはブラウザの組み込みの認証情報マネージャーを表示します。メソッドの次のコード例をご覧ください。

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

通常、prompt() メソッドはページの読み込み時に呼び出されます。Google 側のセッションステータスとユーザー設定により、ワンタッププロンプト UI が表示されないことがあります。さまざまなタイミングの UI ステータスに関する通知を受け取るには、UI ステータス通知を受け取る関数を渡します。

通知は次のタイミングで発生します。

表示のタイミング: prompt() メソッドの呼び出し後に発生します。通知には、UI が表示されるかどうかを示すブール値が含まれます。
スキップされたタイミング: ワンタッププロンプトが自動キャンセルまたは手動キャンセルで閉じられた場合、または Google が認証情報の発行に失敗した場合（選択されたセッションが Google からログアウトしている場合など）に発生します。

このような場合は、次の ID プロバイダ（存在する場合）に進むことをおすすめします。
Dismissed moment: Google が認証情報を正常に取得した場合、またはユーザーが認証情報取得フローを停止したい場合に発生します。たとえば、ユーザーがログインダイアログでユーザー名とパスワードの入力を開始したときに、google.accounts.id.cancel() メソッドを呼び出してワンタッププロンプトを閉じ、終了したタイミングをトリガーできます。

警告: 破棄されたモーメントでは、次の ID プロバイダを試さないでください。

次のコード例は、スキップされた瞬間を実装しています。

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

データ型: PromptMomentNotification

次の表に、PromptMomentNotification データ型のメソッドとその説明を示します。

メソッド
`isDisplayMoment()`	この通知はディスプレイモーメントに関するものですか？注: FedCM が有効になっている場合、この通知は発行されません。詳しくは、FedCM への移行ページをご覧ください。
`isDisplayed()`	この通知は表示のタイミングで、UI が表示されていますか？注: FedCM が有効になっている場合、この通知は発行されません。詳しくは、FedCM への移行ページをご覧ください。
`isNotDisplayed()`	この通知は表示のタイミングで、UI が表示されていないか？注: FedCM が有効になっている場合、この通知は発行されません。詳しくは、FedCM への移行ページをご覧ください。
`getNotDisplayedReason()`	UI が表示されない理由の詳細。使用できる値は次のとおりです。 `browser_not_supported` `invalid_client` `missing_client_id` `opt_out_or_no_session` `secure_http_required` `suppressed_by_user` `unregistered_origin` `unknown_reason` 注: FedCM が有効になっている場合、このメソッドはサポートされません。詳しくは、FedCM への移行ページをご覧ください。
`isSkippedMoment()`	この通知はスキップされた瞬間に関するものですか？
`getSkippedReason()`	スキップされた瞬間の詳細な理由。使用できる値は次のとおりです。 `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` 注: FedCM が有効になっている場合、このメソッドはサポートされません。詳しくは、FedCM への移行ページをご覧ください。
`isDismissedMoment()`	この通知は破棄された瞬間に関するものですか？
`getDismissedReason()`	解雇の詳しい理由。使用できる値は次のとおりです。 `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	モーメントタイプの文字列を返します。使用できる値は次のとおりです。 `display` `skipped` `dismissed`

データ型: CredentialResponse

callback 関数が呼び出されると、CredentialResponse オブジェクトがパラメータとして渡されます。次の表に、認証情報レスポンスオブジェクトに含まれるフィールドを示します。

フィールド
`credential`	Google が発行するエンコードされた JWT ID トークン。
`select_by`	ユーザーがログインに使用した方法。
`state`	このフィールドは、ユーザーが [Google でログイン] ボタンをクリックしてログインし、ボタンの `state` 属性が指定されている場合にのみ定義されます。

認証情報

このフィールドは、base64 でエンコードされた JSON Web Token（JWT）文字列としての ID トークンです。

デコードすると、JWT は次の例のようになります。

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": "Elisa",
  "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 アカウントで一意であり、再利用されることはないため、ユーザーの識別子としてのみ使用してください。

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 は権限を持たないため、パスワードなどのチャレンジメソッドを使用してユーザーを確認することをおすすめします。Google アカウントの作成時に Google がユーザーを最初に確認したため、email_verfied が true になることもありますが、サードパーティのメールアカウントの所有権がその後変更されている可能性があります。

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

select_by

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

ユーザーがワンタップまたは [Google でログイン] ボタンを押したか、タッチレスの自動ログインプロセスを使用した。
既存のセッションが見つかったか、ユーザーが Google アカウントを選択してログインし、新しいセッションを確立しました。
ID トークン認証情報をアプリと共有する前に、ユーザーは次のいずれかを行う必要があります。
- [確認] ボタンを押して、認証情報の共有に同意した。
- 以前に同意を付与し、[アカウントを選択] を使用して Google アカウントを選択した。

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

値	説明
`auto`	既存のセッションがあり、以前に認証情報の共有に同意したユーザーの自動ログイン。FedCM をサポートしていないブラウザにのみ適用されます。
`user`	既存のセッションがあり、以前に同意を付与したユーザーが、One Tap の [続行] ボタンを押して認証情報を共有しました。FedCM をサポートしていないブラウザにのみ適用されます。
`fedcm`	ユーザーがワンタップの [Continue as]（として続行）ボタンを押して、FedCM を使用して認証情報を共有しました。FedCM 対応ブラウザにのみ適用されます。
`fedcm_auto`	FedCM One Tap を使用して認証情報の共有に事前に同意している既存のセッションがあるユーザーの自動ログイン。FedCM 対応ブラウザにのみ適用されます。
`user_1tap`	既存のセッションがあるユーザーが、ワンタップの [Continue as]（続行）ボタンを押して同意し、認証情報を共有しました。Chrome v75 以降にのみ適用されます。
`user_2tap`	既存のセッションがないユーザーが、ワンタップの [Continue as]（～として続行）ボタンを押してアカウントを選択し、ポップアップウィンドウの [Confirm]（確認）ボタンを押して同意し、認証情報を共有しました。Chromium ベース以外のブラウザに適用されます。
`itp`	以前に同意したユーザーが ITP ブラウザでワンタップを行った場合。
`itp_confirm`	同意しなかったユーザーが ITP ブラウザでワンタップし、[続行] ボタンを押して同意し、認証情報を共有しました。
`btn`	以前に同意したユーザーが [Sign In With Google] ボタンを押し、[Choose an Account] から Google アカウントを選択して認証情報を共有しました。
`btn_confirm`	同意しなかったユーザーが [Google でログイン] ボタンを押し、[続行] ボタンを押して同意し、認証情報を共有しました。

state

このフィールドは、ユーザーが [Google でログイン] ボタンをクリックしてログインし、クリックされたボタンの state 属性が指定されている場合にのみ定義されます。このフィールドの値は、ボタンの state 属性で指定した値と同じです。

同じページに複数の「Google でログイン」ボタンを表示できるため、各ボタンに一意の文字列を割り当てることができます。したがって、この state フィールドを使用して、ユーザーがログインするためにクリックしたボタンを特定できます。

メソッド: google.accounts.id.renderButton

google.accounts.id.renderButton メソッドは、ウェブページに [Google でログイン] ボタンを表示します。

メソッドの次のコード例をご覧ください。

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

データ型: GsiButtonConfiguration

次の表に、GsiButtonConfiguration データ型のフィールドと説明を示します。

属性
`type`	ボタンのタイプ（アイコンボタンまたは標準ボタン）。
`theme`	ボタンのテーマ。たとえば、filled_blue や filled_black などです。
`size`	ボタンのサイズ。たとえば、小または大。
`text`	ボタンのテキスト。たとえば、「Google でログイン」や「Google で登録」などです。
`shape`	ボタンの形状。（長方形や円形など）。
`logo_alignment`	Google ロゴの配置: 左または中央。
`width`	ボタンの幅（ピクセル単位）。
`locale`	設定されている場合、ボタンの言語がレンダリングされます。
`click_listener`	設定されている場合、この関数は [Google でログイン] ボタンがクリックされたときに呼び出されます。
`state`	設定されている場合、この文字列は ID トークンとともに返されます。

属性タイプ

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

type

ボタンのタイプ。デフォルト値は standard です。

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

タイプ	必須	例
文字列	○	`type: "icon"`

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

タイプ
`standard`	テキストまたはパーソナライズされた情報を含むボタン。
`icon`	テキストのないアイコンボタン。

テーマ

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

タイプ	必須	例
文字列	省略可	`theme: "filled_blue"`

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

テーマ
`outline`	標準のボタンテーマ。
`filled_blue`	青色の塗りつぶしボタンのテーマ。
`filled_black`	黒で塗りつぶされたボタンのテーマ。

サイズ

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

タイプ	必須	例
文字列	省略可	`size: "small"`

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

サイズ
`large`	大きなボタン。
`medium`	中サイズのボタン。
`small`	小さなボタン。

テキスト

ボタンのテキスト。デフォルト値は signin_with です。text 属性が異なるアイコンボタンのテキストに視覚的な違いはありません。ただし、画面のユーザー補助のためにテキストが読み上げられる場合は例外です。

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

タイプ	必須	例
文字列	省略可	`text: "signup_with"`

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

テキスト
`signin_with`	ボタンのテキストは「Google でログイン」です。
`signup_with`	ボタンのテキストは「Google で登録」です。
`continue_with`	ボタンのテキストは「Google で続ける」です。
`signin`	ボタンのテキストは「ログイン」です。

シェイプ

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

タイプ	必須	例
文字列	省略可	`shape: "rectangular"`

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

図形
`rectangular`	長方形のボタン。`icon` ボタンタイプに使用される場合は、`square` と同じです。
`pill`	ピル型のボタン。`icon` ボタンタイプに使用される場合は、`circle` と同じです。
`circle`	円形のボタン。`standard` ボタンタイプに使用される場合は、`pill` と同じです。
`square`	正方形のボタン。`standard` ボタンタイプに使用される場合は、`rectangular` と同じです。

logo_alignment

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

タイプ	必須	例
文字列	省略可	`logo_alignment: "center"`

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

logo_alignment
`left`	Google ロゴを左揃えにします。
`center`	Google ロゴを中央揃えにします。

幅

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

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

タイプ	必須	例
文字列	省略可	`width: "400"`

locale

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

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

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

タイプ	必須	例
文字列	省略可	`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 でログイン] ボタンがクリックされると、メッセージ「Sign in with Google button clicked...」がコンソールに記録されます。

state

省略可。同じページに複数の [Google でログイン] ボタンを表示できるため、各ボタンに一意の文字列を割り当てることができます。同じ文字列が ID トークンとともに返されるため、ユーザーがログインするためにクリックしたボタンを識別できます。

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

タイプ	必須	例
文字列	省略可	`data-state: "button 1"`

データ型: Credential

native_callback 関数が呼び出されると、Credential オブジェクトがパラメータとして渡されます。次の表に、オブジェクトに含まれるフィールドを示します。

フィールド
`id`	ユーザーを識別します。
`password`	パスワード

メソッド: google.accounts.id.disableAutoSelect

ユーザーがウェブサイトからログアウトしたときに、google.accounts.id.disableAutoSelect メソッドを呼び出して Cookie にステータスを記録する必要があります。これにより、UX のデッドループを防ぐことができます。メソッドの次のコードスニペットをご覧ください。

google.accounts.id.disableAutoSelect()

次のコード例は、onSignout() 関数を使用して google.accounts.id.disableAutoSelect メソッドを実装しています。

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

メソッド: google.accounts.id.storeCredential

このメソッドは、ブラウザの組み込みの認証情報マネージャー API の store() メソッドのラッパーです。そのため、パスワード認証情報の保存にのみ使用できます。メソッドの次のコード例をご覧ください。

google.accounts.id.storeCredential(Credential, callback)

次のコード例は、onSignIn() 関数を使用して google.accounts.id.storeCredential メソッドを実装しています。

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

メソッド: google.accounts.id.cancel

ID プロバイダの DOM からプロンプトを削除すると、ワンタップフローをキャンセルできます。認証情報がすでに選択されている場合、キャンセルオペレーションは無視されます。メソッドの次のコード例をご覧ください。

google.accounts.id.cancel()

次のコード例は、onNextButtonClicked() 関数を使用して google.accounts.id.cancel() メソッドを実装しています。

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

ライブラリ読み込みコールバック: onGoogleLibraryLoad

onGoogleLibraryLoad コールバックを登録できます。この関数は、Google でログイン JavaScript ライブラリが読み込まれた後に呼び出されます。

window.onGoogleLibraryLoad = () => {
    ...
};

このコールバックは、window.onload コールバックのショートカットです。動作に違いはありません。

次のコード例は、onGoogleLibraryLoad コールバックを実装しています。

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

メソッド: google.accounts.id.revoke

google.accounts.id.revoke メソッドは、指定されたユーザーの ID トークンの共有に使用された OAuth 認証情報を無効にします。メソッドの次のコードスニペットをご覧ください。 javascript google.accounts.id.revoke(login_hint, callback)

パラメータ	型	説明
`login_hint`	文字列	ユーザーの Google アカウントのメールアドレスまたは一意の ID。ID は、認証情報ペイロードの `sub` プロパティです。
`callback`	関数	省略可能な RevocationResponse ハンドラ。

次のコードサンプルは、ID を使用して revoke メソッドを使用する方法を示しています。

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

データ型: RevocationResponse

callback 関数が呼び出されると、RevocationResponse オブジェクトがパラメータとして渡されます。次の表に、取り消しレスポンスオブジェクトに含まれるフィールドを示します。

フィールド
`successful`	このフィールドは、メソッド呼び出しの戻り値です。
`error`	このフィールドには、詳細なエラーレスポンスメッセージが含まれる場合があります。

成功

このフィールドは、取り消しメソッドの呼び出しが成功した場合は true、失敗した場合は false に設定されるブール値です。

エラー

このフィールドは文字列値です。取り消しメソッドの呼び出しが失敗した場合は詳細なエラーメッセージが含まれ、成功した場合は未定義になります。

「Google でログイン」JavaScript API リファレンス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

メソッド: google.accounts.id.initialize

データ型: IdConfiguration

client_id

color_scheme

auto_select

callback

login_uri

native_callback

cancel_on_tap_outside

prompt_parent_id

nonce

コンテキスト

state_cookie_domain

ux_mode

allowed_parent_origin

intermediate_iframe_close_callback

itp_support

login_hint

HD

use_fedcm_for_prompt

use_fedcm_for_button

button_auto_select

メソッド: google.accounts.id.prompt

データ型: PromptMomentNotification

データ型: CredentialResponse

認証情報

select_by

state

メソッド: google.accounts.id.renderButton

データ型: GsiButtonConfiguration

属性タイプ

type

テーマ

サイズ

テキスト

シェイプ

logo_alignment

幅

locale

click_listener

state

データ型: Credential

メソッド: google.accounts.id.disableAutoSelect

メソッド: google.accounts.id.storeCredential

メソッド: google.accounts.id.cancel

ライブラリ読み込みコールバック: onGoogleLibraryLoad

メソッド: google.accounts.id.revoke

データ型: RevocationResponse

成功

エラー

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