このリファレンス ページでは、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 で使用」 |
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
ユーザーがワンタップ 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 が表示されない詳細な理由。有効な値は次のとおりです。
|
isSkippedMoment() |
この通知はスキップされた瞬間に関するものですか? |
getSkippedReason() |
スキップされた時間の詳細な理由。有効な値は次のとおりです。
|
isDismissedMoment() |
この通知は閉じた瞬間に関するものですか? |
getDismissedReason() |
拒否の詳細な理由。有効な値は次のとおりです。
|
getMomentType() |
モーメント タイプの文字列を返します。有効な値は次のとおりです。
|
データ型: 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 は権威ではないため、パスワードまたはその他の方法でユーザーを確認することをおすすめします。また、Google アカウントの作成時に Google が最初にユーザーを確認したため、email_verfied
が true になることもあります。ただし、サードパーティのメール アカウントの所有権はその後変更されている可能性があります。
exp
フィールドには、サーバーサイドでトークンを確認する有効期限が表示されます。「Google でログイン」から取得した ID トークンは 1 時間です。有効期限が切れる前にトークンを検証する必要があります。セッション管理には exp
を使用しないでください。ID トークンが期限切れになっても、ユーザーがログアウトされるわけではありません。ユーザーのセッション管理はアプリ側で行います。
select_by
select_by
フィールドに指定可能な値を次の表に示します。値の設定には、使用するボタンの種類、セッションおよび同意ステータス、
ユーザーがワンタップまたは「Google でログイン」ボタンを押したか、タッチレスの自動ログイン プロセスを使用した。
既存のセッションが検出されたか、ユーザーが Google アカウントを選択してログインして新しいセッションを確立しました。
ID トークンの認証情報をアプリと共有する前に、ユーザーは
- [確認] ボタンを押して認証情報の共有に同意する または
- [アカウントを選択]を使って Google アカウントを選択したことを 確認します
このフィールドの値は、次のいずれかのタイプに設定されます。
値 | 説明 |
---|---|
auto |
認証情報の共有に同意済みの既存のセッションでのユーザーの自動ログイン。FedCM に対応していないブラウザにのみ適用されます。 |
user |
以前に同意した既存のセッションがあるユーザーが、ワンタップの [次の名前とメールアドレスで続行] ボタンを押して認証情報を共有。FedCM に対応していないブラウザにのみ適用されます。 |
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 |
ボタンのテーマ。たとえば、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 |
|
signup_with |
|
continue_with |
|
signin |
シェイプ
ボタンの形状。デフォルト値は rectangular
です。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 任意 | shape: "rectangular" |
次の表に、使用可能なボタンの形状とその説明を示します。
形 | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
Google ロゴの配置。デフォルト値は left
です。この属性は standard
ボタンタイプにのみ適用されます。詳しくは、次の表をご覧ください。
タイプ | 必須 | 例 |
---|---|---|
文字列 | 任意 | logo_alignment: "center" |
次の表に、使用可能なアライメントとその説明を示します。
logo_alignment | |
---|---|
left |
|
center |
幅
ボタンの最小幅(ピクセル単位)。幅の最大値は 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
このフィールドは文字列値です。取り消しメソッドの呼び出しが失敗した場合、成功時には未定義になります。