React单页应用集成Azure AD（MSAL.js）登录报错排查

从你的代码和遇到的错误来看，主要遗漏了以下几个关键步骤和配置：

1. 未处理登录重定向回调 #

MSAL在登录重定向后需要处理返回的授权响应，否则会抛出错误。你需要在初始化PublicClientApplication后调用handleRedirectPromise，等待其完成后再渲染应用。

修改index.tsx：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { PublicClientApplication } from '@azure/msal-browser';
import App from './App';

export const pca = new PublicClientApplication({
  auth: {
    clientId: '你的实际Client ID', // 替换为Azure门户获取的真实值
    authority: 'https://login.microsoftonline.com/你的实际租户ID', // 替换为真实值
    redirectUri: 'http://localhost:3000/' // 确保和Azure应用注册配置一致
  }
});

// 处理重定向回调
pca.handleRedirectPromise().then(() => {
  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}).catch(err => {
  console.error('重定向处理失败:', err);
});

2. Azure AD应用注册的重定向URI配置错误 #

登录Azure门户，找到你创建的应用注册，进入身份验证页面：

• 添加与代码中redirectUri完全一致的地址（本地开发通常为http://localhost:3000/）
• 确保选择的平台是单页应用(SPA)，MSAL.js 2.x针对SPA必须配置该平台类型，不能选Web平台

3. 代码缺失必要的基础导入 #

你的index.tsx未导入React和ReactDOM，这会导致React应用无法正常渲染，需补充对应的导入语句（如上述修改后的代码所示）。

4. 未确认权限配置 #

确保你的应用注册已添加User.Read权限，且已授予管理员同意（租户内应用需完成此步骤）。在Azure应用注册的API权限页面确认配置状态。

额外排查提示 #

• 务必将代码中所有占位符（clientId、tenantId）替换为Azure门户获取的真实值，不能保留占位符字符串
• 开发环境可开启MSAL日志功能辅助排查：

export const pca = new PublicClientApplication({
  auth: { /* 现有配置 */ },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        console.log(message);
      },
      logLevel: 2 // 0=错误, 1=警告, 2=信息, 3=详细日志
    }
  }
});

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