In diesem Leitfaden gehen wir durch den Prozess der Integration der Passkey-Authentifizierung in eine Angular-Anwendung mithilfe von TypeScript. Passkeys bieten eine sichere und skalierbare Möglichkeit zur Verwaltung der Benutzerauthentifizierung und machen herkömmliche Passwörter überflüssig.
Das vollständige Tutorial finden Sie hier in unserem Original-Blogbeitrag
Bevor Sie beginnen, stellen Sie sicher, dass Sie mit Angular, HTML, CSS und TypeScript vertraut sind. Stellen Sie außerdem sicher, dass Node.js und NPM auf Ihrem Computer installiert sind. Für dieses Tutorial wird die Installation der Angular CLI empfohlen:
npm install -g @angular/cli
Erstellen wir zunächst ein neues Angular-Projekt. In diesem Beispiel verwenden wir Angular Version 15.2.9:
ng new passkeys-demo-angular
Wählen Sie während der Einrichtung die folgenden Optionen:
Sobald die Einrichtung abgeschlossen ist, führen Sie die Anwendung aus, um sicherzustellen, dass alles funktioniert:
ng serve
Erstellen Sie zunächst ein Konto im Corbado-Entwicklerpanel. Mit diesem Schritt können Sie die Passkey-Anmeldung aus erster Hand erleben. Erstellen Sie nach der Registrierung ein Projekt in Corbado, indem Sie „Corbado Complete“ als Produkt auswählen. Geben Sie als Anwendungstyp „Web-App“ an und wählen Sie als Framework Angular aus. Verwenden Sie in Ihren Anwendungseinstellungen die folgenden Details:
Als nächstes müssen Sie die erforderlichen Pakete für die Corbado-Integration installieren. Navigieren Sie zum Stammverzeichnis Ihres Projekts und installieren Sie die erforderlichen Pakete:
npm i @corbado/web-js npm i -D @corbado/types @types/react @types/ua-parser-js
Ändern Sie app.component.ts, um Corbado beim Start der Anwendung zu initialisieren:
import { Component, OnInit } from '@angular/core'; import Corbado from "@corbado/web-js"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'passkeys-demo-angular'; isInitialized = false; constructor() { } ngOnInit(): void { this.initialize(); } async initialize() { try { await Corbado.load({ projectId: "<Your Corbado Project ID>", darkMode: 'off' }); this.isInitialized = true; } catch (error) { console.error('Initialization failed:', error); } } }
Generieren Sie zwei Komponenten: eine zum Anzeigen der Passkey-Login-Benutzeroberfläche und eine weitere zum Anzeigen grundlegender Benutzerinformationen nach erfolgreicher Authentifizierung:
ng generate component login ng generate component profile
Aktualisieren Sie Ihre app-routing.module.ts, um Routen für die Anmelde- und Profilkomponenten zu definieren:
// src/app/app-routing.module.ts import { NgModule } from '@angular/core'; import { ProfileComponent } from "./profile/profile.component"; import { RouterModule, Routes } from "@angular/router"; import { LoginComponent } from "./login/login.component"; const routes: Routes = [ { path: 'profile', component: ProfileComponent }, { path: 'login', component: LoginComponent }, { path: '', component: LoginComponent }, { path: '**', redirectTo: '/' } ] @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class AppRoutingModule { }
Richten Sie in login.component.ts die Benutzeroberfläche für die Passkey-Authentifizierung ein und definieren Sie das Verhalten nach einer erfolgreichen Anmeldung:
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; import { Router } from '@angular/router'; import Corbado from "@corbado/web-js"; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit, AfterViewInit { @ViewChild('authElement', { static: false }) authElement!: ElementRef; // Access the element constructor(private router: Router) { } ngOnInit() { if (Corbado.user) { this.router.navigate(['/profile']); } } ngAfterViewInit() { // Mount the Corbado auth UI after the view initializes Corbado.mountAuthUI(this.authElement.nativeElement, { onLoggedIn: () => this.router.navigate(['/profile']), // Use Angular's router instead of window.location }); } }
Und fügen Sie in login.component.html Folgendes hinzu:
<div #authElement></div>
Auf der Profilseite werden grundlegende Benutzerinformationen (Benutzer-ID und E-Mail) angezeigt und eine Schaltfläche zum Abmelden bereitgestellt. Wenn der Benutzer nicht angemeldet ist, wird er von der Seite aufgefordert, zur Startseite zurückzukehren:
import { Component } from '@angular/core'; import { Router } from "@angular/router"; import Corbado from "@corbado/web-js"; @Component({ selector: 'app-profile', templateUrl: './profile.component.html', styleUrls: ['./profile.component.css'] }) export class ProfileComponent { user = Corbado.user constructor(private router: Router) { } async handleLogout() { await Corbado.logout() await this.router.navigate(['/']); } }
In „profile.component.html“ die Informationen des Benutzers basierend auf seinem Authentifizierungsstatus bedingt rendern:
<div> <ng-container *ngIf="user; else notLoggedIn"> <div> <h1>Profile Page</h1> <div> <p> User-ID: {{user.sub}} <br /> Email: {{user.email}} </p> </div> <button (click)="handleLogout()">Logout</button> </div> </ng-container> <ng-template #notLoggedIn> <div> <p>You're not logged in.</p> <p>Please go back to <a routerLink="/">home</a> to log in.</p> </div> </ng-template> </div>
Sobald alles eingerichtet ist, führen Sie die Anwendung aus:
ng serve
Besuchen Sie http://localhost:4200, um den Anmeldebildschirm anzuzeigen. Nach erfolgreicher Authentifizierung werden Sie zur Profilseite weitergeleitet.
In diesem Tutorial wurde gezeigt, wie Sie mithilfe von Corbado die Passkey-Authentifizierung in eine Angular-Anwendung integrieren. Mit den Tools von Corbado ist die Implementierung einer passwortlosen Authentifizierung einfach und sicher. Weitere Informationen zur Sitzungsverwaltung und anderen erweiterten Funktionen finden Sie in der Dokumentation von Corbado oder im ausführlichen Blogbeitrag.
Das obige ist der detaillierte Inhalt vonTutorial: So integrieren Sie Passkeys in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!