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

残り 10 分

この Codelab について

最終更新: 4月 28, 2025

作成者: Brian Daugherty

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

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 が混在しており、次のような処理を行います。

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

data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" の設定が少し違うようです。

後で見直すので、無視してください。

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

ここでは、ブラウザに index.html を提供する 2 つの環境について説明します。

ウェブサーバーをマシン上でローカルに
リモートプラットフォームから利用できます

最も使いやすいものを選択してください。設定したら、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>

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

ボタンをさらにカスタマイズできます。オプションの完全なリストについては、ビジュアルデータ属性をご覧ください。

8. 参考情報

お疲れさまでした

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

次のステップについては、次のリンクを参考にしてください。

Google Identity Services HTML API
Google Identity Services の JavaScript API
「Google for web でログイン」を設定する方法
Google ID トークンを検証する
Google Cloud プロジェクトについて詳しくは、こちらをご覧ください。
Google Identity の認証方法

よくある質問

StackOverflow

誤りを報告

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

この Codelab について

学習内容

必要なもの

マシンからローカル

リモート プラットフォームの使用

ページを読み込む

ローカルマシンでホストされる

リモート プラットフォームでホストされている

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

よくある質問

リモートプラットフォームの使用

リモートプラットフォームでホストされている