「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

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

auto_select

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

callback

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

login_uri

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

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

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

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

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

ログイン エンドポイントは、本文に 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 関数の名前です。詳しくは、次の表をご覧ください。

cancel_on_tap_outside

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

prompt_parent_id

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

nonce

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

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

コンテキスト

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

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

state_cookie_domain

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

ux_mode

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

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

allowed_parent_origin

中間 iframe の埋め込みを許可するオリジン。このフィールドが存在する場合、ワンタップは中間 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" は無効と見なされます。

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

intermediate_iframe_close_callback

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

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

itp_support

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

login_hint

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

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

HD

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

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

use_fedcm_for_prompt

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

enable_redirect_uri_validation

リダイレクト URI の検証ルールに準拠したボタンのリダイレクト フローを有効にします。

メソッド: 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 データ型のメソッドと説明を示します。

データ型: CredentialResponse

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

証明書

このフィールドは、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 アカウントに固有で、決して再利用されないため、ユーザーの 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_verfied は、Google アカウントの作成時に Google がユーザーを最初に確認したため true になることもありますが、サードパーティのメール アカウントの所有権がそれ以降変更されている可能性があります。

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

select_by

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

• ユーザーが [ワンタップ] ボタンまたは [Google でログイン] ボタンを押しているか、非接触の自動ログイン プロセスを使用した場合。

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

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

  • [確認] ボタンを押して認証情報の共有に同意した
  • 以前に同意を許可し、[アカウントを選択] を使用して 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

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

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

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

タイプ
standard
icon

テーマ

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

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

テーマ
outline
filled_blue
filled_black

サイズ

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

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

サイズ
large
medium
small

テキスト

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

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

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

テキスト
signin_with
signup_with
continue_with
signin

シェイプ

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

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

図形
rectangular
pill
circle
square

logo_alignment

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

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

logo_alignment
left
center

幅

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

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

locale

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

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

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

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 トークンと共に返されるため、ユーザーがクリックしてログインしたボタンを特定できます。

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

データ型: Credential

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

メソッド: 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)

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

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

データ型: RevocationResponse

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

成功

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

エラー

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