React用MSAL-Browser遇AADSTS900561错误及code获取问题

一、AADSTS900561错误原因及解决 #

这个错误的核心是Azure AD应用注册的平台类型与你的前端SPA场景不匹配：

• 若你将应用注册配置为「Web应用」类型，Azure AD会要求授权码流使用POST请求回调，但MSAL-Browser作为SPA库，默认使用GET请求跳转回调，因此触发该错误。
• 你的Python方案能正常工作，是因为Python后端属于Web应用场景，符合Web应用类型的注册要求，支持POST/GET回调。

解决步骤：

1. 联系拥有Azure AD权限的人员，将应用注册的平台类型修改为「单页应用（SPA）」：
   • 在Azure门户的应用注册页面，进入「Authentication」选项卡
   • 删除原有的Web平台配置，添加「单页应用」平台，并配置正确的redirectUri（即你的React应用地址，如http://localhost:3000）
2. 确认response_type设置为code：SPA场景下必须使用PKCE授权码流，response_type固定为code，不要设置其他值。

二、response_mode设为query不生效的问题 #

MSAL-Browser针对SPA场景会强制使用fragment响应模式，这是OAuth2.0针对前端应用的安全设计：

• fragment（#开头的参数）不会被发送到服务器，只会留在浏览器端，避免code参数被第三方服务器截获，符合SPA的安全要求。
• 你不需要自行搭建HTTP服务器接收code，MSAL-Browser会自动从URL的fragment中提取code，并完成后续的令牌交换流程，结果会存在缓存中。

正确的处理流程：

1. 移除代码中response_mode: "query"的配置，遵循MSAL-Browser的默认行为
2. 在loginPopup成功后，直接通过MSAL的API获取令牌，示例代码如下：

   async login() {
       try {
           const response = await this.publicClientApplication.loginPopup({
               scopes: config.scopes,
               prompt: "select_account"
           });
           // 从缓存中获取访问令牌
           const tokenResponse = await this.publicClientApplication.acquireTokenSilent({
               scopes: config.scopes,
               account: this.publicClientApplication.getActiveAccount()
           });
           console.log("访问令牌:", tokenResponse.accessToken);
           this.setState({ isAuthenticated: true });
       } catch (err) {
           this.setState({
               isAuthenticated: false,
               user: {},
               error: err
           });
       }
   }
   

三、若必须让后端接收code的替代方案 #

如果业务场景确实需要后端处理code（比如后端需要用code交换令牌），则需要调整架构：

1. 将应用注册改为「Web应用」类型，配置后端的回调地址（比如http://localhost:65192/callback）
2. 使用后端发起授权请求（而非前端MSAL-Browser），前端跳转到后端的授权接口，由后端处理Azure AD的回调并获取令牌
3. 后端将令牌返回给前端使用

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