AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 网站

服务器端用户同意流程

在 Playground 中打开

简介

有时，由于需要在多个平台之间同步用户同意，因此有必要依赖外部服务器进行同意。此示例演示了如何使用 amp-consent 来实现此目的。在此示例中，我们将构建一个同意对话框，该对话框仅根据来自外部服务器的同意状态显示。

设置

我们需要导入 amp-consent 扩展程序...

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

我们定义了一个基本的服务器端同意流程，类似于 此示例。仅当服务器响应 consentRequired 为 true 且此用户没有 consentStateValue 或 consentString 时，才应触发该流程。

当用户访问 AMP 页面时，amp-consent 将检查本地存储中是否存在现有的同意状态。如果存在同意状态，它将解除阻止所有组件。否则，它将等待来自 checkConsentHref 的响应（因为 consentRequired 设置为“remote”），以确定是否需要同意/是否存在现有的同意状态。如果存在现有的同意状态，则 amp-consent 将使用该值并解除阻止。否则，它将显示 promptUi。

对于可以管理自身同意（通过外部页面）的站点，建议的设计是使用以下响应进行响应

{
  "consentRequired": true,
  "consentStateValue": "accepted"/"rejected"/"unknown",
  "consentString": "example-string"
}

如果您需要更新它以进行同步，请在您的响应中使用 expireCache: true 来清除本地存储的同意决定。此外，当用户直接在页面上管理其同意时，可以使用 onUpdateHref。

<amp-consent id="myUserConsent" layout="nodisplay">
  <script type="application/json">{
    "consentInstanceId": "server-side-consent",
    "consentRequired": "remote",
    "checkConsentHref": "https://amp.org.cn/documentation/examples/api/get-consent-server-side",
    "promptUI": "myConsentFlow"
  }</script>
  <div id="myConsentFlow" class="popupOverlay">
    <div class="consentPopup">
      <div class="dismiss-button" role="button" tabindex="0" on="tap:myUserConsent.dismiss">X</div>
      <h2>Headline</h2>
      <p>If the server says you have not made a consent decision, we require you to make a choice.</p>
      <button on="tap:myUserConsent.accept">Accept</button>
      <button on="tap:myUserConsent.reject">Reject</button>
    </div>
  </div>
  <div id="post-consent-ui">
    <button on="tap:myUserConsent.prompt()">Update Consent</button>
  </div>
</amp-consent>
需要进一步解释？

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

转到 Stack Overflow
一个未解释的功能？

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

在 GitHub 上编辑示例