在網站上新增「使用 Google 帳戶登入」按鈕，讓使用者註冊或登入網頁應用程式。使用 HTML 或 JavaScript 算繪按鈕和屬性，自訂按鈕形狀、大小、文字和主題。
使用者選取 Google 帳戶並提供同意聲明後，Google 會使用 JSON Web Token (JWT) 分享使用者設定檔。如要瞭解登入期間的步驟和使用者體驗，請參閱「運作方式」。瞭解個人化按鈕：查看影響按鈕向使用者顯示方式的不同條件和狀態。
必要條件
請按照「設定」一文所述的步驟，設定 OAuth 同意畫面、取得用戶端 ID，並載入用戶端程式庫。
按鈕顯示情況
如要顯示「使用 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()，顯示「一鍵登入」按鈕，做為註冊或登入的第二個替代方案。
GIS 程式庫會剖析 HTML 文件，找出 ID 屬性設為 g_id_onload 的元素，或包含 g_id_signin 的類別屬性。如果找到相符的元素，系統會使用 HTML 轉譯按鈕，無論您是否也在 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 會將稱為 ID 權杖的 JSON Web Token (JWT) 憑證傳回使用者的瀏覽器，或直接傳送至平台代管的登入端點。
您選擇接收 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」。