Hi there,
This question might have been asked a zillion time, but I cannot find a solution for my problem.
I am new the Auth and Web Security so please bear with me.
I build an Angular 9.x application that have a .Net Core 5 Backend Application
I am a have big difficulties to implement auth0 security over my application.
I have been able to implement a login mechanism to my app. But a fail to call the call an API EndPoint that is secure with Auth0.
Chrome keeps responding me:
message: “Http failure response for htps://localhost:44335/device/getall: 401 OK” when I call my API.
Just like the Token isn’t send at all
I’ve reviewed the tutorial maybe 4 or 5 time but still I can’t figure out what wrong.
I have set up.
- a Application, called “EquipmentApp”
- a API, called “EquipmentAPI”
The Application setting are:
- Application type: Single Page Apllication
- Token Endpoint authentication Method: None
- Name: EquipmentApp
- Domain: dev-*******.us.auth0.com
- ClientID : Pl*********************************sxel
- ClientSecret: [ …]
- Allowed Callback, Allowed Logout URLs, Allowed Web Origins, Allowed Origins (CORS) are set to “htp://localhost:4200”
- GrantType: Implicit, Autorization Code, RefreshToken
- Metadata: [none]
The API Setting are:
- Id: 605f*****************
- Name: EquipmentAPI
- identifier: htps://localhost:44335/
- Signin Algorithm: RS256
- Permissions: read:device
- Other settings have default value.
I’ve replace http word with htp (Because new user can’t post more the 3 link …)
Angular:
app.module.ts
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { RouterModule } from ‘@angular/router’;
import { AppComponent } from ‘./app.component’;
import { NavMenuComponent } from ‘./nav-menu/nav-menu.component’;
import { HomeComponent } from ‘./home/home.component’;
import { DevicesComponent } from ‘./Device/devices.component’;
import { DeviceComponent } from ‘./Device/device.component’;
import { SelectListComponent } from ‘./components/selectlist.component/select.list.component’;
import { GeneralNoteComponent } from ‘./components/generalNote.compoment/generalNote.compoment’;
import { DeviceMaintenanceComponent } from “./components/devicemaintenance.component/devicemaintenance.component”;
import { DeviceLoanComponent } from ‘./components/deviceloan.component/deviceloan.component’;
import { AuthModule } from ‘@auth0/auth0-angular’;
import { LoggedUserComponent } from ‘./components/loggedUser.Component/loggedUser.Component’;
import { LoginComponent } from ‘./components/login.component/login.component’;
import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’;
import { AuthHttpInterceptor, AuthGuard } from ‘@auth0/auth0-angular’;
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
DevicesComponent,
DeviceComponent,
SelectListComponent,
DeviceMaintenanceComponent,
DeviceLoanComponent,
GeneralNoteComponent,
LoggedUserComponent,
LoginComponent
],
imports: [
BrowserModule.withServerTransition({ appId: ‘ng-cli-universal’ }),
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: ‘’, component: DevicesComponent, canActivate: [AuthGuard], pathMatch: ‘full’ },
{ path: ‘login’, component: LoginComponent },
{ path: ‘device’, component: DeviceComponent, canActivate: [AuthGuard] },
{ path: ‘generalNote’, component: GeneralNoteComponent, canActivate: [AuthGuard] }
]),
AuthModule.forRoot({
domain: ‘dev-.us.auth0.com’,
clientId: 'Pl********xel’, // EquipmentApp
audience: ‘htps://dev-*******.us.auth0.com/api/v2/’, // EquipmentApp
scope: ‘read:current_user’,
httpInterceptor: {
allowedList: [
{
uri: 'htps://dev-**** ***.us.auth0.com/api/v2/*',
tokenOptions: {
audience:'htps://dev-******.us.auth0.com/api/v2/',
scope: 'read:current_user'
}
}
]
}
})
],
providers: [
AuthGuard,
{ provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
.Net API
startup.cs
… more code …
services.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
options.Authority = “htps://dev-******.us.auth0.com/”;
options.Audience = “htps://localhost:44335/”;
options.Events = new JwtBearerEvents
{
OnAuthenticationFailed = context =>
{
throw new Exception($“Authentication failed for MetadataAddress {context.Options.MetadataAddress} with exception: {context.Exception}”);
}
};
});
… more code …
DeviceController.cs
… more code …
[Authorize]
[ApiController]
[Route(“[controller]”)]
public class DeviceController : ControllerBase
{
private readonly IDeviceService _deviceService;
public DeviceController(IDeviceService deviceService)
{
_deviceService = deviceService;
}
[HttpGet("GetAll")]
public async Task<IEnumerable<Device>> GetAll()
{
return await _deviceService.GetAllAsync();
}
… more code …