使用 iframe 整合 One Tap

Google One Tap 可在 iframe 中顯示 (以下稱為中繼 iframe)。根本沒有在使用中繼 iframe 時變更 One Tap 使用者體驗。

以中階 iframe 為基礎的整合可帶來彈性和風險：

適用於 One Tap 和後續使用者體驗流程的嵌入式使用者體驗。

One Tap 使用者體驗完成後，您可以在中繼 iframe。因此，你可以同時將 One Tap 和後續使用者體驗將內容整合至目前的內容網頁請參閱下方的範例。

如果沒有中繼 iframe，通常需要透過整頁瀏覽的方式顯示後續的使用者體驗流程，在某些情況下可能會幹擾使用者。
整合一次，並在任何地方顯示。

所有 One Tap 整合程式碼 (One Tap API 叫用和後續使用者體驗) 參數) 會封裝在中繼 iframe 中。在內容網頁上 One Tap 可以顯示其中內容，你只需嵌入中繼 iframe。

這種架構可讓關注點分離，進而減少您的整合與維護成本
限制 ID 權杖曝光範圍。

ID 符記會直接由中繼 iframe 使用。這些一律不接觸到內容頁面這種做法減少 ID 權杖曝光範圍

中階 iframe 也適合已擁有與登入相關的專屬子網域 (例如 login.example.com) 和內容相關的子網域 (例如 sports.example.com 和 game.example.com)。
One Tap 顯示網域。

根據 Google 的 OAuth 政策規定，所有接收 OAuth 的網域都必須符合則需要在 Google Cloud 控制台中預先註冊。與一般規則一較高下輕觸「整合」，開發人員必須預先註冊所有使用 One Tap 的網域可能會顯示，因為 ID 權杖會回傳至這些網域。只有部分通知網站能讓使用者動態建立子網域因此無法預先註冊因此，One Tap 無法在這些動態建立的子網域

使用中繼 iframe 即可修正這個問題。在本例中只需預先註冊中繼 iframe 的網域。有不必註冊內容網頁的網域，因為 ID 權杖不需要看到的內容網頁
隱私權風險。

開發人員必須採取相關措施，嵌入到非預期的網域舉例來說，Malware.com 可能會將中間 iframe，然後在對方的網站上顯示 One Tap 使用者體驗。這個絕對會讓使用者產生許多隱私權疑慮。

警告： 後續的使用者體驗也會受到非預期的取景影響。攻擊者可能會偽造網址，以便直接嵌入後續使用者體驗的 UI。成為請務必在後續使用者體驗的每個步驟中驗證上層 iframe 來源。
重點： 透過verifyParentOrigin 導入中繼 iframe 支援資料庫後續的使用者體驗流程。
注意： 顯示 One Tap 時，不需要呼叫 verifyParentOrigin API。 One Tap 已經執行驗證了。只將 verifyParentOrigin API。
安全風險。

由於上述未預期的取景問題，您的中階 iframe 不得將安全性或隱私權私密資料傳送給上層例如 ID 權杖、工作階段 Cookie 值、使用者資料等遵守這項規則，或許會危及網站的安全。

警告： 中繼 iframe 不得傳送 OAuth 權杖和工作階段 Cookie 或使用者資料傳送給父項頁框。

在中繼 iframe 中顯示 One Tap

如要在中繼 iframe 中顯示 One Tap，請加入下列程式碼將程式碼片段插入中繼 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 中顯示後續使用者體驗

在登入回應中，您可以傳回任何可能顯示的 HTML 程式碼，向使用者顯示的內容例如要求額外的個人資料或同意《服務條款》提交網頁後，即可顯示更多網頁。例如付款或訂閱。

您可以調整中繼 iframe 的大小：

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

簡單來說，使用中階 iframe 之後，完整的登入或註冊 UX 流程嵌入使用者體驗

如果是 One Tap 使用者體驗後顯示的第一頁，則必須呼叫 notifyParentResize() 方法兩次。

One Tap UX 作業完成後，中繼 iframe 會設為隱藏。
隱藏元素的 offsetHeight 屬性值是 0。

第一次呼叫時，您可以將 iframe 高度調整為 1 像素，顯示。接著，您可以使用 offsetHeight 屬性值並調整大小到適合的高度

以下程式碼範例說明如何驗證父項來源，並調整採用 One Tap 使用者體驗後使用者介面的中繼 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>

移除使用者體驗中的中階 iframe

您必須在發生以下情況時通知上層內容頁面，移除中繼 iframe 完成使用者體驗流程這時，您可以將以下程式碼片段您的登入回應代碼。

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

如果略過使用者體驗流程，就需要呼叫 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。