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

ウェブの [Google でログイン] ボタン

1. 概要

この Codelab では、ユーザーログイン用のウェブページを作成します。Google Identity Services JavaScript ライブラリを使用して、[Google でログイン] ボタンを表示し、カスタマイズします。

学習内容

ウェブページに「Google でログイン」ボタンを追加する方法
OAuth 2.0 ウェブアプリケーションの設定方法
ID トークンをデコードする方法
[Google でログイン] ボタンをカスタマイズする方法

必要なもの

テキストエディタとウェブページをホストする場所。この Codelab で取り上げる環境は次のとおりです。
- マシンのターミナルでローカルに実行する。
- Glitch などのプラットフォームを使用します。
使いやすいと思う環境を選択します。
Google Cloud プロジェクト既存のプロジェクトを使用することも、新しいプロジェクトを作成することもできます。Google Cloud Platform のアカウントとプロジェクトは無料です。
HTML、CSS、JavaScript、Chrome DevTools（または同等のツール）に関する基本的な知識。

では始めましょう。

2. ログインページを作成する

次のコードサンプルを index.html というファイルに追加します。この作業は、お使いのマシンでテキストエディタを使用するか、Glitch などのプラットフォームで行うことができます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

このコードは HTML と JavaScript が混在しており、次の処理を行います。

g_id_onload を使用して Google Identity Services ライブラリを構成します。
g_id_signin を使用して [Google でログイン] ボタンを表示する
Google からユーザーのログイン認証情報を受け取る handleCredentialResponse という名前の JavaScript コールバック関数ハンドラを追加します。
JSON Web Token（JWT）認証情報をプレーンな JSON に変換する decodeJWT 関数。

data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" には少し問題があるように見えるかもしれません。

今は無視してください。後ほど説明します。

3. ウェブページを配信する

ブラウザに index.html を配信する 2 つの環境について説明します。

マシンでローカルにウェブサーバーを実行している
Glitch などのリモートプラットフォーム。

使いやすいと思う方を選んでください。設定後、この URL を使用して OAuth ウェブクライアントを構成します。

マシンからローカルに

システムに Python3 がインストールされていることを確認します。設定は OS とプラットフォームによって異なります。マシンに Python をインストールする必要がある場合は、Python の設定と使用から始めます。

index.html を含むディレクトリで Python ウェブサーバーを起動します。

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

ウェブサーバーがポート 8000 で接続をリッスンし、ログインページを提供する準備が整いました。URL は

http://localhost:8000

ウェブ開発プラットフォームから

Glitch（または同等のもの）を使用してログインページを編集してホストすることを選択した場合は、プレビューペインまたは新しいブラウザタブで index.html を開くことができます。

通常、使用する URL は、glich.com プロジェクトの設定時に入力したプロジェクト名です。たとえば、Glitch プロジェクトの名前が gis-example の場合、URL は https://gis-example.glitch.me になります。もちろん、別のプロジェクト名を選択しているため、この名前を再利用することはできません。URL は

https://<var>your-project-name</var>.glitch.me

ページを読み込む

少々お待ちください...

まず、OAuth 2.0 ウェブクライアントを作成して構成する必要があります。

URL をコピーするかメモします。これは次の手順で使用します。

4. OAuth ウェブクライアントを設定する

ユーザーが実際にログインできるように OAuth を構成しましょう。

このリンクをクリックして、OAuth 2.0 ウェブクライアントを作成します。必要に応じて、ウィザードを使用して新しい Google Cloud プロジェクトを作成して設定します。
[アプリケーションの種類] プルダウンから [ウェブアプリケーション] を選択します。
[承認済みの JavaScript 生成元] の [URI を追加] ボタンを押します。
ステップ 3: ウェブページを配信するで index.html をホストしている URL を入力します。
ローカルマシンでホストされている

リモートプラットフォームでホストされている
[作成] を押します。
新しいクライアント ID をコピーします。

ASMRの要素も忘れてはならないでしょう

新しいクライアント ID を使用するように index.html を更新する必要があります。エディタで、PUT_YOUR_WEB_CLIENT_ID_HERE を新しいクライアント ID に置き換えます。クライアント ID は次の例のようになります。1234567890-abc123def456.apps.googleusercontent.com

ログインしましょう。

5. ログイン

まず、ブラウザのデベロッパーコンソールを開きます。Google から返されたエラーと JWT ID トークン認証情報がここに記録されます。

[Google でログイン] ボタンを押します。

その後の流れは多少異なる場合があります。

現在複数の Google アカウントにログインしている場合は、このウェブアプリへのログインに使用するアカウントを選択するよう求められます。
このウェブアプリに初めてログインする場合は、同意を求めるメッセージが表示されます。

必要に応じてアカウントを選択して同意すると、Google は JWT で応答します。ブラウザで実行されている handleCredentialResponse コールバック関数が JWT を受け取ります。

この Codelab では、JWT の内容をデコードして出力します。本番環境のウェブアプリでは、デコードされた JWT を検証して、バックエンドプラットフォームに新しいアカウントを作成したり、ユーザーの新しいセッションを確立したりするなど、より意味のある処理を行います。

6. JWT ID トークンを検査する

エンコードされた JWT がデベロッパーコンソールに記録されます。JWT のデコード後、一般的に使用される ID トークンフィールドの一部もコンソールに記録されます。

jwt.io などのオンラインツールを使用して、JWT をデコードできます。

または、ターミナルの jq を使用して JWT をデコードして表示することもできます（パッケージマネージャーを使用して jq をインストールする必要がある場合があります）。まず、エンコードされた JWT 文字列を二重引用符で囲んで貼り付けます。

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

このコマンドを使用してデコードします。

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

メール、名前、写真などのキーと値は、比較的わかりやすいはずです。他の値は、JWT を使用する前に検証するために使用されます。各フィールドの意味について詳しくは、ID トークンからユーザー情報を取得するをご覧ください。

7. ボタンをカスタマイズする

デフォルトのログインボタンをページに配置する方法は次のとおりです。

    <div class="g_id_signin"></div>

このボタンが表示されます。

ただし、サイトのテーマに合わせて色、サイズ、テキストを変更したい場合もあるでしょう。

ボタンの色を青に変更し、代わりに「Google で登録」と表示されるようにしましょう。

index.html を開き、g_id_signin 要素を見つけて、data-theme="filled_blue" 属性と data-text="signup_with" 属性を追加します。

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

保存してページを再読み込みすると、新しいテキストを含む青いボタンが表示されます。

ボタンはさらにカスタマイズできます。オプションの完全なリストについては、Visual Data 属性をご覧ください。また、HTML コード生成ツールもお試しください。

8. 参考情報

お疲れさまでした

ウェブページに [Google でログイン] ボタンを追加し、OAuth 2.0 ウェブクライアントを構成し、JWT ID トークンをデコードし、ボタンの外観をカスタマイズする方法を学びました。

次のリンクが、次のステップの参考になる可能性があります。

Google Identity Services HTML API
Google Identity Services JavaScript API
ウェブサイト向け「Google でログイン」の設定方法
Google ID トークンを検証する
詳しくは、Google Cloud プロジェクトをご覧ください。
Google Identity の認証方法

よくある質問

StackOverflow