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

在您的網站中新增「使用 Google 帳戶登入」按鈕，方便使用者註冊或 登入網頁應用程式。使用 HTML 或 JavaScript 顯示按鈕， 屬性來自訂按鈕形狀、大小、文字和主題。

個人化登入按鈕。

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

必要條件

請先完成下列步驟，再將按鈕新增至登入頁面：

按鈕顯示

如要顯示「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 網頁上的這些名稱進行比對

按鈕語言

按鈕語言會根據瀏覽器的預設語言或 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 將 JWT 直接傳送至您的登入資訊 透過 POST 要求建立端點

如果同時設定這兩個值，則 data-callback 的優先順序高於 data-login_uri。使用回呼時，同時設定這兩個值可能有幫助 以便偵錯

JavaScript

您必須指定 callback，因為彈出式模式不支援在 JavaScript 中轉譯按鈕時的重新導向。如果設定此屬性，則系統會忽略 login_uri。

請參閱處理傳回的憑證回應，進一步瞭解如何解碼 JS 回呼處理常式中的 JWT。

重新導向模式

使用 redirect 使用者體驗模式透過完整頁面執行登入使用者體驗流程 使用者的瀏覽器，而 Google 會將 JWT 直接傳回至 登入端點。POST 要求。 這對使用者來說通常是較侵入性的體驗，但這項方法被視為最安全的登入方式。

使用下列方式算繪按鈕：

  • HTML：可選擇將 data-login_uri 設為登入端點的 URI。
  • JavaScript 可選擇將 login_uri 設為登入端點的 URI。

如未提供值，Google 會將 JWT 傳回目前 URI 的 URI 頁面。

您的登入端點 URI

設定 data-login_uri 或 login_uri 時，請使用 HTTPS 和絕對 URI。例如：https://example.com/path。

只有在開發期間使用 localhost 時，才允許使用 HTTP：http://localhost/path。

如需 Google 規定和驗證規則的完整說明，請參閱「使用安全的 JavaScript 來源和重新導向 URI」。