如何在React Native中使用Azure Active Directory B2C实现身份验证

核心实现思路 #

ADAL是微软已经停止维护的旧身份验证库，本身就没有适配React Native的官方版本，不需要再继续寻找相关库。目前官方推荐的替代方案是基于MSAL（Microsoft身份验证库）对接Azure AD B2C，有两种成熟的实现路径，可根据项目需求选择。 #

前置配置准备 #

在开发前需要先在Azure门户的AD B2C服务中完成基础配置：

• 创建常用用户流：包括注册/登录、密码重置、个人信息编辑等你需要用到的用户身份流程
• 注册Native类型的应用，记录三个核心参数：租户名称、用户流名称、应用客户端ID
• 配置重定向URI，格式为msal{你的客户端ID}://auth，适配移动端的回调逻辑

推荐方案：使用官方MSAL React Native库 #

这套方案是官方维护的原生适配方案，支持自动令牌刷新、单点登录等完整能力，适配iOS、Android双端。

步骤1：安装依赖 #

在项目根目录执行安装命令：

# npm安装
npm install @azure/msal-react-native react-native-keychain
# iOS端完成原生依赖集成
cd ios && pod install

步骤2：原生端配置 #

• iOS端：在Info.plist的CFBundleURLTypes节点下添加重定向URI的scheme（即msal{你的客户端ID}），同时在LSApplicationQueriesSchemes节点添加msal相关scheme配置，允许应用唤起登录页和接收回调。
• Android端：在AndroidManifest.xml中添加intent-filter，捕获msal{你的客户端ID}的scheme回调，路径配置为/auth。

步骤3：初始化MSAL实例 #

构造MSAL配置对象，初始化客户端实例：

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

const msalConfig = {
  auth: {
    clientId: "你记录的应用客户端ID",
    authority: "https://{你的租户名称}.b2clogin.com/{你的租户名称}.onmicrosoft.com/{你的用户流名称}",
    redirectUri: "msal{你的客户端ID}://auth",
    knownAuthorities: ["{你的租户名称}.b2clogin.com"]
  }
};

const pca = new PublicClientApplication(msalConfig);

步骤4：实现登录鉴权逻辑 #

• 主动登录：调用pca.acquireToken()方法，传入你需要的权限作用域（默认需要包含openid、offline_access，如果要调用你自己的后端接口还要加上对应API的作用域），即可唤起B2C的托管登录页面，用户完成登录后会返回ID令牌、访问令牌、刷新令牌。
• 静默鉴权：后续需要调用接口时，优先调用pca.acquireTokenSilent()方法获取有效的访问令牌，无需用户重复登录。拿到令牌后放在接口请求头的Authorization: Bearer {令牌}字段即可完成后端鉴权。
• 退出登录：调用pca.signOut()方法清除本地缓存的令牌和会话信息即可。

轻量方案：自定义WebView实现授权码流 #

如果你的项目不想引入额外的原生依赖，也可以通过React Native自带的WebView实现OAuth 2.0授权码流完成对接：

• 按照AD B2C的授权端点规范，拼接client_id、redirect_uri、response_type=code、scope、state等参数，构造完整的登录链接，用WebView加载该链接。
• 监听WebView的跳转事件，当页面跳转到你配置的重定向URI时，截取URL中的授权码参数。
• 用授权码调用AD B2C的令牌端点，换取ID令牌、访问令牌和刷新令牌，存储在加密的本地安全存储中。
• 后续令牌刷新、接口鉴权、退出登录的逻辑和上述MSAL方案一致。

注意事项 #

• 所有敏感配置不要硬编码在代码中，建议通过环境变量注入。
• 令牌不要存在AsyncStorage这类明文存储的组件中，必须用加密的安全存储方案。
• 退出登录时除了清除本地存储的令牌，还要调用B2C的登出端点清除服务端会话，避免单点登录残留。

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