Heim > Web-Frontend > js-Tutorial > Hauptteil

Tutorial: So integrieren Sie Passkeys in Angular

王林
Freigeben: 2024-08-28 06:10:36
Original
1106 Leute haben es durchsucht

Tutorial: How to Integrate Passkeys into 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
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren
Nach dem Login kopieren

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
Nach dem Login kopieren

Ä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);
        }
    }
}
Nach dem Login kopieren

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
Nach dem Login kopieren

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 {
}
Nach dem Login kopieren

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
        });
    }
}
Nach dem Login kopieren

Und fügen Sie in login.component.html Folgendes hinzu:

<div #authElement></div>
Nach dem Login kopieren

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(['/']);
    }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ausführen der Anwendung

Sobald alles eingerichtet ist, führen Sie die Anwendung aus:

ng serve
Nach dem Login kopieren
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage