「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
auto_select 自動選択を有効にします。
callback ID トークンを処理する JavaScript 関数。Google One タップと「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 の埋め込みを許可するオリジン。このフィールドが存在する場合、ワンタップは中間 iframe モードで実行されます。
intermediate_iframe_close_callback ユーザーが手動でワンタップを閉じたときに、デフォルトの中間 iframe の動作をオーバーライドします。
itp_support ITP ブラウザでワンタップ UX をアップグレードできます。
login_hint ユーザーヒントを提供してアカウントの選択をスキップします。
hd アカウントの選択をドメインごとに制限します。
use_fedcm_for_prompt ブラウザでユーザーのログイン メッセージを制御し、ウェブサイトと Google 間のログインフローを仲介できるようにします。

client_id

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

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

auto_select

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

タイプ 必須
boolean 任意 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 の検証ルールに準拠している必要があります。

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

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

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

タイプ 任意
URL デフォルトは、現在のページの URI または指定した値になります。
ux_mode: "redirect" が設定されている場合にのみ使用されます。
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

native_callback

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

タイプ 必須
機能 任意 native_callback: handleResponse

cancel_on_tap_outside

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

タイプ 必須
boolean 任意 cancel_on_tap_outside: false

prompt_parent_id

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

タイプ 必須
文字列 任意 prompt_parent_id: 'parent_id'

nonce

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

タイプ 必須
文字列 任意 nonce: "biaqbm70g23"

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

コンテキスト

このフィールドでは、ワンタップ プロンプトのタイトルとメッセージのテキストが変更されます。詳しくは、次の表をご覧ください。

タイプ 必須
文字列 任意 context: "use"

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

背景情報
signin 「Google でログイン」
signup 「Google で登録」
use 「Google で使用」

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

タイプ 必須
文字列 任意 state_cookie_domain: "example.com"

ux_mode

このフィールドを使用して、[Google でログイン] ボタンで使用される UX フローを設定します。デフォルト値は popup です。この属性は OneTap の 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.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" は無効と見なされます。

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

intermediate_iframe_close_callback

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

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

タイプ 必須
機能 任意 intermediate_iframe_close_callback: logBeforeClose

itp_support

このフィールドは、 アップグレードされたワンタップ UX をインテリジェント トラッキング防止機能(ITP)をサポートしているブラウザで有効にするかどうかを決定します。デフォルト値は false です。詳しくは、次の表をご覧ください。

タイプ 必須
boolean 任意 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 への移行ページをご覧ください。

タイプ 必須
boolean 任意 use_fedcm_for_prompt: 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 プロバイダに進むことをおすすめします。

  • 終了時: Google が認証情報を正常に取得した場合、またはユーザーが認証情報の取得フローの停止を求めた場合に発生します。たとえば、ユーザーがログイン ダイアログでユーザー名とパスワードの入力を開始したら、google.accounts.id.cancel() メソッドを呼び出してワンタップ プロンプトを閉じ、閉じた時間をトリガーできます。

次のコードサンプルは、スキップされた瞬間を実装します。

<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 このフィールドは、返される 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 アカウントの中で一意であり、再利用されないため、ユーザーの識別子としてのみ使用します。Google アカウントは異なる時点で複数のメールアドレスを持つ可能性があるため、メールアドレスを識別子として使用しないでください

emailemail_verifiedhd フィールドを使用すると、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 認証情報の共有に同意済みの既存のセッションでのユーザーの自動ログイン。
user 以前に同意した既存のセッションがあるユーザーが、ワンタップの [次の名前とメールアドレスで続行] ボタンを押して認証情報を共有。
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 でログイン] ボタンをクリックしてログインし、クリックされたボタンの 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 ボタンのテーマ。たとえば、fill_blue や filled_black です。
size ボタンのサイズ。たとえば、S サイズや L サイズなどです。
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 でログイン] ボタンがクリックされると、「Google でログイン」ボタンをクリックしましたというメッセージがコンソールに記録されます。

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

証明書利用者 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 は、credential ペイロードの sub プロパティです。
callback 機能 オプションの RevocationResponse ハンドラ。

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

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

データ型: RevocationResponse

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

項目
successful このフィールドはメソッド呼び出しの戻り値です。
error このフィールドには、必要に応じて詳細なエラー レスポンス メッセージが含まれます。

成功

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

error

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