用户许可
简介
此示例展示如何在 AMP Stories 中集成 amp-consent，以便为用户提供对数据共享和 Cookie 的控制。
设置
导入 amp-story 扩展以创建 AMP Story...
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
...以及 amp-consent 扩展。
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
在 AMP Story 中实施用户许可
amp-consent 将在许可对话框中显示由 publisher-logo-src 指定的徽标。
<amp-story standalone
title="Story With User Consent"
publisher="Google"
poster-portrait-src="https://amp.org.cn/img/story_video_dog_cover.jpg"
publisher-logo-src="https://amp.org.cn/static/samples/img/amp_logo_pink.svg">
amp-consent 组件支持通过 checkConsentHref 属性指定 CORS 端点，该组件通过 POST 请求查询该端点，以确定是否需要显示为其指定的许可 UI。响应应如下所示：
{ "consentRequired": boolean (required), "consentStateValue": enum (accepted/rejected/unknown) (optional), "consentString": string (optional), "expireCache": boolean (default false), }
响应将指示是否需要显示许可。如果需要显示，则会显示 promptUI 中给定的 ID 的元素。对于 AMP Stories，您可以在嵌套的 amp-story-consent 元素内指定许可标题、消息和供应商列表。
<amp-consent id="myConsent" layout="nodisplay">
<script type="application/json">
{
"consents": {
"myConsent": {
"consentInstanceId": "my-amp-story-consent",
"consentRequired": "remote",
"checkConsentHref": "/documentation/examples/api/get-consent",
"promptUI": "consentUI"
}
}
}
</script>
<amp-story-consent id="consentUI" layout="nodisplay">
<script type="application/json">
{
"title": "Headline",
"message": "This is some more information about this choice. Here's a list of items related to this choice.",
"vendors": ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"]
}
</script>
</amp-story-consent>
</amp-consent>
演示：amp-consent 在 amp-story 中
当故事开始时，许可对话框将作为叠加层显示。
需要进一步解释吗？
如果此页面上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的确切用例。
前往 Stack Overflow 一个未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但也欢迎您为自己特别关注的问题做出一次性贡献。
在 GitHub 上编辑示例-