如何在AMP页面实现AMP-Consent组件流程及端点与XHR触发？

我来帮你梳理AMP-Consent组件的完整实现流程，包括前端配置、后端端点处理以及XHR请求触发的细节，刚好能匹配你提到的Cookie政策合规需求：

首先要在AMP页面中引入组件并搭建核心的 consent 弹窗逻辑，这是用户交互的入口：

<!DOCTYPE html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP Consent 示例</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- 引入AMP-Consent组件 -->
  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  
  <!-- 自定义弹窗样式 -->
  <style amp-custom>
    .consent-dialog {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      padding: 20px;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    .post-consent {
      padding: 10px;
      background: #f5f5f5;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- 核心AMP-Consent组件 -->
  <amp-consent id="consent" layout="nodisplay" consentRequired="true">
    <script type="application/json">
      {
        "promptUI": "consent-dialog",
        "postPromptUI": "post-consent-message",
        "onUpdateHref": "https://your-domain.com/amp-consent-endpoint"
      }
    </script>

    <!-- 用户选择弹窗 -->
    <div id="consent-dialog" class="consent-dialog">
      <h3>Cookie权限请求</h3>
      <p>我们使用Cookie来优化你的浏览体验，你可以选择同意或拒绝非必要Cookie。</p>
      <button on="tap:consent.accept()">同意所有</button>
      <button on="tap:consent.reject()">拒绝非必要</button>
    </div>

    <!-- 用户选择后的提示栏 -->
    <div id="post-consent-message" class="post-consent">
      <p>感谢你的选择！</p>
      <button on="tap:consent.prompt()">修改Cookie设置</button>
    </div>
  </amp-consent>

  <!-- 页面主体内容（用户完成选择后才会显示） -->
  <h1>我的AMP页面内容</h1>
  <p>这里是页面的核心内容，只有用户完成Cookie权限选择后才会正常展示。</p>
</body>
</html>

关键配置说明：

• consentRequired="true"：强制用户完成选择后才显示页面内容（如果不需要强制隐藏，可设为false自行控制内容加载逻辑）
• onUpdateHref：指定用户做出选择后触发XHR请求的后端端点地址
• promptUI/postPromptUI：分别关联弹窗和选择后的提示UI元素

AMP会在用户点击同意/拒绝后，向onUpdateHref指定的地址发送POST请求，你需要在后端处理这个请求，记录用户的 consent 状态并设置Cookie：

以下是Node.js + Express的示例代码：

const express = require('express');
const app = express();
app.use(express.json());

// 处理AMP-Consent请求的端点
app.post('/amp-consent-endpoint', (req, res) => {
  // 解析AMP发送的参数
  const { action, consentState } = req.body;
  
  // 设置Cookie记录用户选择，有效期设为1年
  res.cookie('amp_consent_status', action, {
    maxAge: 365 * 24 * 60 * 60 * 1000,
    secure: true, // 生产环境开启HTTPS时必须设置
    httpOnly: true, // 防止前端脚本篡改
    sameSite: 'Lax' // 符合Cookie政策要求
  });

  // 配置CORS响应头，允许AMP页面跨域请求
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  
  // 返回成功响应
  res.status(200).json({ status: 'success', message: 'Consent status saved' });
});

app.listen(3000, () => console.log('Consent服务运行在3000端口'));

端点注意事项：

• 必须配置CORS：因为AMP页面从Google CDN加载，属于跨域请求，需允许请求来源并开启 credentials
• 必须设置Cookie：后续AMP页面会读取这个Cookie判断用户的选择状态，避免重复弹窗
• 响应必须是JSON格式：AMP会解析响应确认请求是否成功

• 第三方脚本控制：如果需要在用户同意后加载广告、统计等脚本，可给这些组件添加data-block-on-consent属性，比如<amp-ad data-block-on-consent ...>
• 自定义 consent 状态：如果需要更细粒度的权限控制（比如区分必要/非必要Cookie），可以在amp-consent的配置中添加purposeConfig自定义逻辑
• 测试验证：可以通过AMP开发者工具（Chrome插件）模拟不同的 consent 状态，验证页面行为是否符合预期

内容的提问来源于stack exchange，提问作者Christian Felix