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

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

代替テキスト

ユーザーが Google アカウントを選択して同意した後、Google は JSON Web Token(JWT)を使用してユーザー プロファイルを共有します。ログインとユーザー エクスペリエンスに含まれる手順の概要については、仕組みをご覧ください。パーソナライズされたボタンの把握。さまざまな条件や状態において、ボタンの表示方法に影響します。

Prerequisites

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

ボタンのレンダリング

[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-callbackdata-login_uri よりも優先されます。これは、デバッグ中にコールバック ハンドラを使用する場合に役立ちます。

  • JavaScript: callback を設定する必要があります。ポップアップ モードでは、JavaScript でボタンを呼び出すときのリダイレクトはサポートされません。設定すると、login_uri は無視されます。

    JS コールバック ハンドラ内で JWT をデコードする方法の詳細については、返された認証情報のレスポンスを処理するをご覧ください。

リダイレクト モード

redirect UX モードを使用すると、ユーザーのブラウザの完全なページ リダイレクトを使用してログイン UX フローが実行され、Google は POST リクエストを使用して JWT をログイン エンドポイントに直接返します。これは通常、ユーザーにとってより面倒なエクスペリエンスですが、最も安全なログイン方法と見なされます。

ボタンを使用してボタンを表示する場合:

  • HTML では、必要に応じて data-login_uri をログイン エンドポイントの URI に設定します。
  • 必要に応じて、JavaScriptlogin_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 を使用するをご覧ください。