如何在React与ASP.NET Core MVC应用中实现Microsoft Azure AD认证？求示例

既然你已经通过Visual Studio 2022创建了带Azure AD认证的ASP.NET Core MVC项目，我们先完善它的配置，再集成React前端实现端到端的Azure AD认证。

1. 完善ASP.NET Core MVC的Azure AD配置 #

• 打开项目的appsettings.json，确认Azure AD配置字段完整：

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "你的租户域名（如xxx.onmicrosoft.com）",
    "TenantId": "你的租户ID",
    "ClientId": "MVC应用的客户端ID",
    "CallbackPath": "/signin-oidc"
  }
  

• 修改Program.cs，添加CORS支持（因为React是独立前端，需要跨域访问MVC后端）：

  // 添加CORS策略，允许React前端域名访问
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowReact", policy =>
      {
          policy.WithOrigins("http://localhost:3000") // React默认开发端口
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
      });
  });
  
  // 确保中间件顺序正确：先CORS，再认证、授权
  app.UseCors("AllowReact");
  app.UseAuthentication();
  app.UseAuthorization();
  

• 为MVC应用暴露API权限（后续React需要调用受保护的接口）：
  1. 登录Azure AD门户，找到你的MVC应用注册
  2. 进入“暴露API”页面，添加一个API范围（比如api://{MVC客户端ID}/access_as_user）
  3. 设置范围名称和描述，保存后记录这个范围的完整路径

2. 创建React应用并集成Azure AD认证 #

• 初始化React项目：

  npx create-react-app react-aad-demo
  cd react-aad-demo
  

• 安装Azure AD认证依赖：

  npm install @azure/msal-browser @azure/msal-react
  

• 创建认证配置文件src/authConfig.js：

  export const msalConfig = {
      auth: {
          clientId: "React应用的客户端ID", // 在Azure AD门户注册新的SPA应用获取
          authority: "https://login.microsoftonline.com/你的租户ID",
          redirectUri: "http://localhost:3000" // 必须和Azure AD中注册的SPA应用重定向URI一致
      },
      cache: {
          cacheLocation: "sessionStorage",
          storeAuthStateInCookie: false
      }
  };
  
  // 定义需要请求的权限，包含MVC应用暴露的API范围
  export const loginRequest = {
      scopes: ["User.Read", "api://{MVC客户端ID}/access_as_user"]
  };
  

• 在src/index.js中用MSAL Provider包裹整个应用：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  import { PublicClientApplication } from '@azure/msal-browser';
  import { MsalProvider } from '@azure/msal-react';
  import { msalConfig } from './authConfig';
  
  const msalInstance = new PublicClientApplication(msalConfig);
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <MsalProvider instance={msalInstance}>
        <App />
      </MsalProvider>
    </React.StrictMode>
  );
  

• 在src/App.js中实现登录、登出和调用MVC接口：

  import { useMsal, useMsalAuthentication } from '@azure/msal-react';
  import { loginRequest } from './authConfig';
  
  function App() {
      const { instance } = useMsal();
      const { account } = useMsalAuthentication(loginRequest);
  
      const callProtectedApi = async () => {
          if (!account) return;
          // 静默获取访问令牌
          const tokenResponse = await instance.acquireTokenSilent({
              ...loginRequest,
              account: account
          });
          // 调用MVC受保护接口
          const response = await fetch('https://localhost:7045/api/protected', {
              headers: {
                  'Authorization': `Bearer ${tokenResponse.accessToken}`
              }
          });
          const data = await response.json();
          console.log('API响应:', data);
      };
  
      return (
          <div className="App">
              <h1>Azure AD认证Demo</h1>
              {account ? (
                  <div>
                      <p>已登录用户: {account.name}</p>
                      <button onClick={callProtectedApi}>调用受保护API</button>
                      <button onClick={() => instance.logoutRedirect()}>登出</button>
                  </div>
              ) : (
                  <button onClick={() => instance.loginRedirect(loginRequest)}>登录</button>
              )}
          </div>
      );
  }
  
  export default App;
  

3. 配置Azure AD应用联动 #

• 在Azure AD门户注册一个新的单页应用(SPA)，用于React前端
• 为这个SPA应用添加API权限：选择之前MVC应用暴露的API范围，并授予管理员同意
• 确保MVC应用和SPA应用在同一个Azure AD租户下

微软官方提供了多个针对不同场景的React + Azure AD认证示例，涵盖基础登录、调用受保护API、多租户支持等场景。这些示例的核心逻辑和上述步骤一致，你可以直接基于这些示例快速搭建：

• 基础SPA登录示例：实现用户登录、登出、获取用户基本信息
• SPA调用后端API示例：包含前端获取令牌、后端验证令牌的完整流程
• 进阶场景示例：支持条件访问、增量权限请求等

• 开发环境中，React和MVC的端口要和配置中的一致，CORS策略要正确配置
• 生产环境必须使用HTTPS，避免令牌泄露
• Azure AD中注册的应用重定向URI必须和实际部署地址一致
• 确保API权限已授予管理员同意，否则普通用户无法获取令牌

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