带有 spa 和 webapi 的 azure ad b2c

Question

当 SPA 与后端 API 交谈时，我对 Azure B2C 的工作方式感到困惑。 我们有一个 VUE 应用程序，可以从 ASPNet 核心 Web API 检索数据。 我将 VUE 与 Azure B2C 上的 APP 连接，我可以登录并检索访问令牌，但是。

SPA 和 API 之间的身份验证/授权如何工作？

TIA

Answer 1

Azure B2C 使用 OATH 2 / OpenID Connect 作为保护单页应用程序和 API 的主要方式。 OATH 2 使用Json Web 令牌（无状态加密签名令牌）在多个服务之间提供身份验证（OpenID Connect 是 OATH 2 的扩展）。

客户端应用程序（在本例中为 SPA）会向 Azure AD B2C 请求 JWT 令牌。 如果用户登录到 B2C，那么安全令牌服务将发布令牌供 SPA 使用。

当 SPA 调用 API 时，来自安全令牌服务（在 OpenID Connect 流中）的 ID 令牌将被发送到Authorization标头中的 API ( Authorization: Bearer $token$ )。 然后，API 可以根据 JWT 的签名块验证令牌，以验证令牌是由安全令牌服务颁发的并且未被修改。 由于 STS 和 API 之间存在信任关系（API 信任 STS），因此 API 会根据呈现的 JWT 对各种 api 调用进行身份验证和授权。

由于您已经让 SPA 工作并获取令牌，因此您接下来需要做的就是设置 Web API 以接受来自 B2C 的 JWT。 使用Microsoft.AspNetCore.Authentication.JwtBearer下面的代码应该可以帮助您启动并运行

services.AddAuthentication(options =>
  { 
    options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme; 
  })
  .AddJwtBearer(jwtOptions =>
  {
    jwtOptions.Authority = $"https://login.microsoftonline.com/tfp/{Configuration["AzureAdB2C:Tenant"]}/{Configuration["AzureAdB2C:Policy"]}/v2.0/";
    jwtOptions.Audience = Configuration["AzureAdB2C:ClientId"];
    jwtOptions.Events = new JwtBearerEvents
    {
      OnAuthenticationFailed = AuthenticationFailed
    };
  });

（以上代码来自azure samples ，不再维护。

虽然理想情况下 SPA 和 API 都将作为单独的客户端注册到 STS，但您可以使用相同的客户端 ID，因此您不需要保留两组令牌，一组用于 SPA 客户端，一组用于 API。 在我正在处理的当前项目中，多个 SPA 被注册为客户端，然后 API 有一个AddJwtBearer接受多个受众

.AddJwtBearer(options =>
{
    options.Authority = $"https://login.microsoftonline.com/tfp/{Configuration["AzureAdB2C:Tenant"]}/{Configuration["AzureAdB2C:Policy"]}/v2.0/";
    options.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
    {
        ValidateIssuer = true,
        ValidAudiences = new List<string> 
        {
            Configuration["AzureAdB2C:ClientId1"];,
            Configuration["AzureAdB2C:ClientId2"]; 
        }
    };
}

这为我的应用程序提供了足够的安全性，并且 API 不需要向 IDP 注册为客户端。

Answer 2

我希望您了解 Web 应用程序/SPA 注册过程，例如

1. 选择应用程序注册，选择拥有的应用程序选项卡，然后选择 webapp1 应用程序。
2. 在 Web 下，选择添加 URI 链接，输入 http://localhost:6420。
3. 在隐式授予下，选中访问令牌和 ID 令牌的复选框，然后选择保存。
4. 记录应用程序（客户端）ID，以便在稍后更新单页 Web 应用程序中的代码时使用。

以同样的方式，我们将创建一个 Web API

1. 选择应用程序注册，然后选择新注册。
2. 输入应用程序的名称。 例如， webapi1 。
3. 在“重定向 URI”下，选择“Web”，然后输入 Azure AD B2C 应返回应用程序请求的任何令牌的终结点。 在本教程中，示例在本地运行并侦听 http://localhost:5000。
4. 记录应用程序（客户端）ID 以供后续步骤使用。

然后我们需要配置范围。 这些范围提供了一种管理对受保护资源的访问的方法。 Web API 使用范围来实现基于范围的访问控制。 请仔细阅读有关如何为 Web API 提供范围的文档。

并且需要在我们最初创建的Web APP中为Web API授予权限。 此权限有助于在 Web APP 上生成的访问令牌在 Web API 上进行验证/自动化。 请按照文档中提到的步骤进行