如何使 MS Identity SPA 示例适用于组织和个人帐户

Question

我正在关注this link 来制作我自己的项目。

我的项目有

1. Reactjs

2. Asp.Net Core Web API

从 Hotmail 访问用户的电子邮件。Reactjs 应用程序和 WebApi 位于不同的服务器上。

这个例子几乎是我需要的，但它只接受同一组织内的帐户，不接受个人帐户。

我以为我只需要在相关配置中将租户 ID 从特定 ID 更改为“通用”即可。 我还在 Azure 上为 Web Api 和 Reactjs 注册了支持的帐户类型以使用

AnyOrg + 个人帐户

这是 Angular 的配置

{
  "auth": {
    "clientId": "28xxx12",
    "authority": "https://login.microsoftonline.com/common",
    "validateAuthority": true,
    "redirectUri": "http://localhost:4200",
    "postLogoutRedirectUri": "https://localhost:44321/signout-oidc",
    "navigateToLoginRequestUrl": true
  },
    "cache": {
        "cacheLocation": "localStorage"
    },
  "scopes": {
    "loginRequest": [ "openid", "profile", "Mail.Read", "offline_access", "user.read"]
  },
    "resources": {
      "todoListApi": {
        "resourceUri": "https://localhost:44351/api/todolist/",
        "resourceScope": "https://papayee008.onmicrosoft.com/papayee008/access_as_user"
      }
    }     
}

这里是 Web Api 的配置：

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "papayee008.onmicrosoft.com",
    "TenantId": "common",
    "ClientId": "28xxx12"
  },
  "https_port": 44351,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

但是当我尝试使用我的个人帐户登录时，它会抛出这个错误：

Answer 1

最简单的解决方案是为 SPA 和 API 使用相同的应用程序/客户端 ID。也就是说，无需为每个组件分别注册应用程序（如自述文件中所建议的那样），只需进行一个应用程序注册，您可以将 注册服务应用程序 (TodoListAPI) 和 的步骤结合起来在示例存储库的自述文件中注册客户端应用程序 (TodoListSPA)。

编辑：从最后一个屏幕截图来看，也可能是您在 AAD 门户上对“支持的帐户类型”所做的更改尚未生效。通常会有几秒钟的延迟，如果您在此期间尝试使用个人帐户登录，则会出现屏幕截图中的问题。