在網站中加入 One Tap 提示，讓使用者能夠註冊或登入您的網頁應用程式。使用 HTML 和 JavaScript 算繪及自訂提示。
必要條件
請按照「設定」一節所述步驟設定 OAuth 同意畫面、取得用戶端 ID，然後載入用戶端程式庫。
在登入頁面中加入「使用 Google 帳戶登入」按鈕。
提示顯示
在您要顯示 One Tap 的任何網頁中加入程式碼片段。
HTML
顯示 One Tap 提示，將 JWT 憑證傳回登入端點。
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
data-login_uri 屬性是網頁應用程式登入端點的 URI。您可以新增自訂資料屬性，這些屬性會連同 Google 核發的 ID 權杖傳送至登入端點。
使用 data-context 屬性變更提示標題中使用的文字。舉例來說，data-context: "signup" 會將「Sign in to」變更為「Sign up to」。
如需完整的支援屬性清單，請參閱 g_id_onload 參考資料。
JavaScript
顯示 One Tap 提示，將 JWT 憑證傳回至瀏覽器的 JavaScript 回呼處理常式。
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
如要在 JavaScript 中設定 One Tap 提示，您必須先呼叫 initialize() 方法。接著，呼叫 prompt() 方法來顯示提示 UI。
使用 context 欄位變更提示標題中使用的文字。舉例來說，context: 'signup' 會將「Sign in to」變更為「Sign up to」。
如需資料選項的完整清單，請參閱 idConfiguration 參考資料。
提示狀態
使用 JavaScript 回呼函式，監聽提示 UI 狀態通知。
系統會在下列時刻傳送通知：
顯示時刻：這是在呼叫
prompt()方法後發生的事件。通知包含布林值，用於指出是否顯示 UI。略過時刻：當 One Tap 提示訊息因自動取消、手動取消，或 Google 無法核發憑證而關閉時，就會發生這種情況，例如當所選工作階段已登出 Google 時。
在這種情況下，建議您繼續使用其他身分識別服務供應商 (如有)。
Dismissed moment：當 Google 成功擷取憑證，或使用者想要停止憑證擷取流程時，就會發生這個事件。舉例來說，當使用者開始在登入對話方塊中輸入使用者名稱和密碼時，您可以呼叫
google.accounts.id.cancel()方法來關閉 One Tap 提示，並觸發已關閉的狀態。
HTML
請使用 data-moment_callback 屬性指定 JavaScript 回呼函式。您必須使用回呼處理常式才能接收通知。
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
為方便使用者登入或註冊，您可以與多個身分識別服務供應商聯絡，找出可用的憑證。您可能需要瞭解提示 UI 狀態，才能呼叫下一個 ID 提供者。
JavaScript
將回呼處理常式做為參數傳遞至 google.accounts.id.prompt，此處的箭頭函式用於處理通知更新。
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
按鈕和提示
「使用 Google 帳戶登入」按鈕和 One Tap 提示可能會在同一頁面上顯示。
HTML
同時加入 g_id_onload 和 g_id_signin 元素，即可顯示「使用 Google 帳戶登入」按鈕和 One Tap 提示。
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
同時呼叫 renderButton() 和 prompt() 函式，顯示「使用 Google 帳戶登入」按鈕和 One Tap 提示。
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
不要遮住 One Tap
本節僅適用於停用 FedCM 的情況，如果啟用 FedCM，瀏覽器會在頁面內容頂端顯示使用者提示。
為確保使用者能看到所有顯示資訊，Google One Tap 不得被任何其他內容遮蓋。否則在某些情況下可能會觸發彈出式視窗。
請仔細檢查頁面版面配置和元素的 z-index 屬性，確保 Google One Tap 不會在任何時間遭到任何其他內容遮蓋。即使邊框中只有一個像素遭到遮蓋，UX 流程變更也可能會觸發。
憑證回應
憑證回應中包含 Google 簽署的 JWT。回應會透過 JavaScript 回呼函式傳回至瀏覽器，或是透過重新導向至登入端點傳回至您的平台。
JS 回呼
使用 HTML 或 JavaScript 設定回呼。
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
舉例來說，handleCredentialResponse 會解碼 JWT，並將部分 ID 權杖欄位列印到控制台。
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
重新導向
如要將憑證傳回平台的登入端點，請將網址新增至 OAuth 2.0 網路用戶端的「已授權的重新導向 URI」設定。
使用 HTML 或 JavaScript 設定重新導向 URI。
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});