使用Firebase实现Facebook账号登录提示连接不安全该如何解决

问题解决方法 #

该报错是Facebook OAuth的强制安全限制，所有授权请求必须走HTTPS加密链路传输，不允许明文HTTP环境发起请求，可按照以下步骤逐一排查解决：

• 确认运行环境符合要求
  • 本地开发阶段：不要直接打开本地HTML文件（file://协议），必须启动本地HTTP服务，使用http://localhost或http://127.0.0.1访问调试，Facebook对本地环回地址的HTTP环境做了特殊豁免
  • 线上部署阶段：必须为站点配置有效SSL证书，强制全站走HTTPS访问，不允许保留HTTP访问入口
• 核对两端配置的一致性
  1. 进入Firebase控制台→身份验证→登录方式→Facebook，确认填写的Facebook应用ID、应用密钥和Facebook开发者后台的应用信息完全匹配
  2. 进入Facebook开发者后台对应应用的「设置」→「基本」页面，将Firebase授权域名auth-project-38aaa.firebaseapp.com添加到「应用域」列表
  3. 进入Facebook开发者后台对应应用的「产品」→「Facebook登录」→「设置」页面，将Firebase OAuth重定向URI *https://auth-project-38aaa.firebaseapp.com/__/auth/handler* 添加到「有效的OAuth重定向URI」列表，该地址必须为HTTPS开头，拼写完全匹配不能有遗漏
• 补全代码遗漏的导入
  你提供的代码缺少Firebase核心初始化方法的导入，需要在顶部import语句中补充对应内容：

  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
  

• 排查本地网络干扰
  如果本地用localhost访问仍报错，检查是否开启了抓包工具、VPN或代理软件，这类工具可能篡改SSL证书导致Facebook识别到链路不安全，关闭后重试即可。

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