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

Question

I need to call secure Web API from Angular 9 application by presenting the token. I am using Angular with .NET CORE 3.1 Web API. I have managed to generate Azure B2C token but stuck to call secure web api as I got CORS error.

Angular component calling Web API end-point

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);
        })
}

Auth Service

@Injectable()
export class AuthService implements OnInit{

constructor(
    private oauthService: OAuthService,
    private router: Router

){// other code}


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

Web API controller & endpoint

[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()));

error

got CORS error Please share the detailed error message, so that we can troubleshoot the issue better. Besides, configuring with both AllowAnyOrigin and AllowCredentials methods is not recommended. You can try to specify the allowed origins using WithOrigins method. — Fei Han
– Fei Han, Commented Jul 8, 2020 at 2:04
I have update question with error and also paste JWT authentication method, not sure if I did mistake there? — K.Z
– K.Z, Commented Jul 8, 2020 at 12:18

MindingData · Accepted Answer · 2020-07-07 20:17:56Z

2

Policies for CORS can be a bit finicky. So I would recommend maybe trying for a pretty open CORS policy (Which isn't too dangerous given you are using header authentication and not a cookie).

So your configure services method should look like so :

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

And then your Configure method should be something like :

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

    app.UseMvc();
}

Note that the order inside the Configure method is important. The call to CORS must be relatively early on, if not the first middleware in your pipeline.

If that works, then work backwards to slowly add policies and see which one breaks. CORS can be really finicky so it works better to allow everything in a basic example and then add thing slowly in.

More reading here : https://dotnetcoretutorials.com/2017/01/03/enabling-cors-asp-net-core/

answered Jul 7, 2020 at 20:17

MindingData

12.6k6 gold badges53 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

K.Z Over a year ago

I have tried as you have suggested but getting no luck, is throwing following error that I have upload in question at bottom

MindingData Over a year ago

And when you call this API directly (Postman, In your browser etc), and check the headers, you can see it's returning the CORS headers that you expect? Because it's saying that it's not returning Access-Control-Origin which means CORS is not set up correctly.

K.Z Over a year ago

I have to change the CORS as following and managed to run and call Web API but getting 401 unauthorized error services.AddCors(options => options.AddPolicy("CorsPolicy", builder => { builder .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() ; }));

Collectives™ on Stack Overflow

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

Angular component calling Web API end-point

Auth Service

Web API controller & endpoint

Startup.cs

error

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Angular component calling Web API end-point

Auth Service

Web API controller & endpoint

Startup.cs

error

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related