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

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

程式碼研究室簡介

subject上次更新時間:7月 9, 2025
account_circle作者:Brian Daugherty

1. 總覽

在本程式碼研究室中,我們將建構使用者登入網頁。您可以使用 Google Identity 服務 JavaScript 程式庫,顯示及自訂「使用 Google 帳戶登入」按鈕。

「使用 Google 帳戶登入」按鈕。

課程內容

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

軟硬體需求

  1. 文字編輯器和網頁代管位置,我們將在本程式碼研究室中介紹這些環境:
    • 在本機電腦的終端機中執行,或
    • 使用 Glitch 等平台。
    選擇最適合自己的環境。
  2. Google Cloud 專案。你可以使用現有專案或建立新專案。Google Cloud Platform 帳戶和專案免費。
  3. 具備 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 Services 程式庫,
  • 使用 g_id_signin 顯示「使用 Google 帳戶登入」按鈕,
  • 新增名為 handleCredentialResponse 的 JavaScript 回呼函式處理常式,以便接收 Google 傳送的使用者登入憑證,以及
  • JSON Web Token (JWT) 憑證轉換為純 JSON 的 decodeJWT 函式。

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」按鈕
  • 輸入代管 index.html 的網址,如步驟 3:提供網頁所述。

    在本機電腦上代管

    在本機上代管的本機來源

    託管於遠端平台

    使用遠端代管平台
  • 按下「建立」
  • 複製新的用戶端 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,驗證通過後才能使用。如要進一步瞭解所有欄位的意義,請參閱「從 ID 權杖取得使用者資訊」。

7. 自訂按鈕

在網頁上放置預設登入按鈕的方式如下:

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

然後你會看到這個按鈕

「使用 Google 帳戶登入」按鈕。

但您可能想變更顏色、大小或文字,以配合網站主題。

我們將按鈕顏色改為藍色,並將文字改為「使用 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>

儲存並重新載入頁面後,您會看到顯示新文字的藍色按鈕。

「使用 Google 帳戶註冊」按鈕。

如要進一步自訂按鈕,請參閱視覺化資料屬性,查看完整選項清單,並試用我們的 HTML 程式碼產生器

8. 其他資源

恭喜!

您已在網頁中加入「使用 Google 帳戶登入」按鈕、設定 OAuth 2.0 網頁用戶端、解碼 JWT ID 權杖,並瞭解如何自訂按鈕外觀。

這些連結或許有助於你採取後續行動:

常見問題