[Google でログイン] ボタンを表示する

サイトに [Google でログイン] ボタンを追加して、ウェブアプリの登録やログインを行えるようにします。HTML または JavaScript を使用してボタンと属性をレンダリングし、ボタンの形状、サイズ、テキスト、テーマをカスタマイズします。

カスタマイズされたログインボタン。

ユーザーが Google アカウントを選択して同意すると、Google は JSON Web Token（JWT）を使用してユーザー プロフィールを共有します。ログイン時の手順とユーザー エクスペリエンスの概要については、仕組みをご覧ください。パーソナライズされたボタンを理解するでは、ボタンがユーザーにどのように表示されるかに影響するさまざまな条件や状態を確認します。

前提条件

ログインページにボタンを追加する前に、次の手順を完了します。

ボタンのレンダリング

[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 を使用するをご覧ください。