React应用集成Firebase Facebook认证出现400错误求助

核心排查方向及解决步骤 #

1. Facebook开发者平台配置检查 #

• 确认已在Facebook开发者后台为应用添加Facebook登录产品，且「设置→基本」页面的应用ID、应用密钥与Firebase控制台完全一致。
• 进入Facebook登录的「设置」页面，将Firebase控制台提供的OAuth重定向URI（路径：Firebase控制台→Authentication→登录方法→Facebook）添加到「有效的OAuth重定向URI」列表中。
• 检查应用状态：若应用处于「开发模式」，仅添加的测试用户可登录；若需公开访问，需将应用切换为「公开状态」。

2. Firebase控制台配置验证 #

• 确保Firebase控制台的「Authentication→登录方法」中，Facebook登录已启用，且正确填入Facebook的应用ID和应用密钥。
• 确认Firebase项目的「Auth域」与Facebook开发者平台中设置的「网站URL」匹配。

3. 代码修正与优化 #

• 修正函数名拼写错误：将signInWithFacebbok改为signInWithFacebook（多了一个字母b），避免后续逻辑混淆。
• 可明确添加Facebook登录权限，确保请求的权限符合要求：

const signInWithFacebook = () => {
  const fbprovider = new FacebookAuthProvider();
  fbprovider.addScope('public_profile'); // 添加公开资料权限
  signInWithPopup(authentication, fbprovider)
    .then((re) => console.log(re))
    .catch((err) => console.log(err))
}

4. 额外排查点 #

• 检查Google Cloud控制台中，Firebase项目的API密钥是否设置了不当的应用限制，确保允许访问「Identity Toolkit API」。
• 清除浏览器缓存或使用隐身模式测试，避免旧的认证缓存干扰。

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