Tutoriel : Comment intégrer des clés d'accès dans Angular

Implémentation de l'authentification par mot de passe dans Angular avec TypeScript

Dans ce guide, nous expliquerons le processus d'intégration de l'authentification par mot de passe dans une application Angular à l'aide de TypeScript. Les clés d'accès offrent un moyen sécurisé et évolutif de gérer l'authentification des utilisateurs, éliminant ainsi le besoin de mots de passe traditionnels.

Voir le didacticiel complet dans notre article de blog original ici

Conditions préalables

Avant de commencer, assurez-vous de bien connaître Angular, HTML, CSS et TypeScript. De plus, assurez-vous que Node.js et NPM sont installés sur votre ordinateur. L'installation de la CLI angulaire est recommandée pour ce tutoriel :

npm install -g @angular/cli

Configuration du projet angulaire

Tout d’abord, créons un nouveau projet Angular. Dans cet exemple, nous utilisons Angular version 15.2.9 :

ng new passkeys-demo-angular

Lors de la configuration, choisissez les options suivantes :

• Partager des données d'utilisation pseudonymes : Non
• Routage angulaire :Oui
• Format de la feuille de style : CSS
• Activer SSR : Non (choisissez Oui si votre application nécessite un rendu côté serveur)

Une fois la configuration terminée, exécutez l'application pour vous assurer que tout fonctionne :

ng serve

Intégration de Corbado pour l'authentification par mot de passe

1. Configurez votre compte Corbado

Pour commencer, créez un compte sur le panneau des développeurs Corbado. Cette étape vous permet de faire l’expérience directe de l’inscription par mot de passe. Après votre inscription, créez un projet dans Corbado en sélectionnant « Corbado Complete » comme produit. Spécifiez « Web app » comme type d'application et pour le framework, sélectionnez Angular. Dans les paramètres de votre application, utilisez les informations suivantes :

• URL de l'application : http://localhost:4200
• ID de la partie de confiance : localhost

2. Intégration du composant d'interface utilisateur Corbado

Ensuite, vous devrez installer les packages requis pour l'intégration de Corbado. Accédez au répertoire racine de votre projet et installez les packages nécessaires :

npm i @corbado/web-js
npm i -D @corbado/types @types/react @types/ua-parser-js

Modifiez le app.component.ts pour initialiser Corbado au démarrage de l'application :

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. Création de composants de connexion et de profil

Générez deux composants : un pour afficher l'interface utilisateur de connexion par mot de passe et un autre pour afficher les informations utilisateur de base en cas d'authentification réussie :

ng generate component login
ng generate component profile

Mettez à jour votre app-routing.module.ts pour définir des itinéraires pour les composants de connexion et de profil :

// 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 {
}

Dans login.component.ts, configurez l'interface utilisateur d'authentification par mot de passe et définissez le comportement après une connexion réussie :

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

Et dans le login.component.html, ajoutez ce qui suit :

<div #authElement></div>

4. Configuration de la page de profil

La page de profil affichera les informations utilisateur de base (ID utilisateur et e-mail) et fournira un bouton de déconnexion. Si l'utilisateur n'est pas connecté, la page l'invitera à revenir à la page d'accueil :

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

Dans profile.component.html, affichez conditionnellement les informations de l'utilisateur en fonction de son état d'authentification :

<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>

Exécution de l'application

Une fois tout configuré, lancez l'application :

ng serve

Visitez http://localhost:4200 pour afficher l'écran de connexion, et après une authentification réussie, vous serez redirigé vers la page de profil.

Conclusion

Ce tutoriel a montré comment intégrer l'authentification par mot de passe dans une application Angular à l'aide de Corbado. Avec les outils de Corbado, la mise en œuvre de l'authentification sans mot de passe est simple et sécurisée. Pour plus de détails sur la gestion de session et d'autres fonctionnalités avancées, reportez-vous à la documentation de Corbado ou consultez l'article de blog détaillé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!