使用MSAL React调用Azure AD保护的API时出现401未授权错误如何解决

配置错误排查点 #

• 后端Azure AD Instance配置错误：你当前配置的Instance值为https://login.microsoft.com，正确值应为https://login.microsoftonline.com，和前端authority的前缀保持一致。
• 后端JWT受众校验配置错误：aud（受众）声明的有效值仅为API的ClientId，你错误将Scope加入了ValidAudiences列表，需要删掉列表中的$"{Configuration["AzureAD:Scope"]}"这一行，仅保留API ClientId即可。
• 前端取token后传参错误：instance.ssoSilent返回的是完整的AuthenticationResult对象，你需要从中取accessToken属性传给后端，不能直接传整个对象。对应代码修改为：

  const authResult = await instance.ssoSilent(silentRequest);
  const companies = await getCompaniesAsync(authResult.accessToken);
  

• 检查API请求头格式：调用API时必须在Authorization请求头中携带token，格式为Bearer ${accessToken}，不能缺失Bearer 前缀。
• 权限配置校验：
  • 确认前端申请的Scope格式正确，应为api://<API的ClientId>/<自定义Scope名>
  • 确认Azure AD中，你注册的前端客户端应用已经被授予了对应API的访问权限
• 增加调试日志快速定位问题：你可以在后端AddJwtBearer的配置中增加校验失败日志，直接看到具体错误原因：

  options.Events = new JwtBearerEvents
  {
      OnAuthenticationFailed = context =>
      {
          // 此处打印context.Exception的详细信息即可看到JWT校验失败的具体原因
          Console.WriteLine(context.Exception.ToString());
          return Task.CompletedTask;
      }
  };
  

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