logo

Användarautentisering i Angular App med Auth0

Fokuspunkten för denna medhjälpare är att hjälpa ingenjörer att ta reda på hur man skaffar en Angular-applikation genom att utföra klientverifiering. Du kommer att förbättra en Angular starter-applikation för att repetera de medföljande säkerhetsidéerna:

  1. Konfigurera Auth0
  2. Installera Auth0 Angular SDK
  3. Lägg till inloggning till din applikation
  4. Lägg till utloggning i din ansökan
  5. Visa användarprofilinformation

1. Konfigurera Auth0

När du sökte Auth0 gjordes en annan ansökan åt dig, eller så kanske du har gjort en annan. Du kommer att behöva några insikter om den applikationen för att tala med Auth0. Du kan hämta dessa finesser från området "Applikationsinställningar" i Auth0-instrumentpanelen.

Glöm inte att konfigurera återuppringningsadresser, konfigurera utloggningsadresser, konfigurera tillåtna webbursprung till:

http://localhost:4200 (Angular lokal miljö med port)

2. Installera Auth0 Angular SDK

Kör den medföljande beställningen i ditt företagsregister för att introducera Auth0 Angular SDK:

npm install @auth0/auth0-angular

Registrera och konfigurera autentiseringsmodulen

// environment.ts

export const environment = {
  production: false,
  auth: {
    domain: 'YOUR_DOMAIN',
    clientId: 'YOUR_CLIENT_ID'
  }
};

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the module from the SDK
import { AuthModule } from '@auth0/auth0-angular';
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Import the module into the application, with configuration
    AuthModule.forRoot(environment.auth)
  ],

  bootstrap: [AppComponent],
})
export class AppModule {}

3,4. Lägg till inloggning/utloggning till din applikation

Importera AuthService-typen från SDK:n och skapa en inloggningsknapp med metoderna loginWithRedirect() &logout() från tjänsteklassen AuthService.


import { Component, OnInit } from '@angular/core';

// Import the AuthService type from the SDK
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  // Inject the authentication service into your component through the constructor
  constructor(public auth: AuthService) {}

  ngOnInit(): void {
  }

}

<header>
    <h3>Auth0 Angular</h3>
    <div *ngIf="auth.isAuthenticated$ | async; else loggedOut">
        <button (click)="auth.logout()">
          Log out
        </button>
    </div>

    <ng-template #loggedOut>
        <button (click)="auth.loginWithRedirect()">Log in</button>
    </ng-template>
</header>

5. Visa användarprofilinformation

Auth0 Angular SDK hjälper dig att snabbt återställa profildata relaterade till inloggade klienter oavsett vilken del du behöver, till exempel deras namn eller profilbild. Profildatan är tillgänglig genom den användar$ som kan upptäckas av AuthService-administrationen, du måste importera AuthService i komponenten som vi såg ovan i header.component.ts och hämta data i komponentens html-fil. 

<div *ngIf="auth.user$ | async as user">
    <h2>Welcome</h2>
    <p>{{ user.email }}</p>
</div>

Github Källa:
https://github.com/muhammadawaisshaikh/angular-auth0