此参考页面介绍了中间 iframe API,该 API 用于使用 iframe 将一键登录提示嵌入到网页中。
如需详细了解如何使用中间 iframe,请参阅使用 iframe 集成一键登录。
加载中间 iframe JavaScript 库
将以下代码段放置在您希望 Google One Tap 显示的任何 HTML 网页中:
<script src="https://accounts.google.com/gsi/intermediate"></script>
HTML API
您可以通过包含一个 ID 属性设置为 g_id_intermediate_iframe
的 HTML 元素来加载中间 iframe。请参阅以下示例代码段:
<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
data-src="https://example.com/onetap_iframe.html">
</div>
ID 为“g_id_intermediate_iframe”的元素
您可以将中间 iframe 数据属性放在任何可见或不可见元素中,例如 <div>
和 <span>
。唯一的要求是将元素 ID 设置为 g_id_intermediate_iframe
。请勿将此 ID 放在多个元素上。
下表列出了数据属性及其说明:
属性 | |
---|---|
data-src |
一键登录中间 iframe 的 URI |
data-done |
在“一键登录”用户体验完成时触发的 JavaScript 回调方法。 |
data-src
此属性是“一键登录”中间 iframe 的 URI。如需了解详情,请参阅下表:
类型 | 是否必须提供 | 示例 |
---|---|---|
字符串 | 是 | data-src="https://example.com/onetap_iframe.html" |
data-done
此属性是一个 JavaScript 回调方法,在完成一键式用户体验时触发。
默认情况下,当一键登录用户体验完成时,内容页面会重新加载。您可以通过提供自己的完成回调来替换默认行为。如需了解详情,请参阅下表:
类型 | 是否必须提供 | 示例 |
---|---|---|
函数 | 可选 | data-done="onOneTapSuccess" |
JavaScript API
您可以通过调用 JavaScript 方法来加载中间 iframe。
方法:google.accounts.id.initializeIntermediate
google.accounts.id.initializeIntermediate
方法会根据配置对象加载中间 iframe。请参阅以下方法代码示例:
google.accounts.id.initializeIntermediate(IntermediateConfig)
以下代码示例使用 onload
函数实现了 google.accounts.id.initializeIntermediate
方法:
<script>
window.onload = function () {
google.accounts.id.initializeIntermediate({
src: 'https://example.com/intermediate'
});
};
</script>
数据类型:IntermediateConfig
下表列出了各个字段及其说明:
字段 | |
---|---|
src |
一键登录中间 iframe 的 URI |
done |
当单点触控用户体验处于“开启”状态时要触发的 JavaScript 回调方法。 |
src
此字段是您的 One Tap 中间 iframe 的 URI。如需了解详情,请参阅下表:
类型 | 是否必须提供 | 示例 |
---|---|---|
字符串 | 是 | src: "https://example.com/onetap_iframe.html" |
完成
此字段是当一键登录界面完成时要触发的 JavaScript 回调方法。
默认情况下,当一键登录用户体验完成时,内容页面会重新加载。您可以通过提供自己的完成回调来替换默认行为。如需了解详情,请参阅下表:
类型 | 是否必须提供 | 示例 |
---|---|---|
函数 | 可选 | done: onOneTapSuccess |