Expo+Firebase集成Facebook登录遇重定向URI未白名单错误排查求助

针对你遇到的登录后提示URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings错误，给出以下具体排查步骤：

1. 严格校验重定向URL的精确匹配 #

• 核对Facebook后台Valid OAuth Redirect URIs中的每一条URL，确保和实际使用的完全一致：
  • Expo的重定向URL必须是https://auth.expo.io/@你的Expo用户名/你的App Slug，注意用户名和slug要和Expo项目配置完全对应，大小写、字符不能有任何偏差，结尾不要多打斜杠。
  • Firebase生成的OAuth重定向URL要完整复制粘贴，不要手动修改，格式通常为https://<你的Firebase项目ID>.firebaseapp.com/__/auth/handler。
• 可以通过在代码中打印request.redirectUri（在useAuthRequest之后），查看实际发起请求的重定向URL，把这个值也添加到白名单中。

2. 检查Facebook应用的基础配置 #

• 确认应用状态：如果是开发中状态，只有添加到测试用户列表的账号才能正常登录，普通账号会触发权限错误；如果要面向所有用户，需将应用切换为公开状态。
• 配置网站平台：在Facebook应用后台的平台选项中添加网站，并将Expo的重定向URL填入站点URL字段，同时确保Client OAuth Settings中的Web OAuth Login已开启。

3. 代码层面的参数补全与校验 #

• 显式指定重定向URL：在Facebook.useAuthRequest中添加redirectUri参数，强制使用你已白名单的URL，避免Expo自动生成的URL出现偏差：

  const [request, response, promptAsync] = Facebook.useAuthRequest({
    responseType: ResponseType.Token,
    clientId: '<你的Facebook应用ID>',
    redirectUri: 'https://auth.expo.io/@你的Expo用户名/你的App Slug',
  });
  

• 补全React导入：代码中使用了React.useEffect但未导入React，需在顶部添加import React from 'react'，避免潜在的逻辑执行异常。

4. 清除缓存与环境测试 #

• 重启Expo Go应用并清除缓存（在Expo Go的设置中操作），避免旧的会话缓存导致重定向URL异常。
• 使用不同的测试账号验证：如果应用处于开发状态，确保测试账号已添加到Facebook应用的测试用户列表中。

5. 核对Facebook OAuth设置细节 #

• 确保Client OAuth Settings中的OAuth Login、Web OAuth Login、Embedded Browser OAuth Login全部开启，任意一项关闭都可能导致重定向失败。
• 检查Valid OAuth Redirect URIs的格式：每个URL单独一行，不要有换行符或多余空格。

修正后的示例代码 #

import React from 'react';
import * as WebBrowser from 'expo-web-browser';
import * as Facebook from 'expo-auth-session/providers/facebook';
import { ResponseType } from 'expo-auth-session';
import { initializeApp } from 'firebase/app';
import { getAuth, FacebookAuthProvider, signInWithCredential } from 'firebase/auth';
import { Button } from 'react-native';

// Initialize Firebase
initializeApp({
  /* 你的Firebase配置 */
});

WebBrowser.maybeCompleteAuthSession();

export default function App() {
  const [request, response, promptAsync] = Facebook.useAuthRequest({
    responseType: ResponseType.Token,
    clientId: '<你的Facebook应用ID>',
    redirectUri: 'https://auth.expo.io/@你的Expo用户名/你的App Slug',
  });

  React.useEffect(() => {
    if (response?.type === 'success') {
      const { access_token } = response.params;
      const auth = getAuth();
      const provider = new FacebookAuthProvider();
      const credential = provider.credential(access_token);
      signInWithCredential(auth, credential);
    }
  }, [response]);

  return (
    <Button
      disabled={!request}
      title="Login"
      onPress={() => promptAsync()}
    />
  );
}

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