サイトに [Google でログイン] ボタンを追加して、ウェブアプリの登録やログインを行えるようにします。HTML または JavaScript を使用してボタンと属性をレンダリングし、ボタンの形状、サイズ、テキスト、テーマをカスタマイズします。
ユーザーが Google アカウントを選択して同意すると、Google は JSON Web Token(JWT)を使用してユーザー プロフィールを共有します。ログイン時の手順とユーザー エクスペリエンスの概要については、仕組みをご覧ください。パーソナライズされたボタンを理解するでは、ボタンがユーザーにどのように表示されるかに影響するさまざまな条件や状態を確認します。
前提条件
ログインページにボタンを追加する前に、次の手順を完了します。
- 設定の手順に沿って、OAuth 同意画面を構成し、クライアント ID を取得します。
- クライアント ライブラリを読み込みます。
ボタンのレンダリング
[Google でログイン] ボタンを表示するには、HTML または JavaScript を使用してログインページにボタンをレンダリングします。
HTML
HTML を使用してログインボタンをレンダリングし、JWT をプラットフォームのログイン エンドポイントに返します。
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></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></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 番目のパラメータに指定された属性を使用してカスタマイズされます。
ユーザーの負担を最小限に抑えるため、ボタンを使用する登録やログインに代わる 2 つ目の代替手段として、ワンタップを表示する google.accounts.id.prompt()
が呼び出されます。
GIS ライブラリは HTML ドキュメントを解析し、ID 属性が g_id_onload
に設定されている要素か、g_id_signin
を含むクラス属性を検索します。一致する要素が見つかった場合、JavaScript でボタンをレンダリングしたかどうかにかかわらず、ボタンは HTML を使用してレンダリングされます。ボタンが 2 回表示されないようにするため、パラメータが競合する場合は、これらの名前と一致する HTML 要素を HTML ページに含めないでください。
ボタンの言語
ボタンの言語は、ブラウザのデフォルトの言語または Google セッションのユーザーの設定によって自動的に決定されます。言語を手動で選択することもできます。そのためには、ライブラリの読み込み時に src ディレクティブに hl
パラメータと言語コードを追加し、HTML ではオプションのデータ ロケールまたはロケール パラメータ data-locale、JavaScript では locale を追加します。
HTML
次のコード スニペットは、クライアント ライブラリの URL に hl
パラメータを追加し、data-locale
属性をフランス語に設定することで、ボタンの言語をフランス語で表示する方法を示しています。
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
次のコード スニペットは、hl
パラメータをクライアント ライブラリの URL に追加し、locale
パラメータをフランス語に設定して google.accounts.id.renderButton
メソッドを呼び出して、ボタン言語をフランス語で表示する方法を示しています。
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
認証情報の処理
ユーザーの同意が得られると、Google は ID トークンとして JSON Web Token(JWT)認証情報をユーザーのブラウザ、またはプラットフォームでホストされているログイン エンドポイントに直接返します。
JWT を受け取る場所は、HTML と JavaScript のどちらを使用してボタンをレンダリングするか、ポップアップまたはリダイレクトの UX モードを使用するかによって異なります。
ポップアップ モード
popup
UX モードを使用すると、ポップアップ ウィンドウでログイン UX フローが実行されます。通常、これはユーザーにとって煩わしさを感じにくく、デフォルトの UX モードです。
以下を使用してボタンをレンダリングする場合:
HTML
次のいずれかを設定できます。
data-callback
: JWT をコールバック ハンドラに返すdata-login_uri
。Google が 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 に設定します。
値を指定しない場合、現在のページの URI に JWT が返されます。
ログイン エンドポイント URI
data-login_uri
または login_uri
を設定する場合は、HTTPS と絶対 URI を使用します。例: https://example.com/path
HTTP は、開発中に localhost を使用する場合にのみ許可されます(http://localhost/path
)。
Google の要件と検証ルールの詳細については、安全な JavaScript の生成元とリダイレクト URI を使用するをご覧ください。