可以在您自己的网站托管的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页面中。
不允许使用自定义JS库或代码。
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()
方法两次。
完成“一键式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。