本頁面由 Cloud Translation API 翻譯而成。

通過iframe集成一鍵式

可以在您自己的網站託管的iframe（以下稱為“中級iframe”）中渲染Google One Tap。使用中間iframe時，One Tap UX上沒有任何可感知的變化。

基於中間iframe的集成帶來了一些靈活性和風險：

一鍵式嵌入式UX和後續的UX流程。
完成“一鍵式UX”後，您可以在中間iframe中顯示後續的UX流。因此，一鍵式和後續UX都可以嵌入到當前內容頁面中。請參閱下面的示例。
如果沒有中間iframe，通常您需要整頁導航才能顯示後續的UX流，這在某些情況下可能會帶來干擾。
集成一次，並在任何地方顯示。
所有的One Tap集成代碼（One Tap API調用和後續的UX處理）都封裝在中間iframe中。在可能顯示“一鍵式”的內容頁面上，您需要做的就是嵌入中間iframe。
這種體系結構允許關注點分離，從而降低了集成和維護成本。
限制ID令牌的暴露範圍。
中間iframe直接使用ID令牌。它們從不暴露於內容頁面。這種體系結構可能會大大減少ID令牌的暴露範圍。
中間iframe方式也適用於已經具有專用的與登錄相關的子域（例如，login.example.com）和多個與內容相關的子域（例如，sports.example.com和games.example.com）的網站。
一鍵式顯示域。
根據Google的OAuth政策的要求，所有接收OAuth響應的域都必須在Google API控制台中預先註冊。使用常規的One Tap集成，開發人員需要預先註冊One Tap可能顯示的所有域，因為ID令牌將傳遞回這些域。一些網站允許其用戶動態創建子域，而這些子域是無法預先註冊的。如此一來，一鍵式便無法顯示在這些動態創建的子域中。
可以通過利用中間iframe來解決此問題。在這種情況下，僅中間iframe的域需要預先註冊。無需註冊內容頁面域，因為ID令牌不會暴露給這些內容頁面。
AMP支持。
默認情況下，由於以下某些原因，Google One Tap無法顯示在AMP頁面中。
1. 不允許使用自定義JS庫或代碼。
2. AMP緩存可以使頁面形成另一個（AMP Viewer）域。
可以通過利用中間iframe架構來解決此問題。在中間iframe中完成One Tap集成後，開發人員可以通過添加<amp-onetap-google>組件將其嵌入AMP頁面。
AMP頁面和非AMP HTML頁面都可以重複使用相同的中間iframe。
隱私風險。
開發人員必須採取措施，以防止將中間iframe嵌入到意外域中。例如，malware.com可能會嵌入您的中間iframe，從而在其網站上不顯示One Tap UX。這肯定會引起最終用戶的大量隱私問題。
警告：您後續的UX也將暴露於意外的幀中。攻擊者可能偽造一個URL，以便直接嵌入後續UX的一個UI。請確保在後續UX的每個步驟中驗證父iframe的來源。
關鍵點：在後續UX流程的每個步驟上，通過從中間iframe支持庫調用verifyParentOrigin API來驗證父源。
注意：顯示“一鍵式”時無需調用verifyParentOrigin API。一鍵式已經執行了驗證。在實施後續的UX時，僅調用verifyParentOrigin API。
安全風險。
由於上述意外的框架問題，您的中間iframe絕對不要向其父框架發送安全性或隱私敏感數據，例如ID令牌，會話cookie值，用戶數據等。不遵守此規則可能會使您的網站危險。
警告：中間iframe不得將OAuth令牌，會話Cookie值或用戶數據發送到其父框架。

在中間iframe中渲染一鍵

要在中間iframe中顯示“一鍵式”，請將以下代碼段放入中間iframe的HTML代碼中：

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

如果顯示data-allowed_parent_origin屬性，則Google One Tap將在中間iframe模式下運行。您可以將一個域或逗號分隔的域列表設置為屬性值。還支持通配符子域。

（可選）在中間iframe中渲染後續UX

在登錄響應中，您可以返回任何HTML代碼，這些代碼可能會向最終用戶顯示一些可見的內容。例如，要求提供其他個人資料信息或就TOS達成協議等。提交頁面後，您可以顯示其他頁面。例如，用於付款或訂閱等。

您還可以選擇調整中間iframe的大小，如下所示。

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

總之，使用中間iframe，可以將完整的登錄或註冊UX流實現為嵌入式UX。

對於One Tap UX之後的第一頁，由於以下原因，您需要調用notifyParentResize()方法兩次。

完成“一鍵式UX”操作後，中間iframe將設置為隱藏。
隱藏元素的offsetHeight屬性值為0。

在第一個調用中，您可以將iframe的高度調整為1px，以使其可見。然後，在offsetHeight屬性值可用之後，可以將其調整為合適的高度。

以下示例代碼顯示了在One Tap UX之後如何驗證父源和為UI調整中間iframe的大小。

<script>
    window.onload = () => {
      google.accounts.id.intermediate.verifyParentOrigin(
          ["https://example.com","https://example-com.cdn.ampproject.org"],
          () => {
            google.accounts.id.intermediate.notifyParentResize(1);
            window.setTimeout(() => {
              let h = document.getElementById('container').offsetHeight;
              google.accounts.id.intermediate.notifyParentResize(h);
            }, 200);
          },
          () => {
            document.getElementById('container').style.display = 'none';
            document.getElementById('warning').innerText =
                'Warning: the page is displayed in an unexpected domain!';
          }
      );
    };
</script>

刪除UX完成後的中間iframe

UX流完成後，您必須通知父內容頁面以刪除中間iframe。為此，您可以在登錄響應代碼中放置以下代碼段。

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

如果跳過UX流，則需要改為調用notifyParentClose方法。

將中間Iframe嵌入HTML頁面

將以下代碼段放入您希望Google One Tap顯示的任何HTML頁面中：

<script src="https://accounts.google.com/gsi/intermediate"></script>
...
<div id="g_id_intermediate_iframe"
        data-src = "https://example.com/onetap_iframe.html">
</div>

data-src屬性是中間iframe的URI。