Tutorial: So integrieren Sie Passkeys in Angular

Implementieren der Passkey-Authentifizierung in Angular mit TypeScript

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

Voraussetzungen

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

Einrichten des Angular-Projekts

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:

• Pseudonyme Nutzungsdaten weitergeben:Nein
• Winkelführung:Ja
• Stylesheet-Format: CSS
• SSR aktivieren: Nein (Wählen Sie Ja, wenn Ihre Anwendung serverseitiges Rendering erfordert)

Sobald die Einrichtung abgeschlossen ist, führen Sie die Anwendung aus, um sicherzustellen, dass alles funktioniert:

ng serve

Integration von Corbado für die Passkey-Authentifizierung

1. Richten Sie Ihr Corbado-Konto ein

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:

• Anwendungs-URL: http://localhost:4200
• Relying Party ID: localhost

2. Einbetten der Corbado-UI-Komponente

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

3. Erstellen von Anmelde- und Profilkomponenten

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>

4. Einrichten der Profilseite

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>

Ausführen der Anwendung

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.

Abschluss

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!