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

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

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

google.accounts.id.initialize メソッドは「Google でログイン」を初期化します。 自動的に作成されます。次のコードサンプルをご覧ください: メソッド:

google.accounts.id.initialize(IdConfiguration)

次のコードサンプルは、google.accounts.id.initialize メソッドを実装しています。 onload 関数を使用した場合:

<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 でログイン」クライアントを作成します。 同じウェブページ内のすべてのモジュールで暗黙的に使用可能な 2 つのインスタンスがあります。

• 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	ブラウザがユーザーのログイン プロンプトを制御し、 ログインフローを強化できます。

client_id

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

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

auto_select

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

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

callback

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

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

login_uri

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

この値は、OAuth 2.0 で承認されたリダイレクト URI のいずれかと完全に一致する必要があります。 構成した 2.0 クライアント Google Cloud コンソールで指定し、Google のリダイレクト URI の検証 ルールをご覧ください。

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

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

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

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

ログイン エンドポイントは、 credential キー 本文の ID トークン値。

次に、ログイン エンドポイントへのリクエストの例を示します。

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 に設定します。詳しくは、次の表をご覧ください。

タイプ	必須	例
ブール値	省略可	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 で使用]

state_cookie_domain

親ドメインとそのサブドメインでワンタップを表示する必要がある場合は、 単一の共有状態の 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.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 を閉じたとき、デフォルトの中間 iframe の動作をオーバーライドします [X] をタップしてタップしますワンタップ UI に表示されます。デフォルトの動作は、 DOM から中間 iframe をすぐに削除します。

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

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

itp_support

このフィールドは、 ワンタップ UX をアップグレード インテリジェント トラッキング防止機能をサポートしているブラウザで有効にする必要があります。 （ITP）。デフォルト値は 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

ブラウザがユーザーのログイン メッセージを制御し、ログインフローを仲介できるようにする 測定することを目的としています。デフォルトは false です。FedCM への移行をご覧ください。 のページをご覧ください。

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

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

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

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

通常、prompt() メソッドはページの読み込み時に呼び出されます。セッションにより ステータスとユーザー設定を管理することもでき、ワンタップ プロンプトの UI が 表示されます。さまざまな場面の UI ステータスに関する通知を受け取るには、 UI ステータス通知を受け取ることができます。

通知は以下のタイミングで配信されます。

• 瞬間の表示: prompt() メソッドが呼び出された後に発生します。「 notification には、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

次の表に、Terraform のメソッドと説明を PromptMomentNotification データ型:

メソッド
isDisplayMoment()	この通知は瞬間的な表示に関するものですか？ 注: FedCM が <ph type="x-smartling-placeholder"></ph> 有効の場合、この通知は呼び出されません。詳しくは、 FedCM への移行 のページをご覧ください。
isDisplayed()	表示されるときの通知ですか？UI は 表示されますか？ 注: FedCM が <ph type="x-smartling-placeholder"></ph> 有効の場合、この通知は呼び出されません。詳しくは、 FedCM への移行 のページをご覧ください。
isNotDisplayed()	表示されるときの通知ですか？UI は 表示されますか？ 注: FedCM が <ph type="x-smartling-placeholder"></ph> 有効の場合、この通知は呼び出されません。詳しくは、 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 が <ph type="x-smartling-placeholder"></ph> このメソッドはサポートされていません。詳しくは、 FedCM への移行 のページをご覧ください。
isSkippedMoment()	この通知はスキップされた瞬間に関するものですか？
getSkippedReason()	スキップされた詳細な理由。その内容は次のとおりです。 可能な値: auto_cancel user_cancel tap_outside issuing_failed 注: FedCM が <ph type="x-smartling-placeholder"></ph> このメソッドはサポートされていません。詳しくは、 FedCM への移行 のページをご覧ください。
isDismissedMoment()	この通知は閉じたモーメントに関するものですか？
getDismissedReason()	終了の詳細な理由。次のことが可能です。 values: credential_returned cancel_called flow_restarted
getMomentType()	モーメント タイプの文字列を返します。次のことが可能です。 values: 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 アカウントには、さまざまな時点で複数のメールアドレスが存在することがあります。

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 が最初に確認したとおりに true にすることもできます。 そのユーザーは Google アカウントの作成時に表示されますが、3 番目のアカウントの所有権は アカウントが変更された可能性があります。

exp フィールドには、トークンを検証するための有効期限が表示されます。 できます。1 時間です 。 トークンが期限切れになる前に あります。セッション管理に exp を使用しないでください。ID トークンの有効期限が切れている ユーザーがログアウトしていることを意味しません。アプリはセッションと ユーザー管理に使用できます。

select_by

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

• ユーザーが [ワンタップ] ボタンまたは [Google でログイン] ボタンを押した、または 自動ログイン プロセスについて説明します。

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

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

  • [確認] ボタンをクリックして、認証情報の共有に同意した または
  • 以前に同意し、[アカウントを選択] を使用して Google アカウント。

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

値	説明
auto	ログインした既存のセッションでのユーザーの自動ログイン 以前に認証情報を共有することに同意していません。適用先 FedCM 非対応ブラウザ。
user	以前に同意した既存のセッションがあるユーザー ワンタップ [次の名前とメールアドレスで続行] を押しました認証情報を共有するボタンがあります。適用 FedCM 非対応ブラウザのみが対象です。
fedcm	ユーザーがワンタップ [次の名前とメールアドレスで続行] を押しました共有ボタン 使用して認証情報を取得できます。FedCM にのみ適用 対応 できます。
fedcm_auto	ログインした既存のセッションでのユーザーの自動ログイン 以前に FedCM ワンタップを使用して認証情報を共有することに同意した。 FedCM にのみ適用 対応 できます。
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	ボタンのテーマ。例: filled_blue や filled_black など。
size	ボタンのサイズ。（大、小など）。
text	ボタンのテキスト。（「Google でログイン」など）または 「Google で登録」。
shape	ボタンの形状。（長方形、円形など）。
logo_alignment	Google ロゴの配置: 左または中央。
width	ボタンの幅（ピクセル単位）。
locale	設定すると、ボタンの言語がレンダリングされます。
click_listener	設定すると、この関数は「Google でログイン」機能のリクエスト時に呼び出されます ボタンをクリックするだけです。
state	設定すると、この文字列が ID トークンとともに返されます。

属性タイプ

以下のセクションでは、各属性のタイプに関する詳細と、 例です。

type

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

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

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

次の表に、使用できるボタンのタイプとそのタイプを示します。 説明:

タイプ
standard	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">
icon	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">

テーマ

ボタンのテーマ。デフォルト値は outline です。次の表で 詳細情報:

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

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

テーマ
outline	<ph type="x-smartling-placeholder"> </ph>
filled_blue	<ph type="x-smartling-placeholder"> </ph>
filled_black	<ph type="x-smartling-placeholder"> </ph>

サイズ

ボタンのサイズ。デフォルト値は large です。次の表で 詳細情報:

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

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

サイズ
large	<ph type="x-smartling-placeholder"> </ph>
medium	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">
small	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">

テキスト

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

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

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

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

テキスト
signin_with	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">
signup_with	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">
continue_with	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">
signin	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">

シェイプ

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

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

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

図形
rectangular	<ph type="x-smartling-placeholder"> </ph>
pill	<ph type="x-smartling-placeholder"> </ph>
circle	<ph type="x-smartling-placeholder"> </ph>
square	<ph type="x-smartling-placeholder"> </ph>

logo_alignment

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

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

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

logo_alignment
left	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">
center	<ph type="x-smartling-placeholder"> </ph> <ph type="x-smartling-placeholder">

幅

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

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

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

locale

省略可。指定した言語 / 地域を使用してボタンテキストを表示します。それ以外の場合はデフォルトで ユーザーの Google アカウントまたはブラウザ設定。hl パラメータを追加し、 言語コードを src ディレクティブに追加します。次に例を示します。 gsi/client?hl=<iso-639-code>。

設定されていない場合、ブラウザのデフォルトの言語 / 地域または Google セッション ユーザーの 設定が使用されます。そのため、ユーザーによって表示内容が異なる サイズが異なることもあります。

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

タイプ	必須	例
文字列	省略可	locale: "zh_CN"

click_listener

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

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

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

この例では、「[Sign in with Google] ボタンをクリックしました...」というメッセージがログに記録されます。 自動的にコンソールに表示されるようになります。

state

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

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

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

データ型: Credential

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

項目
id	ユーザーを識別します。
password	パスワード

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

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

google.accounts.id.disableAutoSelect()

次のコードサンプルでは、google.accounts.id.disableAutoSelect メソッドを onSignout() 関数とともに使用します。

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

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

このメソッドは、ブラウザのネイティブ モジュールの store() メソッドのラッパーです。 認証情報マネージャー API を使用します。パスワードの保存にしか使用できない あります。メソッドの次のコード例をご覧ください。

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

次のコードサンプルでは、google.accounts.id.storeCredential メソッドを onSignIn() 関数とともに使用します。

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

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

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

google.accounts.id.cancel()

次のコードサンプルは、google.accounts.id.cancel() メソッドを実装しています。 onNextButtonClicked() 関数を使用した場合:

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

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

onGoogleLibraryLoad コールバックを登録できます。スペースには、 「With 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 メソッドは、リソースの共有に使用される OAuth 権限付与を取り消します。 指定したユーザーの ID トークン。このメソッドの次のコード スニペットをご覧ください。 javascript google.accounts.id.revoke(login_hint, callback)

パラメータ	型	説明
login_hint	文字列	ユーザーの Google アカウントのメールアドレスまたは一意の ID。ID は、Pod の sub プロパティです。 credential ペイロードが渡されます。
callback	関数	オプションの RevocationResponse ハンドラ。

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

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

データ型: RevocationResponse

callback 関数が呼び出されると、RevocationResponse オブジェクトが パラメータとして渡されます。次の表に、表示されるフィールドの一覧を示します。 取り消し応答のオブジェクト内:

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

成功

このフィールドはブール値で、revoke メソッドの呼び出しが成功した場合または 失敗した場合は false を返します。

エラー

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