在網站中加入 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 權杖傳送至登入端點。
如需完整的支援屬性清單，請參閱 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。
如需資料選項的完整清單，請參閱 idConfiguration 參考資料。
提示狀態
如要接收提示 UI 狀態通知，請為 prompt() 方法提供回呼函式。
HTML
您必須使用 JavaScript 回呼處理常式，才能接收通知。
JavaScript
這裡使用箭頭函式處理通知更新。
<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 流程變更也可能會觸發。