顯示「使用 Google 帳戶登入」按鈕

在網站中加入「使用 Google 帳戶登入」按鈕，讓使用者註冊或登入您的網頁應用程式。使用 HTML 或 JavaScript 算繪按鈕和屬性，自訂按鈕形狀、大小、文字和主題。

個人化登入按鈕。

使用者選取 Google 帳戶並提供同意聲明後，Google 就會使用 JSON Web Token (JWT) 分享使用者個人資料。如要瞭解登入過程中涉及的步驟和使用者體驗，請參閱「運作方式」。瞭解個人化按鈕一文會說明影響按鈕向使用者顯示方式的不同條件和狀態。

必要條件

請按照「設定」一節所述步驟設定 OAuth 同意畫面、取得用戶端 ID，然後載入用戶端程式庫。

按鈕算繪

如要顯示「Sign In With Google」按鈕，您可以選擇使用 HTML 或 JavaScript 在登入頁面上顯示按鈕：

HTML

使用 HTML 轉譯登入按鈕，將 JWT 傳回至平台的登入端點。

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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 Tap，請移除 data-auto_prompt="false"。建議您採用這種做法，以減少轉換障礙並提高登入率。

如需完整的資料屬性清單，請參閱 g_id_signin 參考資料頁面

JavaScript

使用 JavaScript 算繪登入按鈕，將 JWT 傳回至瀏覽器的 JavaScript 回呼處理常式。

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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 的第二個參數中指定的屬性進行自訂。

為了盡量減少使用者摩擦，系統會呼叫 google.accounts.id.prompt()，以便顯示 One Tap，做為使用按鈕註冊或登入的第二種替代方式。

GIS 程式庫會剖析 HTML 文件，找出 ID 屬性設為 g_id_onload 的元素，或是包含 g_id_signin 的類別屬性。無論您是否在 JavaScript 中轉譯按鈕，只要找到相符的元素，系統就會使用 HTML 轉譯按鈕。為避免顯示兩個按鈕 (可能會出現衝突的參數)，請勿在 HTML 網頁中加入這些名稱的 HTML 元素。

按鈕語言

按鈕語言會根據瀏覽器的預設語言或 Google 工作階段使用者的偏好設定自動決定。您也可以在載入程式庫時，將 hl 參數和語言代碼新增至 src 指示詞，並在 HTML 中新增選用的 data-locale 或 locale 參數 data-locale，或在 JavaScript 中新增 locale。

HTML

下列程式碼片段說明如何在用戶端程式庫網址中新增 hl 參數，並將 data-locale 屬性設為法文，以便顯示按鈕的語言為法文：

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

下列程式碼片段說明如何在用戶端程式庫網址中新增 hl 參數，並呼叫 google.accounts.id.renderButton 方法，並將 locale 參數設為法文，以便顯示按鈕語言：

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

憑證處理

取得使用者同意後，Google 會將 JSON Web Token (JWT) 憑證 (稱為 ID 權杖) 傳回至使用者的瀏覽器，或直接傳回至平台代管的登入端點。

您選擇接收 JWT 的位置取決於您是使用 HTML 還是 JavaScript 轉譯按鈕，以及是否使用彈出式或重新導向的 UX 模式。

使用 popup UX 模式，即可在彈出式視窗中執行登入 UX 流程。這通常是對使用者干擾較小的體驗，也是預設的 UX 模式。

使用下列方式算繪按鈕：

HTML

您可以設定下列任一項目：

  • data-callback 將 JWT 傳回至回呼處理常式，或
  • data-login_uri，讓 Google 使用 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」。