为 API 授权 SPA

Question

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

应用程序注册帐户请求门户：

账户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 app.settings:

{
  "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"
  //}
}

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

Answer 1

根据您的描述，您想使用客户端应用程序 AccountRequestPortal 来调用 API AccountAPI。

如果是这样，您需要在 AccountAPI 应用程序而不是 AccountRequestPortal 应用程序中公开 API 范围。然后在 AccountRequestPortal app -> API permissions -> 添加 AccountAPI 暴露的 API 权限 -> grant admin consent，我看你反了，不是正确。

从截图来看，AccountRequestPortal的application id是03099206-xxx-e31a9ee8dec5，AccountAPI是422132b5-xxx-6651f01a1109，如果是这样的话，Configuration应该是：

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"
  }
}

为 API 授权 SPA

Authorizing SPA for an API

reactjs

asp.net-core

azure-active-directory

msal.js

react-aad-msal