在網站中新增「使用 Google 帳戶登入」按鈕，讓使用者可以註冊或登入網頁應用程式。使用 HTML 或 JavaScript 轉譯按鈕和屬性，藉此自訂按鈕形狀、大小、文字和主題。
使用者選取 Google 帳戶並提供同意聲明後，Google 會使用 JSON Web Token (JWT) 分享使用者個人資料。如需登入和使用者體驗期間相關的步驟總覽，請參閱「運作方式」。瞭解個人化按鈕會查看不同的條件和狀態，藉此影響按鈕向使用者顯示的方式。
必要條件
將按鈕新增到登入頁面之前，請先完成下列操作：
按鈕轉譯
如要顯示「使用 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 或 JavaScript 的語言代碼中加入選用的 data-locale 或語言代碼參數 data-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 轉譯按鈕，以及使用的是彈出式視窗或重新導向使用者體驗模式。
彈出式視窗模式
使用 popup 使用者體驗模式，會在彈出式視窗中執行登入使用者體驗流程。這通常是預設的使用者體驗模式，對使用者體驗的干擾通常較低。
使用以下方式轉譯按鈕時：
HTML
您可以設定下列其中一項：
data-callback將 JWT 傳回您的回呼處理常式，或data-login_uri：讓 Google 使用 POST 要求將 JWT 直接傳送至您的登入端點。
如果同時設定這兩個值，data-callback 的優先順序會高於 data-login_uri。使用回呼處理常式進行偵錯時，設定這兩個值可能會有幫助。
JavaScript
您必須指定 callback，彈出式視窗模式在 JavaScript 中回傳按鈕時不支援重新導向。如果設定，系統會忽略 login_uri。
如要進一步瞭解如何在 JS 回呼處理常式中解碼 JWT，請參閱「處理傳回的憑證回應」。
重新導向模式
使用 redirect 使用者體驗模式時，系統會透過使用者瀏覽器的完整頁面重新導向來執行登入使用者體驗流程，而 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」一文。