我刚帮你梳理了一套靠谱的实现方案，全部采用官方维护中的库，完全不用担心库已归档的问题，一步步来很容易上手～

一、先完成Azure AD应用注册（必做前置步骤） #

这是接入微软OAuth的核心前提，得先在Azure门户里搞定应用注册：

• 登录Azure门户，找到“Azure Active Directory” -> “应用注册” -> “新注册”
• 填写应用名称，在“支持的账户类型”里选适合你的（比如“任何组织目录中的账户和个人Microsoft账户”）
• 在“重定向URI”部分，选择“移动和桌面应用”，输入msal{你的客户端ID}://auth（后面要和代码里的配置严格对应）
• 注册完成后，务必记录下客户端ID和租户ID（如果选的是特定租户的话）

二、安装官方维护的MSAL库 #

微软官方的@azure/msal-react和@azure/msal-native是目前一直在活跃维护的库，专门适配React Native场景，直接通过包管理器安装：

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

注：react-native-webview是配合msal-react处理授权流的必要依赖，同样是活跃维护的库，不用担心废弃问题。

三、配置MSAL实例并封装全局Provider #

在你的应用入口文件（比如App.js）里，先初始化MSAL配置，然后用MsalProvider包裹整个应用，让所有子组件都能访问登录状态：

import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';

// 替换成你自己的Azure应用信息
const msalConfig = {
  auth: {
    clientId: '你的Azure应用客户端ID',
    authority: 'https://login.microsoftonline.com/common', // 用common支持个人/工作账户，特定租户替换为租户ID
    redirectUri: 'msal你的客户端ID://auth' // 和Azure注册的重定向URI完全一致
  }
};

const pca = new PublicClientApplication(msalConfig);

// 可选：监听登录事件做自定义处理，比如跳转首页
pca.addEventCallback((event) => {
  if (event.eventType === EventType.LOGIN_SUCCESS) {
    console.log('登录成功：', event.payload.account.username);
    // 这里可以添加路由跳转逻辑
  }
});

function App() {
  return (
    <MsalProvider instance={pca}>
      {/* 你的应用路由和业务组件 */}
    </MsalProvider>
  );
}

export default App;

四、实现登录/登出组件 #

用MSAL提供的Hook可以快速实现登录按钮和用户信息展示，代码简洁且易维护：

import { useMsal, useIsAuthenticated } from '@azure/msal-react';
import { InteractionRequiredAuthError } from '@azure/msal-browser';

function LoginComponent() {
  const { instance, accounts } = useMsal();
  const isAuthenticated = useIsAuthenticated();

  const handleLogin = async () => {
    try {
      // 发起弹窗登录，请求用户基本信息权限
      await instance.loginPopup({
        scopes: ['user.read'],
        account: accounts[0] || null
      });
    } catch (err) {
      console.error('登录失败：', err);
    }
  };

  const handleLogout = async () => {
    await instance.logoutPopup({
      account: accounts[0]
    });
  };

  if (isAuthenticated) {
    return (
      <div style={{ padding: 16 }}>
        <p>当前登录账户：{accounts[0].username}</p>
        <button onClick={handleLogout} style={{ padding: 8, marginTop: 8 }}>
          登出账户
        </button>
      </div>
    );
  }

  return (
    <button onClick={handleLogin} style={{ padding: 12 }}>
      用Microsoft账户登录
    </button>
  );
}

export default LoginComponent;

五、原生端（Android/iOS）的必要配置 #

Android端（修改AndroidManifest.xml） #

添加处理重定向URI的Intent Filter，确保登录完成后能跳转回你的应用：

<activity
  android:name="com.microsoft.identity.client.BrowserTabActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 替换成你的重定向URI对应的scheme -->
    <data android:scheme="msal你的客户端ID" />
  </intent-filter>
</activity>

iOS端（修改Info.plist） #

• 添加URL Scheme：在URL types里新增一项，URL Schemes填写msal你的客户端ID
• 添加查询权限：在LSApplicationQueriesSchemes数组中添加msauthv2和msauth，确保应用能唤起微软授权页面

六、获取访问令牌调用API #

如果需要调用微软Graph API或者你的后端服务，用acquireTokenSilent静默获取令牌，失败时再发起交互式请求：

const getAccessToken = async (instance, account) => {
  try {
    const response = await instance.acquireTokenSilent({
      account: account,
      scopes: ['user.read', 'mail.read'] // 按需添加需要的权限
    });
    return response.accessToken;
  } catch (err) {
    // 静默获取失败（比如令牌过期），发起弹窗请求
    if (err instanceof InteractionRequiredAuthError) {
      const response = await instance.acquireTokenPopup({
        account: account,
        scopes: ['user.read', 'mail.read']
      });
      return response.accessToken;
    } else {
      throw err;
    }
  }
};

这些步骤里用到的库都是微软官方维护的，更新迭代很及时，完全不用怕被归档。要是你在Azure配置或者原生端设置里遇到细节问题，随时可以再细化～

内容来源于stack exchange