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

Question

我需要通过出示令牌从 Angular 9 应用程序调用安全 Web API。我将 Angular 与 .NET CORE 3.1 Web API 一起使用。我已成功生成 Azure B2C 令牌，但由于出现 CORS 错误，我坚持调用安全 Web 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 策略（考虑到您使用的是标头身份验证而不是 cookie，这并不太危险）。

所以你的配置服务方法应该是这样的：

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

然后你的配置方法应该是这样的：

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/