使用Firebase signinWithCredential()实现Facebook OAuth登录失败求助

我之前在搭建Expo React Native应用时，也碰到过Firebase signInWithCredential 配合Facebook登录失败的情况，咱们一步步来排查修复：

1. 先确认Token到Firebase凭证的转换是否正确 #

你用Expo的Facebook.logInWithReadPermissionsAsync拿到的token是Facebook的访问令牌，必须转换成Firebase能识别的FacebookAuthCredential才能正常登录。这一步很容易出错，给你贴个正确的代码片段参考：

import { FacebookAuthProvider, signInWithCredential, getAuth } from 'firebase/auth';
import * as Facebook from 'expo-facebook';

// 确保你已经初始化了Firebase Auth
const auth = getAuth();

try {
  // 触发Expo的Facebook登录UI
  const { type, token } = await Facebook.logInWithReadPermissionsAsync(
    '你的Facebook App ID',
    { permissions: ['public_profile', 'email'] } // 根据需求调整权限
  );

  if (type === 'success') {
    // 关键步骤：把Facebook Token转成Firebase凭证
    const facebookCredential = FacebookAuthProvider.credential(token);
    
    // 用凭证登录Firebase
    const userCredential = await signInWithCredential(auth, facebookCredential);
    console.log('登录成功！用户信息：', userCredential.user);
  } else {
    console.log('用户取消了登录');
  }
} catch (error) {
  // 重点！一定要打印错误的code和message，这是排查核心
  console.error('登录出错：', error.code, error.message);
}

划重点：如果这里报错，先看error.code——比如auth/invalid-credential说明Token无效，auth/operation-not-allowed大概率是Firebase后台没开Facebook登录。

2. 核对Firebase和Facebook后台的配置细节 #

除了App ID和Secret，这些细节也容易漏：

• Firebase端：在「Authentication > 登录方法」里，确认Facebook登录是启用状态，并且填写的App ID和Secret和Facebook后台完全一致
• Facebook端：
  • 「Facebook登录 > 设置」里，把Firebase提供的OAuth重定向URI（格式一般是https://<你的Firebase项目ID>.firebaseapp.com/__/auth/handler）添加到「有效的OAuth重定向URI」列表
  • 如果用了email权限，要么在测试模式下用测试用户登录（测试模式不需要权限审核），要么确保这个权限已经通过Facebook的应用审核
  • 确认你的应用在Facebook后台的「设置 > 基本」里，平台配置正确（Expo项目的话，用Expo默认的包名或者你独立构建的包名）

3. 检查Expo项目的Facebook配置 #

在你的app.json里，必须正确配置Facebook相关字段，确保和后台的App ID一致：

{
  "expo": {
    "facebookScheme": "fb<你的Facebook App ID>", // 注意前面要加fb前缀
    "facebookAppId": "你的Facebook App ID",
    "facebookDisplayName": "你的应用名称" // 和Facebook后台的应用名称一致
  }
}

如果是用Expo Go测试，这个配置就够了；如果是独立构建iOS/Android应用，还要额外配置对应平台的权限（比如iOS的Info.plist，Android的AndroidManifest.xml），不过Expo的eas build会帮你自动处理大部分。

4. 验证Facebook Token的有效性 #

如果还是不行，先确认拿到的Token是不是有效的。可以在代码里加一段验证逻辑：

// 替换成你的Facebook App ID和Secret
const appId = '你的Facebook App ID';
const appSecret = '你的Facebook App Secret';

const response = await fetch(
  `https://graph.facebook.com/debug_token?input_token=${token}&access_token=${appId}|${appSecret}`
);
const debugData = await response.json();
console.log('Token验证结果：', debugData);

如果返回的debugData.data.is_valid是false，说明Token本身有问题——要么是Expo登录流程出错，要么是App ID配置不一致。

5. 确认Firebase Auth初始化正确 #

最后，确保你已经正确初始化了Firebase Auth，比如：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "你的API Key",
  authDomain: "你的Auth Domain",
  projectId: "你的项目ID",
  // 其他配置字段
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app); // 这个auth实例要全局复用，不要重复初始化

如果以上步骤都试过还是不行，把你捕获到的错误code和message贴出来，能更快定位问题！

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