टाइपस्क्रिप्ट के साथ एंगुलर में पासकी प्रमाणीकरण लागू करना

इस गाइड में, हम टाइपस्क्रिप्ट का उपयोग करके पासकी प्रमाणीकरण को एक कोणीय एप्लिकेशन में एकीकृत करने की प्रक्रिया से गुजरेंगे। पासकीज़ पारंपरिक पासवर्ड की आवश्यकता को दूर करते हुए, उपयोगकर्ता प्रमाणीकरण को प्रबंधित करने का एक सुरक्षित और स्केलेबल तरीका प्रदान करते हैं।

यहां हमारे मूल ब्लॉग पोस्ट में पूरा ट्यूटोरियल देखें

आवश्यक शर्तें

शुरू करने से पहले, सुनिश्चित करें कि आप Angular, HTML, CSS और टाइपस्क्रिप्ट से परिचित हैं। इसके अतिरिक्त, सुनिश्चित करें कि आपकी मशीन पर Node.js और NPM स्थापित हैं। इस ट्यूटोरियल के लिए एंगुलर सीएलआई स्थापित करने की अनुशंसा की जाती है:

npm install -g @angular/cli

कोणीय परियोजना की स्थापना

सबसे पहले, आइए एक नया एंगुलर प्रोजेक्ट बनाएं। इस उदाहरण में, हम Angular संस्करण 15.2.9 का उपयोग कर रहे हैं:

ng new passkeys-demo-angular

सेटअप के दौरान, निम्नलिखित विकल्प चुनें:

• छद्मनाम उपयोग डेटा साझा करें: नहीं
• कोणीय रूटिंग: हां
• स्टाइलशीट प्रारूप: सीएसएस
• SSR सक्षम करें: नहीं (यदि आपके एप्लिकेशन को सर्वर-साइड रेंडरिंग की आवश्यकता है तो हां चुनें)

एक बार सेटअप पूरा हो जाने पर, यह सुनिश्चित करने के लिए एप्लिकेशन चलाएं कि सब कुछ काम कर रहा है:

ng serve

पासकी प्रमाणीकरण के लिए कॉर्बाडो को एकीकृत करना

1. अपना कॉर्बाडो खाता सेट करें

शुरू करने के लिए, Corbado डेवलपर पैनल पर एक खाता बनाएं। यह चरण आपको पासकी साइनअप का प्रत्यक्ष अनुभव करने की अनुमति देता है। पंजीकरण के बाद, अपने उत्पाद के रूप में "कॉर्बाडो कम्प्लीट" का चयन करके कॉर्बाडो के भीतर एक प्रोजेक्ट बनाएं। एप्लिकेशन प्रकार के रूप में "वेब ऐप" निर्दिष्ट करें, और फ्रेमवर्क के लिए, एंगुलर का चयन करें। अपनी एप्लिकेशन सेटिंग में, निम्नलिखित विवरण का उपयोग करें:

• एप्लिकेशन यूआरएल: http://localhost:4200
• भरोसेमंद पार्टी आईडी: लोकलहोस्ट

2. कॉर्बाडो यूआई घटक को एम्बेड करना

इसके बाद, आपको कॉर्बाडो एकीकरण के लिए आवश्यक पैकेज स्थापित करने की आवश्यकता होगी। अपने प्रोजेक्ट की रूट निर्देशिका पर जाएँ और आवश्यक पैकेज स्थापित करें:

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

एप्लिकेशन शुरू होने पर कॉर्बाडो को प्रारंभ करने के लिए ऐप.component.ts को संशोधित करें:

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

लॉगिन और प्रोफ़ाइल घटकों के लिए मार्गों को परिभाषित करने के लिए अपना ऐप-रूटिंग.मॉड्यूल.टीएस अपडेट करें:

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

login.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 पर जाएं, और सफल प्रमाणीकरण के बाद, आपको प्रोफ़ाइल पृष्ठ पर पुनः निर्देशित किया जाएगा।

निष्कर्ष

इस ट्यूटोरियल ने प्रदर्शित किया कि कॉर्बाडो का उपयोग करके एंगुलर एप्लिकेशन में पासकी प्रमाणीकरण को कैसे एकीकृत किया जाए। कॉर्बाडो के टूल के साथ, पासवर्ड रहित प्रमाणीकरण लागू करना सीधा और सुरक्षित है। सत्र प्रबंधन और अन्य उन्नत सुविधाओं पर अधिक जानकारी के लिए, कॉर्बाडो के दस्तावेज़ देखें या विस्तृत ब्लॉग पोस्ट देखें।