此页面由 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。