
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Ushbu seriyaning   biz zamonaviy autentifikatsiyaning "muborak tojini" - 100% parolsiz ilovani o'rgandik. Parollar, xeshlar va qayta o'rnatish elektron xabarlarini olib tashladik, ularning o'rniga WebAuthn API ning kriptografik elegansiyasini qo'shdik. 1-qismida Ammo haqiqiy dunyo kamdan-kam hollarda shunchalik toza bo'ladi. Sizda parollaringizni biometriyadan ko'ra ko'proq ishonadigan merosxo'r foydalanuvchilar bor. Sizda xavfsizlik kalitlari hali standart bo'lmagan korporativ muhitlar mavjud. Eng muhimi, sizda "O'tish davri" bor - bu eski narsalarni qo'llab-quvvatlashingiz kerak bo'lgan, shu bilan birga yangisini faol ravishda ilgari surishingiz kerak bo'lgan noqulay bosqich. Bugun biz Gibrid Modelni qurmoqdamiz. Biz bitta, aqlli kirish shaklini yaratamiz, u avtomatik ravishda foydalanuvchi Passkey ga ega ekanligini aniqlaydi, agar mavjud bo'lsa, biometriyani ishga tushiradi, lekin zarur bo'lganda an'anaviy parolga yumshoq tarzda qaytadi. Shuningdek, biz Shartli vositachilik (Passkey Autofill) - foydalanuvchiga kirish maydoniga fokuslanganda kirishga imkon beradigan " sehrli" UX haqida gaplashamiz. Texnologiya taksi Ushbu qo'llanmaga amal qilish uchun sizga quyidagilar kerak bo'ladi: 
 
 
 
 
  O'qish uchun mo'ljallangan sinflar va konstruktorlarni targ'ib qilishdan foydalanish. PHP 8.2+:  Eng so'nggi Xavfsizlik Komponenti yaxshilanishlaridan foydalanish. Symfony 7.4: : Symfony'da WebAuthn uchun sanoat standarti. web-auth/webauthn-symfony-bundle  Nol-Node.js frontend tajribasi uchun. Stimulus & AssetMapper: UX Masterpiece: Qanday ishlaydi Foydalanuvchilarni ikkita alohida kirish tugmalari bilan chalg'itish o'rniga ("Parol bilan kirish" va "Passkey bilan kirish"), biz ularga bitta, oqlangan kirishni taqdim etamiz: Ularning elektron pochta manzili. 
 
 
 
 
 Foydalanuvchi o'z elektron pochta manzilini kiritadi va "Davom etish" tugmasini bosadi. Fon ostida, bizning Symfony 7.4 backendimiz chaqmoq tezligida tekshiruv o'tkazadi.  Biz darhol mahalliy WebAuthn biometrik promptini (FaceID, TouchID, Windows Hello) ishga tushiramiz. Agar foydalanuvchida ro'yxatdan o'tgan Passkey bo'lsa:  Shakl an'anaviy parol kiritish maydonini ochish uchun muloyimlik bilan kengayadi. Agar foydalanuvchi parolga tayanadigan bo'lsa: Bu Google va GitHub kabi texnologiya gigantlari tomonidan ishlatiladigan aniq oqimdir va bugun biz uni standart Symfony vositalari bilan to'liq qurmoqdamiz! Domain modeli: Ikki dunyoga ko'prik Bizning   bizning User entitimizda hatto parol maydoni ham yo'q edi. Gibrid oqimni qo'llab-quvvatlash uchun biz uni qayta kiritishimiz kerak, lekin ixtiyoriy atribut sifatida. Bu imtiyozli xavfsizlik modeliga imkon beradi: foydalanuvchi oddiy paroldan boshlashi va keyin Passkey ro'yxatdan o'tkazish orqali o'z hisobini "yangilashi" mumkin, bu oxir-oqibat kirishning asosiy (va eng xavfsiz) usuli bo'lib qoladi. avvalgi toza parolsiz sozlamamizda  ni amalga oshirish orqali, shu bilan birga parol maydonini nullable saqlash, biz an'anaviy kirish uchun Symfonyning xavfsizlik talablarini qondiramiz, har bir foydalanuvchini merosxo'r atributiga majburlamasdan. Ushbu me'moriy tanlov, merosxo'r muvofiqligini saqlashda, shu bilan birga Passkey ning ilovalar uchun kelajakda ishlashi mumkin bo'lgan standart ekanligini aniq ko'rsatishda juda muhimdir. PasswordAuthenticatedUserInterface // src/Entity/User.php
namespace App\Entity;

use App\Repository\UserRepository;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
use Symfony\Component\Security\Core\User\UserInterface;
use Symfony\Component\Uid\Uuid;

#[ORM\Entity(repositoryClass: UserRepository::class)]
#[ORM\Table(name: '`user`')]
class User implements UserInterface, PasswordAuthenticatedUserInterface
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 180, unique: true)]
    private ?string $email = null;

    #[ORM\Column(length: 255, unique: true)]
    private ?string $userHandle = null;

    #[ORM\Column(type: 'string', length: 255, nullable: true)]
    private ?string $password = null;

    public function __construct()
    {
        // WebAuthn doimiy, identifikatsiyalanmaydigan tutqichni talab qiladi
        $this->userHandle = Uuid::v4()->toRfc4122();
    }

    // ... standart gettarlar/setters

    public function getPassword(): ?string
    {
        return $this->password;
    }

    public function setPassword(?string $password): static
    {
        $this->password = $password;
        return $this;
    }

    public function eraseCredentials(): void
    {
        // Vaqtinchalik sezgir ma'lumotlarni tozalash
    }

    public function getUserIdentifier(): string
    {
        return (string) $this->email;
    }
}
 Tanlov arxitekturasi: Oqimni aniqlash Ajoyib gibrid UX ning asosiy qismi Oqimni aniqlashdir. Biz ikkita shaklni ko'rsatishni istamaymiz. Bizga bitta kirish kerak: "Elektron pochtangizni kiriting." Foydalanuvchi "Davom etish" tugmasini bosganda, bizning Stimulus boshqaruvchimiz keyingi harakatni aniqlash uchun engil API nuqtasiga uradi. Bu "parol maydonining charchashi"ni oldini oladi, unda foydalanuvchilar o'zlarini identifikatsiya qilishdan oldin murakkab shaklga duch kelishadi. Muhimi, bu nuqta "ambiguite orqali xavfsizlik"ni hisobga olgan holda ishlab chiqilgan. Agar elektron pochta topilmasa, biz javobni parol oqimiga default qilamiz. Bu zararli aktyorlarning tizimimizda qaysi elektron pochta manzillari ro'yxatdan o'tganligini tasdiqlash uchun API dan foydalanishini oldini oladi (foydalanuvchi enumeratsiyasi), shu bilan birga biz o'zimizning qonuniy foydalanuvchilarimiz uchun moslashtirilgan, progressiv UI ni taqdim etishimizga imkon beradi. Oqim API // src/Controller/AuthController.php
namespace App\Controller;

use App\Repository\UserRepository;
use App\Repository\PublicKeyCredentialSourceRepository;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Attribute\Route;

class AuthController extends AbstractController
{
    #[Route('/api/auth/flow', name: 'app_api_auth_flow', methods: ['GET'])]
    public function apiAuthFlow(
        Request $request, 
        UserRepository $userRepo, 
        PublicKeyCredentialSourceRepository $credsRepo
    ): JsonResponse {
        $email = $request->query->get('email');
        $user = $userRepo->findOneBy(['email' => $email]);

        if (!$user) {
            // Enumeratsiyani oldini olish uchun mavjud bo'lmagan foydalanuvchilarni parolli foydalanuvchilar deb hisoblang
            return new JsonResponse(['flow' => 'password']);
        }

        $hasPasskeys = count($credsRepo->findAllForUserEntity($user->toWebauthnUser())) > 0;

        return new JsonResponse([
            'flow' => $hasPasskeys ? 'passkey' : 'password'
        ]);
    }
}
 Xavfsizlik posboni: GibridAuthenticator Garchi     boshqarsa ham, biz an'anaviy parolga qaytishni boshqarish usuliga muhtojmiz. Ichki form_login dan foydalanish o'rniga, biz maxsus   ni amalga oshiramiz. Bu bizga turli xil atribut turlarini ( ) yagona autentifikatsiya hodisasi ichida alohida "belgilar" sifatida qarashga imkon beradi, bu zamonaviy Symfony 7.4 Xavfsizlik komponenti bilan ancha toza integratsiyani ta'minlaydi. webauthn-symfony-bundle Passkey tasdiqlashni avtomatik ravishda HybridAuthenticator Passkeys vs. Parollar Maxsus autentifikatorni ishlatish orqali biz ikkala autentifikatsiya usullari bir xil muvaffaqiyat va muvaffaqiyatsizlik handlerlarini baham ko'rishini ham ta'minlashimiz mumkin. Bu yo'naltirilgan dashboard URL-lari, flash xabarlar va xavfsizlik jurnallarini butun ilova bo'ylab, foydalanuvchi kirish uchun barmoq izidan yoki 20 belgili parolidan foydalanganligidan qat'i nazar, izchil bo'lishini anglatadi. // src/Security/HybridAuthenticator.php
namespace App\Security;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Security\Core\Exception\AuthenticationException;
use Symfony\Component\Security\Http\Authenticator\AbstractAuthenticator;
use Symfony\Component\Security\Http\Authenticator\Passport\Badge\UserBadge;
use Symfony\Component\Security\Http\Authenticator\Passport\Credentials\PasswordCredentials;
use Symfony\Component\Security\Http\Authenticator\Passport\Passport;

class HybridAuthenticator extends AbstractAuthenticator
{
    public function __construct(
        private readonly AuthenticationSuccessHandler $successHandler,
        private readonly AuthenticationFailureHandler $failureHandler
    ) {}

    public function supports(Request $request): ?bool
    {
        // Faqat parol bilan standart POST kirish urinishlarini to'xtatib turadi
        return $request->isMethod('POST') 
            && $request->getPathInfo() === '/login' 
            && $request->request->has('password');
    }

    public function authenticate(Request $request): Passport
    {
        $email = $request->request->getString('username');
        $password = $request->request->getString('password');

        return new Passport(
            new UserBadge($email),
            new PasswordCredentials($password)
        );
    }

    public function onAuthenticationSuccess(Request $request, TokenInterface $token, string $firewall): ?Response
    {
        return $this->successHandler->onAuthenticationSuccess($request, $token);
    }

    public function onAuthenticationFailure(Request $request, AuthenticationException $exception): ?Response
    {
        return $this->failureHandler->onAuthenticationFailure($request, $exception);
    }
}
 Symfony 7.4 ning autentifikator tizimi juda moslashuvchan. Bizning   ni bir xil firewall da ham forma kirishlarini (parollar), ham WebAuthn tasdiqlarini qabul qilish uchun sozlashimiz mumkin! security.yaml security:
    password_hashers:
        App\Entity\User: 'auto'
    providers:
        app_user_provider:
            entity:
                class: App\Entity\User
                property: email
    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false
        main:
            lazy: true
            provider: app_user_provider

            custom_authenticator: App\Security\HybridAuthenticator

            webauthn:
                authentication:
                    routes:
                        options_path: /login/passkey/options
                        result_path: /login/passkey/result
                registration:
                    enabled: true
                    routes:
                        options_path: /register/passkey/options
                        result_path: /register/passkey/result
                success_handler: App\Security\AuthenticationSuccessHandler
                failure_handler: App\Security\AuthenticationFailureHandler

            logout:
                path: app_logout
    access_control:
        - { path: ^/dashboard, roles: ROLE_USER }
 Frontend Magic: Shartli vositachilik (Autofill) Bu yerda dastur haqiqatan ham zamonaviy his qilishni boshlaydi. Shartli vositachilik brauzerga foydalanuvchi elektron pochta maydoniga fokuslanganda Passkey taklifini ko'rsatishga imkon beradi. Ushbu "nol-harakat" kirish foydalanuvchilar uchun kirish jarayoni brauzer pop-apida ismiga bitta tegish, so'ngra biometrik skanerdan iboratligini anglatadi. Bunga erishish uchun biz HTML dagi   atributidan foydalanamiz. Bu brauzerning atribut menejeriga to'g'ridan-to'g'ri signal beradi. JavaScript tomonida, Stimulus connect() usuli bu avtomatik to'ldirish takliflari uchun fon "tinglash"ni boshlash uchun mukammal joydir, bu esa brauzer foydalanuvchi tanlovini kutayotganda sahifani interaktiv saqlashga imkon beradi. autocomplete=”username webauthn” Shablon Biz kiritishga   qo'shishimiz kerak. Bu brauzer uchun signal. autocomplete=”username webauthn” {# templates/app/login.html.twig #}
<form data-controller="hybrid-login" data-action="submit->hybrid-login#submit">
    <input type="email" 
           name="username" 
           autocomplete="username webauthn"
           data-hybrid-login-target="email" 
           placeholder="Elektron pochtangizni kiriting">
    
    <div data-hybrid-login-target="passwordContainer" class="d-none">
        <input type="password" name="password" data-hybrid-login-target="password">
    </div>

    <button type="submit" data-hybrid-login-target="continueButton">Davom etish</button>
</form>
 Stimulus boshqaruvchisi Bizning   usulimizda, biz brauzer avtomatik to'ldirishni qo'llab-quvvatlaydimi, tekshiramiz. Agar u qo'llab-quvvatlasa, biz  . connect() WebAuthn marosimini darhol fon rejimida boshlaymiz // assets/controllers/hybrid_login_controller.js
import { Controller } from '@hotwired/stimulus';
import { startAuthentication, browserSupportsWebAuthnAutofill } from '@simplewebauthn/browser';

export default class extends Controller {
    async connect() {
        if (await browserSupportsWebAuthnAutofill()) {
            try {
                // Avtomatik to'ldirish uchun fon tinglovi
                const credential = await startAuthentication({
                    optionsJSON: await this.fetchOptions(),
                    useBrowserAutofill: true
                });
                await this.verifyResult(credential);
            } catch (e) {
                // Jim tutish: foydalanuvchi shunchaki qo'lda yozishi mumkin
            }
        }
    }

    async submit(event) {
        event.preventDefault();
        const email = this.emailTarget.value;
        
        // 1. Oqimni tekshirish
        const { flow } = await fetch(`/api/auth/flow?email=${email}`).then(r => r.json());

        if (flow === 'passkey') {
            await this.triggerPasskeyLogin(email);
        } else {
            this.showPasswordInput();
        }
    }
}
 "Yangilash" yo'li: Dashboard dan Passkey qo'shish Passkey bilan eng katta qiyinchilik kod emas; bu qabul qilish. Foydalanuvchilaringizga mavjud parol hisoblariga biometriya qo'shish uchun sabab va usul berishingiz kerak. Biz maxsus   ni amalga oshirdik, bu allaqachon tizimga kirgan foydalanuvchilarga to'liq qayta ro'yxatdan o'tish qiyinchiliklarisiz, parolga asoslangan o'tmishlari va biometrik kelajaklari o'rtasidagi ko'prikni xavfsiz ravishda o'tkazishga imkon beradi. PasskeySettingsController Ushbu oqimning muhim qismi   dan foydalanishdir. Foydalanuvchining mavjud atribut ID-larini ushbu jarayon davomida brauzerga uzatish orqali, biz foydalanuvchiga bir xil qurilmada takroriy Passkey yaratish taklif qilinmasligini ta'minlaymiz. Bu "atribut tiverchasi"ni oldini oladi va foydalanuvchining dashboardi faqat noyob, ishlaydigan xavfsizlik kalitlarini ko'rsatishini ta'minlaydi, bu tajribani toza va boshqariladigan saqlaydi. excludeCredentials // src/Controller/PasskeySettingsController.php
#[Route('/dashboard/passkey/options', methods: ['POST'])]
public function options(): JsonResponse
{
    $user = $this->getUser();
    $userEntity = new PublicKeyCredentialUserEntity(
        $user->getEmail(),
        $user->getUserHandle(),
        $user->getEmail()
    );

    // Mavjud kalitlarni istisno qiling, shuning uchun brauzer takroriy nusxalarni taklif qilmaydi
    $excludeDescriptors = array_map(
        fn ($source) => new PublicKeyCredentialDescriptor('public-key', $source->publicKeyCredentialId),
        $this->credsRepo->findAllForUserEntity($userEntity)
    );

    $options = $this->optionsFactory->create('default', $userEntity, $excludeDescriptors);
    $this->optionsStorage->store(Item::create($options, $userEntity));

    return new JsonResponse($this->serializer->serialize($options, 'json'), 200, [], true);
}
 Texnik qiyinchiliklar & Tasdiqlash Binomial ma'lumotlar va JSON WebAuthn rivojlanishidagi eng keng tarqalgan muammolardan biri kodlashdir. Atribut IDlari va buyruqlar xom binomial ma'lumotlardir, ularni standart json_encode ishlay olmaydi. Biz base64url standartidan foydalanishimiz kerak, u URL va JSON larda standart Base64 dagi muammoli + yoki / belgilarisiz xavfsiz transport uchun maxsus ishlab chiqilgan. Paketning maxsus serializatoridan foydalanish bu konversiyaning to'g'ri va izchil sodir bo'lishini ta'minlaydi. Tasdiqlash bosqichlari 
 
 
 
 
  Sizning asosiy "eski dunyo" foydalanuvchingizni yaratish uchun merosxo'r /register/password yo'li orqali hisob yarating. Parol ro'yxatdan o'tish:  /login ga boring va elektron pochtani kiriting. Tizim foydalanuvchini faqat parolli foydalanuvchi sifatida to'g'ri aniqlashi va parol maydonini ochishi kerak. Gibrid kirish:  Parol bilan kiriting, Dashboard ga boring va hisobni biometrik dunyoga ko'prik qilish uchun "Passkey qo'shish" tugmasini bosing. Yangilash:  Chiqish. Elektron pochta maydonini bosing. Brauzeringiz endi darhol Passkey taklifini taklif qilishi kerak, gibrid tajribaning davomini tugatadi. Avtomatik to'ldirish: Xulosa Symfony 7.4 da gibrid autentifikatsiya modelini joriy etish eng yangi xavfsizlik va amaliy foydalanish o'rtasida murakkab muvozanatni anglatadi. Merosxo'r parol odatlari va biometriyaga o'tishni hurmat qiladigan yagona interfeysni taqdim etish orqali, siz ko'pincha yangi xususiyatni qabul qilishni to'xtatadigan ishqalanishni yo'q qilasiz. Ushbu yondashuv nafaqat xavfsizlikni yaxshilaydi; u foydalanuvchilaringizni ular qayerda bo'lishsa, shu yerda kutib olib, ularga yaxshiroq, tezroq yo'lni ko'rsatish orqali ishonchni quradi. Texnik jihatdan, biz Symfony ning zamonaviy Xavfsizlik komponenti va WebAuthn paketi ushbu murakkab oqimlar uchun ajoyib darajada mustahkam asosni ta'minlayotganini ko'rdik. Parollar va passkey larni bir xil ekotizimda komplementar belgilar sifatida ko'rib chiqish qobiliyati, ishlab chiquvchi sifatida siz maxsus mantiqni amalga oshirish uchun freymvork bilan kurashmayotganligingizni anglatadi. Buning o'rniga, siz xavfsiz bo'lgani kabi, parvarish qilinadigan tizimni qurish uchun standart, o'zaro faoliyat boshlang'ichlaridan foydalanmoqdasiz. Kelajakka nazar tashlab, maqsad autentifikatsiya shunchalik silliq bo'ladiki, u ko'rinmas bo'lib qoladi. Shartli vositachilik va gibrid qayta tiklashlar bilan biz ushbu haqiqatga yaqinlashmoqdamiz, bu yerda xavfsizlik yuki foydalanuvchining xotirasidan ularning cho'ntagidagi apparatga o'tadi. Ushbu naqshlarni bugun qabul qilish orqali siz ilovangizni kelajakda ishlashini ta'minlaysiz va foydalanuvchilaringiz ular kutgan qulaylikdan voz kechmasdan, raqamli xavfsizlikning eng yuqori standartlaridan foydalanishini ta'minlaysiz.  To'liq amalga oshirishni va loyihaning taraqqiyotini GitHub da kuzatib borishingiz mumkin: [ ] Manba kodi: https://github.com/mattleads/PasskeysAuth Aloqada bo'laylik! Agar bu sizga foydali bo'lgan bo'lsa yoki amalga oshirish bo'yicha savollaringiz bo'lsa, sizdan eshitishni xohlardim. Aloqada qolaylik va ushbu platformalarda suhbatni davom ettiraylik: 
 
 
 
 
 LinkedIn: [ ] https://www.linkedin.com/in/matthew-mochalkin/ X (Twitter): [ ] https://x.com/MattLeads Telegram: [ ] https://t.me/MattLeads GitHub: [ ] https://github.com/mattleads

Read My Stories

Ushbu audio hikoyaning asl tilida yaratilgan!

Symfony 7.4 da Gibrid Kalit Strategiyasini Qanday Yaratish Kerak: Parolsiz qal'adan tashqarida navigatsiya qilish

About Author

IZOHLAR

TEGI QILISH

USHBU MAQOLA TAQDIM ETILGAN

Related Stories

Meet Uzi World Digital, Winner of Startups of the year 2024 in Kolkata, West Bengal, India

Meet UzairaAdvisory, Startups of The Year 2024 Nominee

Meet UzairaAdvisory, Winner of Startups of The Year 2024 in Business

Meet Uzi World Digital, Winner of Startups of the year 2024 in Kolkata, West Bengal, India

Meet UzairaAdvisory, Startups of The Year 2024 Nominee

Meet UzairaAdvisory, Winner of Startups of The Year 2024 in Business

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps