[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 ワンタップを同じページに表示するには、 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 ディレクティブに追加し、HTML でオプションの data-locale または locale パラメータ 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 が JWT をログイン エンドポイントに POST リクエストを使用して直接送信する。

両方の値が設定されている場合、data-callback が data-login_uri よりも優先されます。デバッグにコールバック ハンドラを使用する場合は、両方の値を設定すると便利です。

JavaScript

callback を指定する必要があります。JavaScript でボタンをレンダリングする場合、ポップアップ モードではリダイレクトはサポートされません。設定されている場合、login_uri は無視されます。

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

リダイレクト モード

redirect UX モードを使用すると、ユーザーのブラウザのページ全体のリ 101 ダイレクトを使用してログイン UX フローが実行され、Google は POST リクエストを使用して JWT をログイン エンドポイントに直接返します。101これは一般的に、ユーザーのストレスが大きくなりますが、最も安全なログイン方法とされています。

次の方法でボタンをレンダリングする場合:

  • HTML : 必要に応じて、data-login_uri をログイン エンドポイントの URI に設定します。
  • JavaScript : 必要に応じて、login_uri をログイン エンドポイントの URI に設定します。

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

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

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

HTTP は、開発中に localhost を使用する場合にのみ許可されます: http://localhost/path

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