使用Socialite集成Facebook登录时遇不安全登录拦截错误

我前段时间集成Facebook登录时也踩过这个一模一样的坑，现在Facebook确实已经彻底移除了“Enforce HTTPS for Web OAuth Login”这个开关——不管是开发还是生产环境，Web端的OAuth登录都必须走HTTPS，老办法完全失效了。给你几个实用的解决方向：

1. 本地开发环境启用HTTPS #

这是最直接的长期解决方案，让你的本地开发服务跑在HTTPS上：

• 如果用React/Vue这类脚手架工具，大部分都支持通过环境变量快速开启HTTPS：
  • React：启动时设置 HTTPS=true npm start
  • Vue：修改vue.config.js，配置devServer的https选项为true，或者启动时加--https参数
• 要是用自定义服务器（比如Node.js/Express），可以用mkcert生成本地可信证书：
  1. 安装mkcert工具（根据你的系统用包管理器安装即可）
  2. 生成本地CA证书：mkcert -install
  3. 为localhost生成证书：mkcert localhost 127.0.0.1 ::1
  4. 在服务器配置里引用生成的.pem证书文件，开启HTTPS服务

2. 用反向代理工具生成临时HTTPS地址 #

如果不想折腾本地证书，可以用ngrok这类工具把本地HTTP服务转成公网HTTPS地址：

• 安装ngrok后，运行命令：ngrok http 你的本地端口号（比如ngrok http 3000）
• 复制ngrok生成的https://xxxx.ngrok.io地址，到Facebook开发者后台的两个位置配置：
  • Facebook Login -> Settings里的Valid OAuth Redirect URIs添加这个地址
  • Settings -> Basic里的App Domains也加上这个域名
• 测试时用这个HTTPS地址访问你的应用，就能正常走Facebook登录流程了

3. 确认应用配置的细节 #

别漏了这些基础配置，不然即使开了HTTPS也可能报错：

• 确保你的应用处于开发模式（在Facebook开发者后台的应用仪表盘顶部可以切换）
• 所有在Facebook后台配置的回调地址、域名都必须是HTTPS协议的
• 检查前端初始化Facebook SDK时，传入的redirectUri是否是HTTPS地址

补充说明：Facebook这次更新是为了提升OAuth流程的安全性，强制HTTPS是不可逆的要求，适配HTTPS是长期解决方案，别再找绕开的办法啦。

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