警告:此数据是根据Google用户数据政策提供的。请查看并遵守政策。否则可能会导致项目或帐户被暂停。

通过iframe集成一键式

可以在您自己的网站托管的iframe(以下称为“中级iframe”)中渲染Google One Tap。使用中间iframe时,One Tap UX上没有任何可感知的变化。

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

  • 一键式嵌入式UX和后续的UX流程

    完成“一键式UX”后,您可以在中间iframe中显示后续的UX流。因此,一键式和后续UX都可以嵌入到当前内容页面中。请参阅下面的示例。

    具有中间iframe的嵌入式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。这肯定会引起最终用户的大量隐私问题。

  • 安全风险

    由于上述意外的框架问题,您的中间iframe绝对不要将安全性或隐私敏感数据发送到其父框架,例如ID令牌,会话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()方法两次。

  1. 完成“一键式UX”操作后,中间iframe将设置为隐藏。

  2. 隐藏元素的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。