顯示 Google One Tap

將下列程式碼片段放入所有要顯示 Google One Tap 的頁面:

<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 參考資料頁面。

不要遮蓋 Google One Tap

只有在 FedCM 停用的情況下,FedCM 才會在啟用 FedCM 的情況下,瀏覽器會在網頁內容上方顯示使用者提示。

為了確保使用者能夠查看所有顯示的資訊,Google One Tap 不得涵蓋任何其他內容。否則在某些情況下,系統可能會觸發彈出式視窗。

仔細檢查網頁版面配置和元素的 Z-index 屬性,確保 Google One Tap 隨時不在任何其他內容涵蓋範圍內。即使只覆蓋了邊框中的一個像素,也可以觸發使用者體驗流程變更。