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

通过 iframe 集成一键快捷功能

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

Google One 点按可在您自己的网站托管的 iframe(以下简称“中间 iframe”)内呈现。使用中间 iframe 时,一键式用户体验没有任何明显的变化。

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

  • 一键嵌入式体验和后续用户体验流程

    完成一键式用户体验后,您可以在中间 iframe 内显示后续的用户体验流程。因此,一键操作和后续用户体验都可以嵌入到当前内容页面中。以下是一个示例。

    具有中间 iframe 的嵌入式用户体验示例。

    如果没有中间 iframe,通常需要进行整页导航才能显示后续的用户体验流程,在某些情况下,这种流程可能会干扰用户。

  • 一次集成,全面展示

    所有一键式集成代码(一键式 API 调用和后续的用户体验处理)都包含在中间 iframe 中。在可能显示一键式内容的网页上,您只需嵌入中间 iframe 即可。

    该架构可将关注点分开,从而降低集成和维护成本。

  • 限制 ID 令牌曝光范围

    ID 令牌直接由中间 iframe 使用。它们从未显示过内容页面。此架构可能会大幅缩小 ID 令牌的曝光范围。

    中间 iframe 方法也非常适合已具有专用登录相关子网域(例如 login.example.com)和多个内容相关子网域(例如 sports.example.com 和 game.example.com)的网站。

  • 一键显示网域

    根据 Google 的 OAuth 政策的要求,所有接收 OAuth 响应的网域都需要在 Google API 控制台中预注册。通过正常的一键集成,开发者需要预注册一键显示的所有网域,因为 ID 令牌将传递回这些网域。某些网站允许其用户动态创建子网域,而这些域名是无法预注册的。因此,一键快捷功能无法在这些动态创建的子网域中显示。

    此问题可通过采用中间 iframe 来解决。在这种情况下,只需注册中间 iframe 的网域即可。您无需注册内容页面网域,因为 ID 令牌不会向这些内容页面公开。

  • AMP 支持

    默认情况下,Google One Tap 无法在 AMP 网页中显示,原因如下。

    1. 不允许使用自定义 JS 库或代码。

    2. AMP 缓存可能会将网页呈现在另一个网域 (AMP Viewer) 网域中。

    此问题可通过采用中间 iframe 架构来解决。 在中间 iframe 中实现一键集成后,开发者可以通过添加 <amp-onetap-google> 组件,将其嵌入到 AMP 网页中。

    AMP 网页和非 AMP HTML 网页可以重复使用相同的中间 iframe。

  • 隐私风险

    开发者必须采取措施,防止中间 iframe 被嵌入到意外的网域中。例如,恶意.com 可能会嵌入您的中间 iframe,从而导致该网站在一键式界面上呈现出不好的效果。这无疑会引起最终用户的大量隐私顾虑。

  • 安全风险

    由于上面提到的意外框架问题,您的中间 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 一键式将在中间 iframe 模式下运行。您可以将一个网域或以英文逗号分隔的网域列表设置为属性值。也支持通配符子网域。

(可选)在中间 iframe 中呈现后续用户体验

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

您还可以选择调整中间 iframe 的大小,如下所示。

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

总之,借助中间 iframe,可将完整登录或注册用户体验流程实现为嵌入式用户体验。

对于一键式用户体验后的第一页,您需要调用两次 notifyParentResize() 方法,原因如下。

  1. 完成一键式用户体验时,中间 iframe 会设为隐藏。

  2. 隐藏某个元素的 offsetHeight 属性值为 0。

在第一次调用中,您可以将 iframe 高度调整为 1 像素以使其可见。然后,在 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。