部署在GitHub Pages的React.js应用如何接入Sign in with Apple

方案1：修正Apple开发者后台配置（优先尝试） #

这是成本最低的方案，90%的报错都是因为字段填写规则不对：

• Apple后台「Web Authentication Configuration」的Domains and Subdomains字段只能填纯域名，不能带路径，你之前填带/repo/后缀的地址本身就不符合规则，直接填username.github.io即可
• 路径参数填到Redirect URLs字段里，这里支持完整带路径的URL，直接填写你实际的回调地址，比如https://username.github.io/repo/apple-login-callback
  配置完等2分钟生效再测试，大部分情况这一步就能解决问题。

方案2：搭配零成本Serverless代理（方案1失效时用） #

如果Apple确实拦截了github.io后缀的域名配置，可以搭一个极简的授权代理，不需要你买域名，也不用改现有GitHub Pages的部署：

• 找免费的Serverless平台部署一段几十行的转发代码，逻辑为：
  1. Apple后台填写代理服务的免费域名作为可信域名
  2. 代理收到Apple的授权回调请求后，把所有参数原封不动转发回你的GitHub Pages回调地址
• React侧只需要把登录发起时的重定向地址改成代理地址，原有登录验证逻辑完全不用改，代理只是做一层参数中转。

方案3：本地测试临时方案 #

如果你只是做学习测试，不需要给外部用户提供线上登录功能，直接用隧道工具做本地映射即可：

• 安装ngrok工具，执行命令ngrok http 3000获取临时公网HTTPS地址
• 把这个临时地址填到Apple后台的配置项里，本地开发调试直接用即可，不用改动线上GitHub Pages的内容。

注意事项 #

• 如果你的React应用用的是Hash路由模式，记得回调地址要带上hash前缀，或者换成Browser路由，搭配GitHub Pages的404重定向规则适配即可。
• 所有授权逻辑和你参考的教程完全一致，只是调整重定向地址的配置，不需要修改核心的登录状态处理代码。

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