「Google でログイン」ボタンをサイトに追加して、ユーザーがウェブアプリへの登録やログインを行えるようにします。ボタンまたは属性のレンダリングにボタンまたは属性を使用し、ボタンの形状、サイズ、テキスト、テーマをカスタマイズします。
ユーザーが Google アカウントを選択して同意した後、Google は JSON Web Token(JWT)を使用してユーザー プロファイルを共有します。ログインとユーザー エクスペリエンスに含まれる手順の概要については、仕組みをご覧ください。パーソナライズされたボタンの把握。さまざまな条件や状態において、ボタンの表示方法に影響します。
Prerequisites
ログインページにボタンを追加する前に、次の手順を行います。
- 設定の手順に沿って、OAuth 同意画面を設定し、クライアント ID を取得します。
- クライアント ライブラリを読み込みます。
ボタンのレンダリング
[Google でログイン] ボタンを表示するには、HTML または JavaScript を選択して、ログインページにボタンを表示します。
HTML
HTML を使用してログインボタンをレンダリングし、JWT をプラットフォームのログイン エンドポイントに返します。
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</body>
</html>
g_id_signin
クラスを持つ要素は、「Google でログイン」ボタンとしてレンダリングされます。このボタンは、データ属性で指定されたパラメータによってカスタマイズされます。
同じページで「Google でログイン」ボタンと Google One タップを表示するには、data-auto_prompt="false"
を削除します。これは、摩擦を軽減し、ログイン率を改善するために推奨されています。
データ属性の一覧については、g_id_signin
リファレンス ページをご覧ください。
JavaScript
JavaScript を使用してログインボタンをレンダリングし、JWT をブラウザの JavaScript コールバック ハンドラに返します。
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
renderButton
の最初のパラメータとして指定された要素は、「Google でログイン」ボタンとして表示されます。この例では、buttonDiv
を使用してページにボタンをレンダリングしています。このボタンは、renderButton
の 2 番目のパラメータで指定された属性を使用してカスタマイズされます。
ユーザーの手間を最小限に抑えるために、google.accounts.id.prompt()
を使用すると、登録やログインにボタンを使用する 2 つ目の方法として、ワンタップを表示できます。
GIS ライブラリは、ID 属性を g_id_onload
に設定した要素、または g_id_signin
を含むクラス属性について、HTML ドキュメントを解析します。一致する要素が見つかった場合は、JavaScript でレンダリングしたかどうかに関係なく、HTML を使用してボタンもレンダリングされます。ボタンが 2 回表示されないよう、競合するパラメータを含む場合、それらの名前に一致する HTML 要素が HTML ページに含まれないようにしてください。
ボタンの言語
ボタンの言語は、ブラウザのデフォルトの言語や Google セッション ユーザーの設定に基づいて自動的に決定されます。言語を手動で選択することもできます。そのためには、ライブラリを読み込むときに src ディレクティブに hl
パラメータと言語コードを追加し、JavaScript でオプションの data-locale またはロケール パラメータ data-locale を HTML または locale に追加します。
HTML
次のコード スニペットは、クライアント ライブラリの URL に hl
パラメータを追加し、data-locale
属性をフランス語に設定して、ボタンの言語をフランス語で表示する方法を示しています。
<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script> ... <div class="g_id_signin" data-locale="fr"> </div>
JavaScript
次のスニペットは、クライアント ライブラリの URL に hl
パラメータを追加し、locale
をフランス語に設定した google.accounts.id.renderButton
メソッドを呼び出すという、フランス語でボタン言語を表示する例を示しています。
<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script> ... <script> google.accounts.id.renderButton( document.getElementById("buttonDiv"), { locale: "fr" } ); </script>
認証情報の処理
ユーザーの同意が得られると、Google は ID トークンとして JSON ウェブトークン(JWT)の認証情報をユーザーのブラウザに返すか、プラットフォームでホストされているログイン エンドポイントに直接返すようにします。
JWT を受信する場所は、HTML と JavaScript のどちらでボタンをレンダリングするかと、ポップアップまたはリダイレクトの UX モードのどちらを使用するかによって異なります。
ポップアップ モード
popup
UX モードを使用すると、ポップアップ ウィンドウでログイン UX フローが実行されます。これは通常、ユーザーにとって煩わしさが少なく、デフォルトの UX モードです。
ボタンを使用してボタンを表示する場合:
HTML の場合、次のいずれかを設定できます。
data-callback
: JWT をコールバック ハンドラに返す。data-login_uri
: POST リクエストを使用して、JWT をログイン エンドポイントに直接送信します。
両方の値が設定されている場合、
data-callback
がdata-login_uri
よりも優先されます。これは、デバッグ中にコールバック ハンドラを使用する場合に役立ちます。JavaScript:
callback
を設定する必要があります。ポップアップ モードでは、JavaScript でボタンを呼び出すときのリダイレクトはサポートされません。設定すると、login_uri
は無視されます。JS コールバック ハンドラ内で JWT をデコードする方法の詳細については、返された認証情報のレスポンスを処理するをご覧ください。
リダイレクト モード
redirect
UX モードを使用すると、ユーザーのブラウザの完全なページ リダイレクトを使用してログイン UX フローが実行され、Google は POST リクエストを使用して JWT をログイン エンドポイントに直接返します。これは通常、ユーザーにとってより面倒なエクスペリエンスですが、最も安全なログイン方法と見なされます。
ボタンを使用してボタンを表示する場合:
- HTML では、必要に応じて
data-login_uri
をログイン エンドポイントの URI に設定します。 - 必要に応じて、JavaScript で
login_uri
をログイン エンドポイントの URI に設定します。
値を指定しない場合、Google は JWT を現在のページの URI に返します。
ログイン エンドポイント URI
data-login_uri
または login_uri
を設定するときは、HTTPS と絶対 URI を使用します。例: https://example.com/path
開発中に localhost を使用する場合にのみ、HTTP が許可されます(http://localhost/path
)。
Google の要件と検証ルールの詳細については、安全な JavaScript 生成元とリダイレクト URI を使用するをご覧ください。