網頁版「使用 Google 帳戶登入」按鈕

還剩 10 分鐘

程式碼研究室簡介

上次更新時間：4月 28, 2025

作者：Brian Daugherty

1. 總覽

在本程式碼研究室中，我們會建立一個可供使用者登入的簡易網頁。您必須使用 Google Identity 服務 JavaScript 程式庫來顯示及自訂「使用 Google 帳戶登入」按鈕。

課程內容

如何在網頁中加入「使用 Google 帳戶登入」按鈕
如何設定 OAuth 2.0 網頁應用程式
如何解碼 ID 權杖
如何自訂「使用 Google 帳戶登入」按鈕

軟硬體需求

使用文字編輯器和存放網頁的位置，以及本程式碼研究室將介紹的環境：
- 在本機的終端機中運作
- 使用 Glitch 等平台。
選擇您偏好的環境。
Google Cloud 專案。您可以使用現有專案或建立新專案。Google Cloud Platform 帳戶和專案不會產生費用。
具備 HTML、CSS、JavaScript 和 Chrome 開發人員工具 (或同等功能) 的基本知識。

讓我們進入正題吧

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 服務程式庫，
使用 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 的兩種環境：

可以在您的電腦上
遠端平台 (如 Glitch)

請選擇最符合需求的選項。設定完成後，我們會使用該網址設定 OAuth 網路用戶端。

在本機電腦上

確認已在系統上安裝 Python3。設定方式會因作業系統和平台而異。如需在機器中安裝 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 的連線，並準備好提供您的登入網頁。網址為

http://localhost:8000

使用遠端平台

如果您已選擇使用 Glitch (或類似功能) 編輯及代管登入頁面，應該可以在預覽窗格或新的瀏覽器分頁中開啟 index.html。

您通常使用的網址就是您在設定 glich.com 專案時輸入的專案名稱。舉例來說，如果 glitch 專案的名稱是 gis-example，則網址為 https://gis-example.glitch.me。當然，您選擇的專案名稱不同，無法重複使用。網址為

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

載入網頁

稍等一下...

因此，我們必須先建立並設定 OAuth 2.0 網路用戶端。

複製或記下網址，下一個步驟將會用到。

4. 設定 OAuth 網路用戶端

讓我們設定 OAuth，讓使用者實際登入。

點選這個連結即可建立 OAuth 2.0 網路用戶端。如有需要，設定精靈會協助您建立及設定新的 Google Cloud 專案。
從「應用程式類型」下拉式選單中選取「網頁應用程式」。
按下「已授權的 JavaScript 來源」下方的「新增 URI」按鈕
輸入由步驟 3 提供您的網頁中的 index.html 網址。
由您的本機電腦代管

由遠端平台代管
按下「建立」
複製新的用戶端 ID。

最後一個步驟

我們必須返回並更新 index.html，才能使用新的用戶端 ID。在編輯器中，將 PUT_YOUR_WEB_CLIENT_ID_HERE 替換成新的用戶端 ID。用戶端 ID 如下所示：1234567890-abc123def456.apps.googleusercontent.com。

立即登入！

5. 登入

首先，開啟瀏覽器的開發人員控制台後，所有錯誤和從 Google 傳回的 JWT ID 權杖憑證都會記錄在這裡。

按下「使用 Google 帳戶登入」按鈕！

下述情況可能會稍有不同：

如果您目前登入了多個 Google 帳戶，系統會提示您選取要用來登入這個網頁應用程式的帳戶。
如果這是你第一次登入這個網頁應用程式，系統會顯示同意聲明提示。

選擇提供帳戶並表示同意後，Google 就會傳回 JWT。在瀏覽器中執行的 handleCredentialResponse 回呼函式會接收 JWT。

在本程式碼研究室中，我們會解碼並輸出 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 前進行驗證。請參閱這篇文章，進一步瞭解所有欄位代表的意義。

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 服務 HTML API
Google Identity 服務 JavaScript API
如何設定「使用 Google 帳戶登入」網頁版
驗證 Google ID 權杖
如要進一步瞭解 Google Cloud 專案，請前往這裡。
Google 身分識別的驗證方法

常見問題

StackOverflow

回報錯誤

網頁版「使用 Google 帳戶登入」按鈕

程式碼研究室簡介

課程內容

軟硬體需求

在本機電腦上

使用遠端平台

載入網頁

由您的本機電腦代管

由遠端平台代管

最後一個步驟

常見問題