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 将检查 localStorage 中是否存在现有的许可状态。如果存在许可状态，它将解除阻止所有组件。否则，它将等待来自 checkConsentHref 的响应（因为 consentRequired 设置为“remote”），以确定是否需要许可/是否存在现有许可状态。如果存在现有许可状态，amp-consent 将使用该值并解除阻止。否则，它将显示 promptUi。

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

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

如果您需要更新许可决定以进行同步，请在响应中使用 expireCache: true 来清除 localStorage 许可决定。此外，当用户直接在页面上管理其许可时，可以使用 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 上编辑示例