为 API 授权 SPA答案

【问题标题】：Authorizing SPA for an API为 API 授权 SPA
【发布时间】：2020-08-03 14:10:48
【问题描述】：

我们有 5 个 REACT 门户和 1 个 Asp:net Core 3.1 API。我们希望对所有门户使用相同的 API。他们都通过 MSAL B2B (react-aad-msal) 进行授权。首先，我试图让一个门户使用一个 API。为此，我有两个 App Reg（AccountRequestPortal 和 AccountAPI）。

App Reg AccountRequestPortal :

帐户API：

请注意，我已授予门户对 API 的访问权限。

API 配置：

// Portal 
const msalConfig = {
  auth: {
    authority: 'https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84',
    clientId: '03099206-xxx-e31a9ee8dec5',
    redirectUri: redirectUri
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

const authParameters = {
  scopes: [
    "api://03099206-xxx-e31a9ee8dec5/Read"
  ]
}

// API
// const msalConfig = {
//   auth: {
//     authority: 'https://login.microsoftonline.com/a364eb28-e95b-4ad0-a4fb-5b4f7767ad84',
//     clientId: '422132b5-xxx-6651f01a1109',
//     redirectUri: redirectUri
//   },
//   cache: {
//     cacheLocation: "localStorage",
//     storeAuthStateInCookie: true
//   }
// };

// const authParameters = {
//   scopes: [
//     "api://422132b5-xxx-6651f01a1109/Read"
//   ]
// }

API 应用程序设置：

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  //API
  "AzureAd": {
    "ApplicationIdUri": "api://422132b5-xxx-6651f01a1109",
    "Authority": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/v2.0",
    "AuthorizationUrl": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/oauth2/v2.0/authorize",
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "422132b5-xxx-6651f01a1109",
    "Domain": "a364eb28-xxx-5b4f7767ad84",
    "TenantId": "a364eb28-xxx-5b4f7767ad84"
  }
  //PORTAL
  //"AzureAd": {
  //  "ApplicationIdUri": "api://03099206-xxx-e31a9ee8dec5",
  //  "Authority": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/v2.0",
  //  "AuthorizationUrl": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/oauth2/v2.0/authorize",
  //  "Instance": "https://login.microsoftonline.com/",
  //  "ClientId": "03099206-xxx-e31a9ee8dec5",
  //  "Domain": "a364eb28-xxx-5b4f7767ad84",
  //  "TenantId": "a364eb28-xxx-5b4f7767ad84"
  //}
}

如果我选择仅对机器人使用相同的 App Reg，则 API 和门户网站一切正常。但是，如果我选择在两个 AppReg 上划分 API 和 Portal，我会得到 401。即使我已经向 ApiReg 提供了对 Portal AppReg 的访问权限，我是否遗漏了什么？

【问题讨论】：

标签： reactjs asp.net-core azure-active-directory msal.js react-aad-msal

【解决方案1】：

根据您的描述，您希望使用客户端应用 AccountRequestPortal 调用 API AccountAPI。

如果是这样，您需要在 AccountAPI 应用程序中公开 API 范围，而不是在 AccountRequestPortal 应用程序中。然后在AccountRequestPortal app -> API permissions -> 添加AccountAPI 公开的API权限 -> 授予管理员同意，正如我所见，你做了相反的事情，这是不正确的。

从截图来看，AccountRequestPortal的application id是03099206-xxx-e31a9ee8dec5，AccountAPI是422132b5-xxx-6651f01a1109，如果是，那么配置应该是：

const msalConfig = {
  auth: {
    authority: 'https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84',
    clientId: '03099206-xxx-e31a9ee8dec5',
    redirectUri: redirectUri
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

const authParameters = {
  scopes: [
    "api://422132b5-xxx-6651f01a1109/Read"
  ]
}

app.settings 应该是：

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "AzureAd": {
    "ApplicationIdUri": "api://422132b5-xxx-6651f01a1109",
    "Authority": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/v2.0",
    "AuthorizationUrl": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/oauth2/v2.0/authorize",
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "03099206-xxx-e31a9ee8dec5",
    "Domain": "a364eb28-xxx-5b4f7767ad84",
    "TenantId": "a364eb28-xxx-5b4f7767ad84"
  }
}

【讨论】：