本地环境无法测试Apple Signin弹窗？如何开展本地开发

针对Apple Signin无法在localhost下接收postmessage数据的问题，你可以试试以下几种方案：

• 修改本地hosts映射自定义域名
  把一个你已在Apple后台配置过的自定义域名（比如dev.yourdomain.com）映射到本地127.0.0.1：

  • Windows：编辑C:\Windows\System32\drivers\etc\hosts，添加行 127.0.0.1 dev.yourdomain.com
  • Mac/Linux：编辑/etc/hosts，添加同样的映射行
    之后在Apple开发者后台的「Sign in with Apple」配置中，将这个自定义域名添加到允许的域名和返回URL列表里，就能正常接收postmessage回调数据了。

• 配置本地HTTPS服务
  Apple的Sign in with Apple要求回调页面使用HTTPS（localhost是例外，但localhost存在postmessage限制），搭配自定义域名和本地HTTPS是更规范的做法。可以用mkcert生成本地可信证书，然后给你的开发服务器配置HTTPS：

  • 比如React项目，可以在package.json的启动命令里添加HTTPS=true SSL_CRT_FILE=./cert.pem SSL_KEY_FILE=./key.pem（具体证书路径根据你的生成位置调整）
  • Node.js服务则可以用https模块加载证书启动，示例代码：

    const https = require('https');
    const fs = require('fs');
    const options = {
      key: fs.readFileSync('./key.pem'),
      cert: fs.readFileSync('./cert.pem')
    };
    https.createServer(options, (req, res) => {
      res.writeHead(200);
      res.end('Hello World!');
    }).listen(443);
    

• 应急方案：使用远程测试环境转发
  如果暂时不想配置本地域名和HTTPS，可以把前端的Apple Signin回调地址指向你的远程测试环境域名，在远程环境接收Apple的回调数据后，再通过接口或者其他方式把数据转发到你的本地开发环境。这种方式需要远程环境配合，调试效率不如前两种高，仅作为临时应急使用。

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