このページは Cloud Translation API によって翻訳されました。

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

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

ユーザーが 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 タップを表示するには、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-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 は JWT を現在のページの URI に返します。

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

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

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

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

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

Prerequisites

ボタンのレンダリング

HTML

JavaScript

ボタンの言語

HTML

JavaScript

認証情報の処理

ポップアップ モード

リダイレクト モード

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

ポップアップモード

リダイレクトモード

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