Expo React Native集成Azure AD B2C认证配置问题求助

我正在搭建一个学习用的POC，希望使用Azure AD B2C对Expo React Native应用客户端进行认证。我找到了ad-b2c-react-native库来处理认证流程，但不清楚如何配置Azure AD B2C应用以适配该库。

当前代码 #

App组件代码 #

export default function App() {
  return (
    <View style={styles.container}>
      <AuthProvider
        tenant="tenantName"
        appId="24c9fd0c-f595-485d-REST"
        loginPolicy="B2C_1_weatherappflow>"
        passwordResetPolicy="B2C_1_weatherappflow"
        profileEditPolicy="B2C_1_weatherappflow"
        redirectURI="https://APPNAME.b2clogin.com/oauth2/nativeclient"
      >
        <Text>Open up App.tsx to start working on your app!</Text>
        <Authenticated></Authenticated>
      </AuthProvider>
      <StatusBar style="auto" />
    </View>
  );
}

Authenticated组件代码 #

const Authenticated = () => {
  const { getTokensAsync, isLoading, error, isAuthentic } = useToken();

  useEffect(() => {
    const login = async () => {
      console.log("I was called to log in.");

      const token = await getTokensAsync();

      console.log("I am logged in: ", token);
    };

    login();
  }, []);

  return <>></>;
};

当前Azure配置 #

Mobile/Desktop应用重定向URI设置为：

https://APPNAME.b2clogin.com/oauth2/nativeclient

遇到的问题 #

• 使用Expo浏览器视图运行应用时，弹出的新浏览器窗口显示Bad Request；在手机端运行则无任何反应。
• 查看触发错误的请求URI，末尾为scope=24c9fd0c-f595-485d-8aa1-REST%20offline_access，怀疑是请求了不存在的offline_access权限范围。
• 已确认配置中的tenant为租户名称而非租户ID，但仍出现相同的Bad Request错误。

问题排查与解决方案 #

1. 修正代码语法错误 #

你的loginPolicy参数末尾多了一个多余的>符号：

loginPolicy="B2C_1_weatherappflow>"

这会导致请求的策略名称无效，直接引发Bad Request，需要改为：

loginPolicy="B2C_1_weatherappflow"

2. 配置Offline Access权限 #

offline_access是Azure AD B2C的标准委派权限，用于获取刷新令牌，需要在应用注册中手动开启：

• 进入Azure AD B2C控制台，找到你的应用注册
• 切换到API权限页面，点击添加权限
• 选择Microsoft Graph → 委派权限，找到offline_access权限并勾选
• 点击添加权限后，再点击授予管理员同意（需租户管理员账号操作）

3. 重定向URI的正确配置 #

对于Expo React Native应用，仅配置https://APPNAME.b2clogin.com/oauth2/nativeclient不够，需要补充以下URI：

• 开发环境：添加Expo运行的本地地址，比如exp://127.0.0.1:19000（根据你实际的Expo运行地址调整）
• 生产环境：自定义scheme格式的URI，比如com.yourappname://oauthredirect（需与应用打包时的bundle ID一致）
• 确保代码中redirectURI的值与Azure后台配置的完全一致，注意大小写和拼写无错误

4. 用户流策略检查 #

当前你将登录、密码重置、资料编辑策略都设为同一个B2C_1_weatherappflow，但该策略如果只是注册和登录类型，密码重置和资料编辑功能会失效。建议在Azure AD B2C中分别创建对应类型的用户流：

• 注册和登录流（对应loginPolicy）
• 密码重置流（对应passwordResetPolicy）
• 资料编辑流（对应profileEditPolicy）
  然后在代码中分别配置对应的策略名称

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