服务器端用户同意流程
引言
有时需要依赖外部服务器进行同意，因为需要在多个平台之间同步用户同意。此示例演示了如何使用 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 上编辑示例