如何在Expo React Native应用中用自有Facebook应用登录而非Expo Go？

问题概述 #

在Expo React Native应用中基于Firebase实现Facebook登录时，使用了已废弃的expo-facebook模块，功能正常但Facebook登录网页UI显示的是Expo Go的应用名称和图标，修改initializeAsync中的appId也无法改变这一情况。

登录界面截图：

当前使用的登录代码：

import * as Facebook from "expo-facebook";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import firebaseConfig from "../firebase";

firebase.initializeApp(firebaseConfig);

const facebookLogin = async (setName) => {
  try {
    await Facebook.initializeAsync({
      appId: "xxx",
      appName: "xxx",
    });
    const { type, token } = await Facebook.logInWithReadPermissionsAsync({
      permissions: ["public_profile"],
    });
    if (type === "success") {
        fetch(`https://graph.facebook.com/me?access_token=${token}`)
          .then((res) => res.json())
          .then((data) => {
            console.log(data);
            setName(data.name);
          })
          .catch((err) => console.log(err));
    }
  } catch ({ message }) {
    console.log(`Facebook login error: ` + message);
  }
};

export default facebookLogin;

问题原因 #

在Expo Go客户端中预览应用时，默认使用的是Expo官方的Facebook应用配置，所以登录界面会显示Expo Go的信息。另外expo-facebook模块已被官方废弃，不再维护，建议使用官方推荐的替代方案。

解决方案 #

1. 替换废弃模块，使用expo-auth-session实现登录 #

官方推荐使用expo-auth-session替代expo-facebook，步骤如下：

• 安装依赖：

expo install expo-auth-session expo-web-browser

• 在Facebook开发者平台中，配置你的应用回调URL，格式为：https://auth.expo.io/@你的Expo用户名/你的应用slug（可在app.json的expo.slug字段找到应用slug）
• 修改登录代码，集成Firebase：

import * as AuthSession from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import firebaseConfig from "../firebase";

firebase.initializeApp(firebaseConfig);

// 配置Facebook OAuth参数
const FACEBOOK_CLIENT_ID = '你的Facebook App ID';
const redirectUri = AuthSession.makeRedirectUri({
  useProxy: true,
});

WebBrowser.maybeCompleteAuthSession();

const facebookLogin = async (setName) => {
  try {
    const authRequest = await AuthSession.getAuthRequestAsync({
      clientId: FACEBOOK_CLIENT_ID,
      scopes: ['public_profile'],
      redirectUri,
    });

    const response = await AuthSession.startAsync(authRequest);
    if (response.type === 'success') {
      const { access_token } = response.params;
      // 获取用户信息
      const userInfoResponse = await fetch(`https://graph.facebook.com/me?access_token=${access_token}&fields=name`);
      const userInfo = await userInfoResponse.json();
      setName(userInfo.name);

      // 可选：将Facebook令牌传给Firebase进行认证
      const credential = firebase.auth.FacebookAuthProvider.credential(access_token);
      await firebase.auth().signInWithCredential(credential);
    }
  } catch (error) {
    console.log(`Facebook登录错误: ${error.message}`);
  }
};

export default facebookLogin;

2. 显示自定义应用名称和图标 #

要让登录界面显示你自己的应用名称和图标，无法在Expo Go中实现，必须构建自定义开发客户端：

• 确保已安装EAS CLI：npm install -g eas-cli
• 登录Expo账户：eas login
• 构建自定义开发客户端：

eas build --profile development --platform android # 或 ios

• 安装构建好的自定义客户端到设备上，使用该客户端预览应用，此时Facebook登录界面就会显示你在Facebook开发者平台配置的应用名称和图标了。

内容的提问来源于stack exchange，提问作者Dương Tùng Anh