Передайте токен JWT из angular HttpClient для доступа к безопасному веб-API .NET Core

Question

Мне нужно вызвать безопасный веб-API из приложения Angular 9, представив токен. Я использую Angular с веб-API.NET CORE 3.1. Мне удалось сгенерировать токен Azure B2C, но я застрял на вызове защищенного веб-API, так как получил ошибку CORS.

Компонент Angular, вызывающий конечную точку веб-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(); 
}

Контроллер и конечная точка веб-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/