使用Auth0登录AMP页面后，如何获取并提取JWT负载中的属性？

我之前刚好处理过AMP + Auth0的登录场景，非常理解你现在的困扰——AMP的沙箱限制确实会让直接获取和解析JWT变得棘手。这里给你几个经过验证的解决方案：

方案1：利用Auth0 AMP集成的内置属性传递 #

Auth0的amp-auth0组件本身支持在登录成功后暴露用户属性，不需要手动解析JWT。具体步骤：

• 在Auth0控制台的**规则（Rules）**中，确保你需要的属性被添加到idToken的payload里。比如添加一条规则：

  function (user, context, callback) {
    context.idToken['your-target-property'] = user.app_metadata.yourProperty;
    callback(null, user, context);
  }
  

• 在你的AMP页面的amp-auth0配置中，指定要获取的用户字段：

  <amp-auth0
    client-id="YOUR_AUTH0_CLIENT_ID"
    domain="YOUR_AUTH0_DOMAIN"
    redirect-uri="YOUR_AMP_PAGE_URL"
    scope="openid profile email"
    response-type="id_token token"
  >
  </amp-auth0>
  

• 登录成功后，你可以直接在AMP页面中通过AMP的绑定语法引用该属性：

  <p>你的目标属性值：{{auth0.user.your-target-property}}</p>
  

方案2：用amp-script安全解析JWT #

如果方案1无法满足需求（比如需要获取payload里的自定义字段），可以用AMP官方允许的amp-script组件来解析JWT：

• 首先确保你的AMP页面引入了amp-script组件：

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

• 编写内联或托管的脚本（注意要符合AMP的CSP规则，内联脚本需要添加data-ampscript-src属性）：

  <amp-script layout="container" data-ampscript-src="sha256-你的脚本哈希值">
    <script type="text/plain" target="amp-script">
      function parseJwt(token) {
        // 解析JWT payload的安全方法，避免base64解码的兼容性问题
        const base64Url = token.split('.')[1];
        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        const decoded = decodeURIComponent(atob(base64).split('').map(c => 
          '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
        ).join(''));
        return JSON.parse(decoded);
      }
  
      // 监听登录成功事件，获取idToken
      document.addEventListener('auth0-login-success', async () => {
        const auth0State = await AMP.getState('auth0');
        const payload = parseJwt(auth0State.idToken);
        // 将提取的属性设置到AMP全局状态，供页面使用
        await AMP.setState({
          userCustomProperty: payload['your-target-property']
        });
      });
    </script>
  </amp-script>
  

• 之后就可以在页面中用{{userCustomProperty}}引用该值了。

方案3：后端中转解析（最稳妥的安全方案） #

如果AMP沙箱的限制让你觉得不安全或操作麻烦，可以通过后端中转：

• 在Auth0控制台中，将回调URL设置为你的后端接口地址。
• 后端接口接收Auth0返回的id_token，验证签名后解析payload，提取你需要的属性。
• 后端重定向回你的AMP页面，并通过加密的查询参数或临时Cookie（AMP支持部分Cookie规则）传递该属性。
• AMP页面用amp-bind获取URL参数中的值：

  <p>属性值：{{location.searchParams.get('property-value')}}</p>
  

注意事项 #

• 无论用哪种方案，都要确保Auth0的id_token确实包含你需要的属性，可在Auth0控制台的Token Debugger中验证。
• 在AMP中处理JWT时，不要手动验证签名（AMP环境下难以安全实现），依赖Auth0的登录流程确保token的合法性。

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