如何将Azure AD B2C与React Native集成？求可用实现方案

官方推荐库 #

目前唯一由微软官方维护、适配React Native的Azure AD B2C身份验证库是@azure/msal-react-native，支持最新的OAuth2.0和OpenID Connect流程，兼容iOS与Android平台，可替代你找到的所有过时第三方库。

集成步骤（Azure端已配置完成前提下） #

1. 安装依赖 #

在项目根目录执行：

npm install @azure/msal-react-native
npm install react-native-device-info # 可选，用于设备信息采集优化身份验证流程
npx pod-install ios # iOS平台需执行此命令安装原生依赖

React Native 0.60+版本支持自动链接原生模块，低版本需手动完成链接操作。

2. 初始化MSAL客户端 #

在项目入口文件（如App.js）中配置并初始化MSAL实例：

import { PublicClientApplication } from '@azure/msal-react-native';

// 替换为你的Azure AD B2C配置信息
const msalConfig = {
  auth: {
    clientId: "你的应用客户端ID",
    authority: "https://[租户名].b2clogin.com/[租户名].onmicrosoft.com/[用户流名称]", // 例如 B2C_1_signupsignin
    redirectUri: "msauth://[Android包名]/[签名哈希]", // Android平台
    // iOS平台redirectUri格式：msauth.[BundleId]://auth
  },
  cache: {
    cacheLocation: 'secureStorage', // 使用系统安全存储保存令牌
  }
};

export const pca = new PublicClientApplication(msalConfig);

3. 实现登录/注册功能 #

创建登录组件，调用MSAL的令牌获取方法（自动触发Azure AD B2C的登录/注册流程）：

import { InteractionType } from '@azure/msal-react-native';
import { pca } from './App'; // 导入初始化好的MSAL实例

const LoginComponent = () => {
  const handleLogin = async () => {
    try {
      const authResult = await pca.acquireToken({
        interactionType: InteractionType.Popup, // 弹窗式交互，也可使用Redirect
        scopes: ["openid", "profile", "offline_access"], // 根据业务需求添加API权限
      });
      // 登录成功，处理用户信息与令牌
      console.log("用户信息:", authResult.account);
      console.log("访问令牌:", authResult.accessToken);
    } catch (error) {
      console.error("登录失败:", error.message);
    }
  };

  return <button onClick={handleLogin}>登录/注册</button>;
};

4. 实现登出功能 #

添加登出逻辑，清除本地缓存的用户身份信息：

import { pca } from './App';

const LogoutComponent = () => {
  const handleLogout = async () => {
    try {
      const accounts = await pca.getAllAccounts();
      if (accounts.length > 0) {
        await pca.removeAccount(accounts[0]);
        console.log("登出成功");
        // 此处可更新应用状态，例如跳转到首页
      }
    } catch (error) {
      console.error("登出失败:", error.message);
    }
  };

  return <button onClick={handleLogout}>登出</button>;
};

5. 原生平台配置 #

Android

在android/app/src/main/AndroidManifest.xml中添加Intent Filter，确保重定向URI能唤起应用：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data 
        android:scheme="msauth"
        android:host="[你的包名]"
        android:path="/[你的签名哈希]" />
</intent-filter>

签名哈希需与Azure AD B2C应用配置中的值一致。

iOS

在ios/[项目名]/Info.plist中添加URL Scheme：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>msauth.[你的BundleId]</string>
        </array>
    </dict>
</array>

需在Azure AD B2C应用配置中添加对应重定向URI：msauth.[BundleId]://auth

核心注意事项 #

• 确保Azure AD B2C中配置的用户流/自定义策略包含登录、注册等所需流程。
• MSAL库会自动处理令牌刷新、缓存管理，无需手动实现。
• 测试时建议使用真实设备，部分身份验证流程在模拟器上可能存在兼容性问题。

内容的提问来源于stack exchange，提问作者Maynor Song Lara