警告: このデータは Google ユーザーデータに関するポリシーに基づいて提供されています。ポリシーを確認して遵守してください。実際の広告でテストすると、プロジェクトまたはアカウントが停止される場合があります。

「Sign In With Google JavaScript API」のリファレンス

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

メソッド: google.accounts.id.初期化

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>

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

client_id

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

種類 必須
文字列 client_id: "CLIENT_ID.apps.googleusercontent.com"

自動選択

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

種類 必須
boolean 任意 auto_select: true

callback

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

種類 必須
関数 ワンタップと popup UX モードでは必須 callback: handleResponse

login_uri

この属性は、ログイン エンドポイントの URI です。現在のページがログインページの場合、認証情報はデフォルトでこのページに送信されます。

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

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

種類 任意
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

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

種類 必須
boolean 任意 cancel_on_tap_outside: false

prompt_parent_id

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

種類 必須
文字列 任意 prompt_parent_id: 'parent_id'

ノンス

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

種類 必須
文字列 任意 nonce: "biaqbm70g23"

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

コンテキスト

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

種類 必須
文字列 任意 context: "use"

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

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

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

種類 必須
文字列 任意 state_cookie_domain: "example.com"

UX モード

このフィールドを使用して、[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 モードのワンタップ初期化は失敗し、停止します。

中間_iframe_close_callback

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

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

種類 必須
関数 任意 intermediate_iframe_close_callback: logBeforeClose

itp_support

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

種類 必須
boolean 任意 itp_support: 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 が認証情報を発行しなかった場合)に One Tap プロンプトが閉じられた場合に発生します。 Google からログアウトしています。

    そのような場合は、次の ID プロバイダがあれば続行することをおすすめします。

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

次のサンプルコードは、スキップされたモーメントを実装しています。

<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() この通知は表示時間に関するものですか?
isDisplayed() この通知は表示タイミングであり、UI が表示されていますか?
isNotDisplayed() この通知は表示時間であり、UI は表示されませんか?
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
isSkippedMoment() この通知はスキップされた瞬間ですか?
getSkippedReason()

スキップされたモーメントの詳細な理由。使用できる値は次のとおりです。

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
isDismissedMoment() この通知は終了しましたか?
getDismissedReason()

解除の詳細な理由。使用できる値は次のとおりです。

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

モーメントタイプの文字列を返します。使用できる値は次のとおりです。

  • display
  • skipped
  • dismissed

データ型: CredentialResponse

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

項目
credential このフィールドは、返された ID トークンです。
select_by このフィールドでは、認証情報の選択方法を設定します。

認証情報

このフィールドは、Base64 でエンコードされた JSON ウェブトークン(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 アカウントのグローバルに一意の識別子が含まれています。

emailemail_verifiedhd フィールドを使用して、Google がメールアドレスをホストしていて信頼できるかどうかを判断できます。Google が信頼できるものであれば、現在ユーザーが正当なアカウント所有者であることがわかっています。

Google が信頼できるケース:

  • email には @gmail.com というサフィックスが付いています。これは Gmail アカウントです。
  • email_verified は true で、hd が設定されています。これは G Suite アカウントです。

ユーザーは Gmail や G Suite を使用せずに Google アカウントに登録できます。email@gmail.com サフィックスが含まれておらず、hd が存在しない場合は、Google は権威を持たないため、ユーザーを確認するパスワードなどの本人確認方法を使用することをおすすめします。email_verfied は、Google アカウントの作成時に Google が最初にユーザーを認証したこともありますが、その後、サードパーティのメール アカウントの所有権が変更された可能性があるためです。

select_by

次の表に、select_by フィールドに指定できる値を示します。使用されるボタンの種類、セッションおよび同意状況は、値の設定に使用されます。

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

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

  • ID トークンの認証情報をアプリと共有する前に、ユーザーが

    • [確認] ボタンを押して、認証情報の共有に同意する
    • 以前に同意を得て、アカウントの選択を使用して Google アカウントを選択している。

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

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

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

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

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

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 設定すると、ボタンの言語が表示されます。

属性タイプ

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

タイプ

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

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

種類 必須
文字列 type: "icon"

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

種類
standard テキストやカスタマイズされた情報を表示するボタン:
icon テキストなしのアイコンボタン:

テーマ

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

種類 必須
文字列 任意 theme: "filled_blue"

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

テーマ
outline 標準的なボタンのテーマ:
filled_blue 青い塗りつぶしボタンのテーマ:
filled_black 黒い塗りつぶしボタンのテーマ:

サイズ

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

種類 必須
文字列 任意 size: "small"

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

サイズ
large 大きいボタン:
大きい標準のボタン 大きなアイコンボタン カスタマイズされた大きなボタン
medium 中くらいのサイズのボタン:
中程度の標準ボタン 中サイズのアイコンボタン
small 小さなボタン:
小さなボタン 小さなアイコンボタン

text

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

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

種類 必須
文字列 任意 text: "signup_with"

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

テキスト
signin_with ボタンテキストは「Google でログイン」です。
signup_with ボタンテキストは「Google で登録」です。
continue_with ボタンテキストは [Google で続行] です。
signin ボタンテキストが [Sign in] の場合:

シェイプ

ボタンの形状。デフォルト値は 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 ロゴを中央に揃えます。

width

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

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

種類 必須
文字列 任意 width: 400

locale

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

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

種類 必須
文字列 任意 locale: "zh_CN"

データの種類: 認証情報

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 権限を取り消します。このメソッドのコード スニペットについては、google.accounts.id.revoke(hint, callback) をご覧ください。

パラメータ 説明
hint 文字列 ユーザーの Google アカウントのメールアドレスまたは固有の ID。この ID は、credential ペイロードの sub プロパティです。
callback 関数 オプションの RevocationResponse ハンドラ。

次のコードサンプルでは、revoke メソッドに ID を指定して

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });
を使用しています。

データ型: RevocationResponse

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

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

成功

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

エラー

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