从 angular HttpClient 传递 JWT 令牌以访问安全的 .NET Core Web API

Question

我需要通过出示令牌从 Angular 9 应用程序调用安全 Web API。我正在使用 Angular 和 .NET CORE 3.1 Web API。我已经成功生成了 Azure B2C 令牌，但由于出现 CORS 错误而无法调用安全网络 api。

Angular 组件调用 Web API 端点

testAPI1(){
    console.log("calling test API ...");

    const myheaders = new HttpHeaders({
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': this.authService.accessToken
    });

    this.http.get('https://localhost:5001/txn/v1/Dashboard/GetMessage', {headers: myheaders})
        .subscribe((data)=>{
            console.warn(data);
        })
}

授权服务

@Injectable()
export class AuthService implements OnInit{

constructor(
    private oauthService: OAuthService,
    private router: Router

){// other code}


public get accessToken() { 
    return this.oauthService.getAccessToken(); 
}

Web API 控制器和端点

[Authorize]
[Route("txn/v1/[controller]/[action]")]
[EnableCors("CorsPolicy")]
[ApiController]
public class DashboardController : ControllerBase
{
    [HttpGet]
    public ActionResult<HelloMessage> GetMessage()
    {
        var result = new HelloMessage()
        {
            GivenName = "james",
            ReturnMessage = "Dashboard@ Hello, Welcome to Digital tech"
        };
        return result;
    }

Startup.cs

public void ConfigureServices(IServiceCollection services)
    {
       //JWT Authentication 
        services.AddAuthentication(options =>
        {
            options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
            options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        }).AddJwtBearer(jwtConfig => 
            {
                jwtConfig.Audience = Configuration["AzureAdB2C:ResourceId"];
                jwtConfig.Authority = $"{Configuration["AzureAdB2C:Instance"]}{Configuration["AzureAdB2C:TanantId"]}";
                jwtConfig.RequireHttpsMetadata = false;
                jwtConfig.SaveToken = true;
                jwtConfig.TokenValidationParameters = new TokenValidationParameters
                {
                    ValidateIssuerSigningKey = true,
                    ValidateIssuer =true,
                    ValidateAudience = true,
                    ValidateLifetime = true

                };
        });

 //CORS policy
 services.AddCors(options =>
                          options.AddPolicy("CorsPolicy", builder => builder.AllowAnyOrigin()));

错误

Answer 1

CORS 的政策可能有点挑剔。因此，我建议您尝试一个非常开放的 CORS 策略（考虑到您使用的是 header 身份验证而不是 cookie，这并不太危险）。

所以您的配置服务方法应该如下所示：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

然后您的 Configure 方法应该类似于：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseCors( options => options.WithOrigins("http://example.com").AllowAnyMethod() );

    app.UseMvc();
}

请注意，Configure 方法中的顺序很重要。对 CORS 的调用必须 相对较早，如果不是管道中的第一个中间件的话。

如果可行，则向后工作以慢慢添加策略并查看哪个失效。 CORS 可能真的很挑剔，所以在基本示例中允许所有内容然后慢慢添加内容会更好。

在此处阅读更多内容：https://dotnetcoretutorials.com/2017/01/03/enabling-cors-asp-net-core/

从 angular HttpClient 传递 JWT 令牌以访问安全的 .NET Core Web API

Pass JWT token from angular HttpClient to access secure .NET Core Web API

azure-active-directory

asp.net-core-webapi

.net-core-authorization

angular9

.net-core-3.1

Angular 组件调用 Web API 端点

授权服务

Web API 控制器和端点

Startup.cs

错误