示例：外部用户同意流程 - amp.dev

外部用户同意流程
- 简介设置定义同意流程同意对话框 Iframe

网站

简介

有时，发布商希望使用带有 iframe 的外部提示 UI 流程来收集用户同意。此示例演示了如何将 amp-consent 与 amp-iframe 一起使用来实现此目的。在此示例中，我们将从 iframe 构建一个同意对话框。

设置

我们需要导入 amp-consent ...

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

... 以及 amp-iframe 扩展程序。

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

我们定义一个基本的同意流程，类似于此示例。同意对话框来自使用 amp-iframe 组件加载的 CORS iframe

<amp-consent id="myUserConsent" layout="nodisplay">
  <script type="application/json">{
    "consentInstanceId": "iframe-consent",
    "checkConsent": "remote",
    "checkConsentHref": "/documentation/examples/api/get-consent",
    "promptUI": "myConsentFlow",
    "postPromptUI": "post-consent-ui"
  }</script>
  <div id="myConsentFlow" class="popupOverlay">
    <div class="consentPopup">
      <amp-iframe layout="fill" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" src="/static/samples/files/external-consent-iframe.html">
          <div placeholder>Loading</div>
      </amp-iframe>
    </div>
  </div>
  <div id="post-consent-ui">
    <button on="tap:myUserConsent.prompt()">Update Consent</button>
  </div>
</amp-consent>

同意对话框 iframe 可以通过 postMessage 将用户的选择通知 amp-consent 组件。

window.parent.postMessage({
  type: 'consent-response',
  action: 'accept'
}, '*');

此处的操作可以是 'accept'、'reject' 或 'dismiss'。

使用 data-block-on-consent 属性阻止 AMP 组件，直到获得同意为止。各个 AMP 组件可以覆盖阻止行为并自行实现阻止逻辑。

这是一个在获得同意之前被阻止的图像

<amp-img data-block-on-consent src="/static/samples/img/landscape_lake_300x201.jpg" width="300" height="201">
</amp-img>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别关注的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @zhouyx 编写

外部用户同意流程

简介

设置

定义同意流程

同意对话框 Iframe