示例：外部用户同意流程 - 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 可以通过 postMessages 将用户的选择告知 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