已配置Azure AD认证的React单页应用，如何调用受保护的Azure REST API？

我刚好搞定了这个问题，结合你提到的参考内容，下面是亲测有效的修改步骤，能让你的纯前端React应用顺利调用受Azure AD保护的REST API：

第一步：确认Azure AD应用注册的权限配置 #

首先得确保你的前端应用有访问目标API的权限：

• 登录Azure门户，找到你的前端应用注册，进入「API权限」页面
• 点击「添加权限」，选择你部署的REST API对应的应用注册，添加委托权限（因为是前端用户发起的请求）
• 最后点击「授予管理员同意」（如果是租户内部应用，这一步必须做，否则普通用户会权限不足）

第二步：更新前端的ADAL配置文件 (adalConfig.js) #

关键是要把endpoints里的api值替换成你REST API的应用ID URI（不是API的客户端ID哦），这个值可以在API的应用注册「概述」页面找到。同时我们可以确保adalApiFetch的逻辑正确：

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
  tenant: 'mytenantguid',
  clientId: 'myappguid',
  endpoints: {
    // 替换成你的REST API的应用ID URI，比如 https://your-tenant.onmicrosoft.com/your-api-name
    api: 'https://your-tenant-name.onmicrosoft.com/your-api-app-id',
  },
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

// 封装API调用，自动附加AD令牌
export const adalApiFetch = (fetch, url, options) => {
  return adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);
};

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

第三步：在组件中调用受保护的API #

在需要调用API的组件里，用我们封装的adalApiFetch代替原生fetch，它会自动从ADAL的缓存中获取有效的访问令牌，并把令牌附加到请求的Authorization头里：

import { adalApiFetch } from './adalConfig';

// 示例：获取API数据的函数
const fetchProtectedData = async () => {
  try {
    const response = await adalApiFetch(fetch, 'https://your-api-webapp.azurewebsites.net/api/your-endpoint', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    
    if (!response.ok) {
      throw new Error(`API请求失败: ${response.status}`);
    }
    
    const data = await response.json();
    console.log('获取到API数据:', data);
    // 这里可以处理数据，比如更新Redux状态或者渲染到页面
  } catch (error) {
    console.error('调用API出错:', error);
    // 处理错误，比如提示用户重新登录
  }
};

第四步：验证API端的配置 #

确保你的REST API已经正确配置Azure AD认证，比如ASP.NET Core的API需要在Program.cs里添加类似这样的代码：

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAd"));

并且appsettings.json里的Azure AD配置指向正确的租户和API应用ID。

这样修改后，你的React应用在用户完成Azure AD认证后，就能自动带上合法的令牌调用受保护的API了，ADAL会帮你处理令牌的获取、缓存和自动刷新，不用手动管理令牌逻辑~

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