Nuxt.js集成Sign in with Apple功能异常问题咨询

按优先级检查以下配置：

• 补全Express请求体解析中间件：Apple回调的POST请求默认使用application/x-www-form-urlencoded编码，仅配置express.json()无法解析该格式的请求体，需在路由定义前添加对应解析规则：

app.use(express.urlencoded({ extended: true }))

• 校验路由请求方法：Apple的授权回调固定为POST请求，需确认回调地址对应的路由为app.post('/login', handler)，若配置为GET路由无法获取POST携带的参数。
• 排查链路请求改写：检查反向代理、Ngrok配置、Nuxt路由规则是否存在全局302重定向逻辑，将/login路径的POST请求改写为GET请求，请求方法变更会导致请求体参数全部丢失。
• 确认字段返回规则：name、email两个字段仅在用户首次给应用授权时返回，后续重复授权流程Apple不会再返回这两个字段，需在首次授权时将字段值持久化到自有库中，不要重复依赖回调返回。

按优先级检查以下配置：

• 校验请求格式与参数完整性：不要直接将前端SDK返回的完整响应对象透传给Apple校验接口，需提取核心字段：authorization.code、authorization.id_token、state、首次授权返回的user字段，使用application/x-www-form-urlencoded格式提交给Apple的token校验接口，Apple接口不接受JSON格式的请求体。
• 保证redirectURI全链路一致：Popup模式下不会触发页面跳转，但Apple仍会校验redirectURI参数：前端SDK初始化时传入的redirectURI、服务端调用Apple换token接口时传入的redirectURI、Apple开发者后台Service ID配置的域名下回调地址三者必须完全一致，包含协议、路径、斜杠后缀都不能有差异，否则直接返回invalid request。
• 正确生成client_secret：服务端用授权code换access_token时，不能直接使用前端的clientId作为密钥，需要生成ES256签名的JWT格式client_secret，生成规则为：
  • 签名算法固定为ES256
  • 签名密钥使用Apple开发者后台下载的服务私钥
  • iss字段填写账号对应的Team ID
  • sub字段填写创建的Service ID（即前端配置的clientId）
  • exp字段设置的过期时间不能超过6个月
• 修复Nuxt下SDK加载逻辑：Apple JS SDK仅能在浏览器环境运行，不要在SSR阶段加载脚本，需在客户端onMounted生命周期动态注入脚本后再执行初始化，避免SSR环境下SDK执行异常返回错误结构的授权数据，参考加载代码：

onMounted(() => {
  if (window.AppleID) {
    initAppleAuth()
    return
  }
  const script = document.createElement('script')
  script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js'
  script.onload = initAppleAuth
  document.body.appendChild(script)

  function initAppleAuth() {
    window.AppleID.auth.init({
      clientId: "my-client-id",
      scope: "name email",
      redirectURI: "https://9b29-103-213-105-122.in.ngrok.io/login",
      state: "origin:web",
      usePopup: true,
    })
  }
})

• 校验state参数一致性：初始化时传入的自定义state值，在服务端调用Apple校验接口时需要原样传回，不得篡改，否则会被判定为非法请求。
• 增加异常捕获：Popup模式下如果用户浏览器拦截弹窗、主动取消授权，SDK会抛出异常，不要将异常对象作为合法授权数据提交给服务端，需添加.catch()逻辑处理授权中断场景。

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