Tutorial: Cara Mengintegrasikan Kunci Laluan ke dalam Sudut

Melaksanakan Pengesahan Kunci Laluan dalam Sudut dengan TypeScript

Dalam panduan ini, kami akan melalui proses penyepaduan pengesahan kunci laluan ke dalam aplikasi Sudut menggunakan TypeScript. Kunci laluan menyediakan cara yang selamat dan berskala untuk mengurus pengesahan pengguna, menghilangkan keperluan untuk kata laluan tradisional.

Lihat tutorial penuh dalam catatan blog asal kami di sini

Prasyarat

Sebelum bermula, pastikan anda sudah biasa dengan Angular, HTML, CSS dan TypeScript. Selain itu, pastikan anda memasang Node.js dan NPM pada mesin anda. Memasang Angular CLI disyorkan untuk tutorial ini:

npm install -g @angular/cli

Menyediakan Projek Sudut

Mula-mula, mari buat projek Angular baharu. Dalam contoh ini, kami menggunakan versi Angular 15.2.9:

ng new passkeys-demo-angular

Semasa persediaan, pilih pilihan berikut:

• Kongsi data penggunaan nama samaran: Tidak
• Penghalaan sudut: Ya
• Format lembaran gaya: CSS
• Dayakan SSR: Tidak (Pilih Ya jika aplikasi anda memerlukan pemaparan sebelah pelayan)

Setelah persediaan selesai, jalankan aplikasi untuk memastikan semuanya berfungsi:

ng serve

Mengintegrasikan Corbado untuk Pengesahan Passkey

1. Sediakan Akaun Corbado Anda

Untuk bermula, buat akaun pada panel pembangun Corbado. Langkah ini membolehkan anda mengalami pendaftaran kunci laluan secara langsung. Selepas mendaftar, buat projek dalam Corbado dengan memilih "Corbado Complete" sebagai produk anda. Tentukan "Apl web" sebagai jenis aplikasi dan untuk rangka kerja, pilih Sudut. Dalam tetapan aplikasi anda, gunakan butiran berikut:

• URL Permohonan: http://localhost:4200
• ID Pihak Bergantung: localhost

2. Membenamkan Komponen UI Corbado

Seterusnya, anda perlu memasang pakej yang diperlukan untuk penyepaduan Corbado. Navigasi ke direktori akar projek anda dan pasang pakej yang diperlukan:

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

Ubah suai app.component.ts untuk memulakan Corbado apabila aplikasi bermula:

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. Mencipta Komponen Log Masuk dan Profil

Jana dua komponen: satu untuk memaparkan UI log masuk kunci laluan dan satu lagi untuk menunjukkan maklumat pengguna asas apabila pengesahan berjaya:

ng generate component login
ng generate component profile

Kemas kini app-routing.module.ts anda untuk menentukan laluan bagi komponen log masuk dan 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 {
}

Dalam login.component.ts, sediakan UI pengesahan kunci laluan dan tentukan gelagat selepas log masuk berjaya:

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

Dan dalam login.component.html, tambahkan yang berikut:

<div #authElement></div>

4. Menyediakan Halaman Profil

Halaman profil akan memaparkan maklumat pengguna asas (ID pengguna dan e-mel) dan menyediakan butang log keluar. Jika pengguna tidak log masuk, halaman akan menggesa mereka untuk kembali ke halaman utama:

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

Dalam profile.component.html, berikan maklumat pengguna secara bersyarat berdasarkan keadaan pengesahan mereka:

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

Menjalankan Aplikasi

Setelah semuanya disediakan, jalankan aplikasi:

ng serve

Lawati http://localhost:4200 untuk melihat skrin log masuk, dan selepas pengesahan berjaya, anda akan dialihkan ke halaman profil.

Kesimpulan

Tutorial ini menunjukkan cara untuk mengintegrasikan pengesahan kunci laluan ke dalam aplikasi Sudut menggunakan Corbado. Dengan alatan Corbado, melaksanakan pengesahan tanpa kata laluan adalah mudah dan selamat. Untuk butiran lanjut tentang pengurusan sesi dan ciri lanjutan lain, rujuk dokumentasi Corbado atau semak catatan blog terperinci.

Atas ialah kandungan terperinci Tutorial: Cara Mengintegrasikan Kunci Laluan ke dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!