[Google でログイン] ボタンをサイトに追加して、ユーザーがウェブアプリに登録またはログインできるようにします。HTML または JavaScript を使用して、ボタンと属性をレンダリングし、ボタンの形、サイズ、テキスト、テーマをカスタマイズします。
ユーザーが 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 Tap を同じページに表示するには、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() を呼び出してワンタップで表示できます。
GIS ライブラリは、ID 属性が g_id_onload に設定された要素または g_id_signin 属性を含むクラス属性について、HTML ドキュメントを解析します。一致する要素が見つかった場合は、JavaScript でレンダリングしたかどうかにかかわらず、ボタンは HTML を使用してレンダリングされます。ボタンを 2 回表示しないように、競合するパラメータには HTML ページ内のこれらの名前と一致する HTML 要素を含めないでください。
認証情報の処理
ユーザーが同意すると、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 に設定します。
値を指定しない場合、Google は現在のページの URI に JWT を返します。
ログイン エンドポイント URI
data-login_uri または login_uri を設定する場合は、HTTPS と絶対 URI を使用します。例: https://example.com/path
HTTP は、開発中に localhost を使用する場合のみ許可されます: http://localhost/path。
Google の要件と検証ルールの詳細については、安全な JavaScript 生成元とリダイレクト URI を使用するをご覧ください。