如何为现有Web应用扩展的React Native应用添加Microsoft身份验证？

1. 基础配置对齐 #

• 确保React Native项目和现有Web应用共用同一个Azure AD应用注册，在Azure门户中完成以下操作：
  • 新增iOS/Android移动端平台，配置对应重定向URI：
    • iOS：msauth.<bundle-id>://auth
    • Android：msauth://<package-name>/<base64-url-encoded-signature>
  • 开启「允许公共客户端流」（React Native属于公共客户端类型）
• 将Web应用已有的clientId、tenantId直接复用至React Native项目的MSAL配置

2. MSAL React Native核心实现 #

安装依赖 #

npm install @azure/msal-react-native @azure/msal-native
# 或使用yarn
yarn add @azure/msal-react-native @azure/msal-native

注意：iOS需额外在Info.plist配置URL scheme；Android需在AndroidManifest.xml添加intent-filter接收重定向请求

初始化MSAL实例 #

创建msalConfig.js文件统一管理配置：

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

const msalConfig = {
  auth: {
    clientId: '你的Web应用ClientID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: '你的移动端重定向URI',
  },
  cache: {
    cacheLocation: 'secureStorage', // 用安全存储保存Token
    storeAuthStateInCookie: false, // 移动端无需此配置
  },
};

const pca = new PublicClientApplication(msalConfig);
export default pca;

交互式登录实现 #

在登录组件中编写登录逻辑：

import pca from './msalConfig';

const signIn = async () => {
  try {
    const authResult = await pca.acquireToken({
      scopes: ['User.Read', '你的Web应用所用权限范围'], // 和Web应用权限完全对齐
      interactive: true,
    });
    // 登录成功后，将accessToken、idToken存入本地，供后续API请求使用
    console.log('登录成功:', authResult.accessToken);
  } catch (error) {
    console.error('登录失败:', error);
  }
};

静默续期Token（避免重复登录） #

用户已登录时，优先用静默方式获取新Token：

const getSilentToken = async () => {
  try {
    const accounts = await pca.getAccounts();
    if (accounts.length > 0) {
      const silentResult = await pca.acquireTokenSilent({
        scopes: ['User.Read', '你的Web应用所用权限范围'],
        account: accounts[0],
      });
      return silentResult.accessToken;
    }
    return null;
  } catch (error) {
    // 静默获取失败，触发交互式登录
    return signIn();
  }
};

3. 与Web应用验证对齐的关键要点 #

• 权限范围完全一致：移动端请求的scopes必须和Web应用的API权限完全相同，确保后端能正常识别Token
• Token验证逻辑复用：移动端获取的accessToken和Web应用Token格式一致，后端无需额外适配，直接沿用原有MSAL验证逻辑即可
• 会话同步（可选）：若需和Web应用共享会话，可在移动端登录后将idToken通过深层链接传给Web应用，Web应用用该idToken完成静默登录

4. 常见坑点解决 #

• iOS端：需在Info.plist添加LSApplicationQueriesSchemes，允许调用MSAL的URL scheme：

  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>msauthv2</string>
    <string>msauthv3</string>
  </array>
  

• Android端：确保签名哈希值和Azure门户配置一致，可通过以下命令生成：

  keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
  

• 文档缺失问题：可直接克隆MSAL React Native官方示例项目，跑通后将核心逻辑移植到自己的项目中

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