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

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

個人化登入按鈕。

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

必要條件

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

按鈕顯示

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

HTMLJavaScript

使用 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 算繪登入按鈕,將 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

HTMLJavaScript

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

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

下列程式碼片段說明如何以法文顯示按鈕語言 方法是將 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 模式。

使用以下方式算繪按鈕時:

HTMLJavaScript

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

  • data-callback 將 JWT 傳回至回呼處理常式,或
  • data-login_uri:讓 Google 將 JWT 直接傳送至您的登入資訊 透過 POST 要求建立端點

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

您必須指定 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_urilogin_uri 時,請使用 HTTPS 和絕對 URI。例如:https://example.com/path

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

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