تنفيذ مصادقة مفتاح المرور في Angular باستخدام TypeScript

في هذا الدليل، سنتعرف على عملية دمج مصادقة مفتاح المرور في تطبيق Angular باستخدام TypeScript. توفر مفاتيح المرور طريقة آمنة وقابلة للتطوير لإدارة مصادقة المستخدم، مما يلغي الحاجة إلى كلمات المرور التقليدية.

شاهد البرنامج التعليمي الكامل في منشور مدونتنا الأصلي هنا

المتطلبات الأساسية

قبل البدء، تأكد من أنك على دراية بـ Angular وHTML وCSS وTypeScript. بالإضافة إلى ذلك، تأكد من تثبيت Node.js وNPM على جهازك. يوصى بتثبيت Angular CLI في هذا البرنامج التعليمي:

npm install -g @angular/cli

إعداد المشروع الزاوي

أولاً، لنقم بإنشاء مشروع Angular جديد. في هذا المثال، نستخدم الإصدار Angular 15.2.9:

ng new passkeys-demo-angular

أثناء الإعداد، اختر الخيارات التالية:

• مشاركة بيانات الاستخدام باسم مستعار: لا
• التوجيه الزاوي: نعم
• تنسيق ورقة الأنماط: CSS
• تمكين SSR: لا (اختر نعم إذا كان التطبيق الخاص بك يتطلب عرضًا من جانب الخادم)

بمجرد اكتمال الإعداد، قم بتشغيل التطبيق للتأكد من أن كل شيء يعمل:

ng serve

دمج Corbado لمصادقة مفتاح المرور

1. قم بإعداد حساب كوربادو الخاص بك

للبدء، قم بإنشاء حساب على لوحة مطوري Corbado. تتيح لك هذه الخطوة تجربة تسجيل مفتاح المرور بشكل مباشر. بعد التسجيل، قم بإنشاء مشروع داخل Corbado عن طريق تحديد "Corbado Complete" كمنتجك. حدد "تطبيق الويب" كنوع التطبيق، وبالنسبة للإطار، حدد Angular. في إعدادات التطبيق، استخدم التفاصيل التالية:

• عنوان URL للتطبيق: http://localhost:4200
• معرف الطرف المعتمد: المضيف المحلي

2. تضمين مكون واجهة المستخدم Corbado

بعد ذلك، ستحتاج إلى تثبيت الحزم المطلوبة لتكامل Corbado. انتقل إلى الدليل الجذر لمشروعك وقم بتثبيت الحزم اللازمة:

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

تعديل app.component.ts لتهيئة Corbado عند بدء تشغيل التطبيق:

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: "",
                darkMode: 'off'
            });
            this.isInitialized = true;
        } catch (error) {
            console.error('Initialization failed:', error);
        }
    }
}

3. إنشاء مكونات تسجيل الدخول والملف الشخصي

قم بإنشاء مكونين: أحدهما لعرض واجهة مستخدم تسجيل الدخول بمفتاح المرور والآخر لعرض معلومات المستخدم الأساسية عند المصادقة الناجحة:

ng generate component login
ng generate component profile

قم بتحديث app-routing.module.ts الخاص بك لتحديد مسارات تسجيل الدخول ومكونات الملف الشخصي:

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

في تسجيل الدخول.component.ts، قم بإعداد واجهة مستخدم مصادقة مفتاح المرور وتحديد السلوك بعد تسجيل الدخول الناجح:

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

وفي ملف login.component.html أضف ما يلي:

4. إعداد صفحة الملف الشخصي

ستعرض صفحة الملف الشخصي معلومات المستخدم الأساسية (معرف المستخدم والبريد الإلكتروني) وتوفر زر تسجيل الخروج. إذا لم يقوم المستخدم بتسجيل الدخول، فستطالبه الصفحة بالعودة إلى الصفحة الرئيسية:

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

في ملف Profile.component.html، عرض معلومات المستخدم بشكل مشروط بناءً على حالة المصادقة الخاصة به:

    

            
Profile Page
            

                

                    User-ID: {{user.sub}}
                    

                    Email: {{user.email}}
                
            
            Logout
        
    

            
You're not logged in.
            
Please go back to home to log in.
        
    

تشغيل التطبيق

بمجرد إعداد كل شيء، قم بتشغيل التطبيق:

ng serve

قم بزيارة http://localhost:4200 لعرض شاشة تسجيل الدخول، وبعد المصادقة الناجحة، سيتم إعادة توجيهك إلى صفحة الملف الشخصي.

خاتمة

يوضح هذا البرنامج التعليمي كيفية دمج مصادقة مفتاح المرور في تطبيق Angular باستخدام Corbado. باستخدام أدوات Corbado، أصبح تنفيذ المصادقة بدون كلمة مرور أمرًا مباشرًا وآمنًا. لمزيد من التفاصيل حول إدارة الجلسة والميزات المتقدمة الأخرى، راجع وثائق Corbado أو راجع منشور المدونة التفصيلي.