使用 iframe 集成一键快捷功能

Google One Tap 可以呈现在 iframe（下文称为中间 iframe）。没有任何可感知的使用中间 iframe 时，一键式用户体验的变化。

基于 iframe 的中间集成会带来一些灵活性和风险：

一键式嵌入式用户体验及后续用户体验流程。

完成一键式用户体验后，您可以在中间 iframe。因此，一键快捷界面和后续用户体验都可以嵌入到当前内容页面中。以下是一个示例。

如果没有中间 iframe，通常情况下，您需要用整个网页来导航至显示后续用户体验流程，这在某些情况下可能会造成干扰。
只需集成一次，即可随时随地全面展示。

所有一键式集成代码（一键快捷 API 调用和后续用户体验）处理）封装在中间 iframe 中。在内容页面上您只需要嵌入中间 iframe。

此架构有助于分离关注点，从而降低您的集成和维护成本。
限制 ID 令牌披露范围。

ID 令牌直接由中间 iframe 使用。它们分别是从未在内容网页上看到过的广告。这种架构缩小 ID 令牌暴露范围。

中级 iframe 方法也适用于与登录相关的专用子网域（例如 login.example.com）以及多个与内容相关的子网域（例如 sports.example.com 和 games.example.com）。
一键显示域名。

按照 Google 的 OAuth 政策的要求，收到 OAuth 的所有网域需要在 Google Cloud 控制台中预注册。配普通 1 点按集成，开发者需要预注册所有可使用一键快捷功能的网域因为 ID 令牌将回传到这些网域。部分网站允许用户动态创建子网域，因而无法进行预注册因此，一键无法显示在以下位置：这些动态创建的子网域。

您可以使用中间 iframe 解决此问题。在此示例中只需预注册中间 iframe 的网域即可。那里则不需要注册内容页域，因为 ID 令牌显示的内容页面
隐私风险。

开发者必须采取措施来防止中间 iframe 嵌入非预期域中的。例如，恶意.com 可能会将您的中间 iframe，从而在其网站上显示您的一键式用户体验。这个肯定会引起最终用户的很多隐私顾虑。

警告：后续用户体验也容易发生意外的取景。攻击者可能会伪造网址，以便直接嵌入后续用户体验的一个界面。是请务必在后续用户体验的每一步中验证父级 iframe 来源。
要点：从以下应用中调用 verifyParentOrigin API 来验证父级来源：中级 iframe 支持库后续用户体验流程。
注意：显示一键快捷功能时，无需调用 verifyParentOrigin API。一键快捷功能已在执行验证。仅调用 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 中呈现后续用户体验

在登录响应中，您可以返回任何 HTML 代码，向最终用户显示的内容例如，请求额外的个人资料信息或同意服务条款。提交网页后，您可以显示更多网页。例如，对于付款或订阅。

您可以调整中间 iframe 的大小：

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

总而言之，借助中间 iframe，完整的登录或注册用户体验流程实现为嵌入式用户体验

对于一键式用户体验后的第一个页面，您需要调用 notifyParentResize() 方法两次。

完成一键式用户体验后，中间 iframe 会设置为隐藏。
元素处于隐藏状态时，其 offsetHeight 属性值为 0。

在第一次调用中，您可以将 iframe 高度调整为 1px，可见。然后，在 offsetHeight 属性值可用后，您可以将它调整为合适的高度

以下示例代码展示了如何验证父源并调整一键式用户体验后界面的中间 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。