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

サイトに [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 Tap を表示するには、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 番目のパラメータで指定された属性を使用してカスタマイズされます。

ユーザーの負担を最小限に抑えるために、google.accounts.id.prompt() が呼び出され、ボタンを使用して登録またはログインする方法の 2 つ目の方法としてワンタップが表示されます。

GIS ライブラリは、ID 属性が g_id_onload に設定されている要素、または g_id_signin を含むクラス属性を持つ要素を HTML ドキュメントから解析します。一致する要素が見つかった場合、JavaScript でボタンをレンダリングしたかどうかにかかわらず、ボタンは HTML を使用してレンダリングされます。ボタンが 2 回表示されないようにするには、パラメータが競合する可能性があるため、これらの名前に一致する HTML 要素を HTML ページに含めないでください。

ボタンの言語

ボタンの言語は、ブラウザのデフォルト言語または Google セッション ユーザーの設定によって自動的に決まります。ライブラリを読み込むときに hl パラメータと言語コードを src ディレクティブに追加し、オプションの data-locale または locale パラメータ（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

次のコード スニペットは、クライアント ライブラリの URL に hl パラメータを追加し、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 に設定します。

値を指定しない場合、Google は現在のページの URI に JWT を返します。

ログイン エンドポイント URI

data-login_uri または login_uri を設定する場合は、HTTPS と絶対 URI を使用します。例: https://example.com/path

HTTP は、開発中にローカルホスト（http://localhost/path）を使用している場合にのみ許可されます。

Google の要件と検証ルールの詳細については、安全な JavaScript 生成元とリダイレクト URI を使用するをご覧ください。