
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 In   van hierdie reeks, het ons die “heilige graal” van moderne magtiging ondersoek: 'n 100% wagwoordlose toepassing. Ons het wagwoorde, skaduwees en herstel-e-posse gestroop en dit vervang met die kriptografiese elegansie van die WebAuthn API. Deel 1 Maar die regte wêreld is selde so skoon. Jy het ou gebruikers wat meer vertroue het in hul wagwoordbestuurders as in hul biometrie. Jy het korporatiewe omgewings waar sekuriteitsleutels nog nie standaard is nie. Die belangrikste is dat jy die “Oorgangstydperk” het – daardie ongemaklike fase waar jy die ou moet ondersteun terwyl jy aggressief die nuwe stoot. Vandag bou ons die Hibriede Model. Ons gaan 'n enkele, intelligente aanmeldvorm skep wat outomaties opspoor of 'n gebruiker 'n Passkey het, biometrie aktiveer indien beskikbaar, maar genadiglik terugval na 'n tradisionele wagwoord wanneer nodig. Ons sal ook na Voorwaardelike Bemiddeling (Passkey Autofill) kyk – die “magiese” UX wat 'n gebruiker toelaat om aan te meld bloot deur 'n invoerveld te fokus. Die Tegnologie Stapel Om hierdie gids te volg, sal jy nodig hê: 
 
 
 
 
  Gebruik readonly klasse en konstruktorpromosie. PHP 8.2+:  Gebruik die nuutste Sekuriteitskomponent verbeteringe. Symfony 7.4: : Die bedryfstandaard vir WebAuthn in Symfony. web-auth/webauthn-symfony-bundle  Vir 'n nul-Node.js frontend ervaring. Stimulus & AssetMapper: Die UX Meesterstuk: Hoe Dit Werk In plaas daarvan om gebruikers te verwar met twee aparte aanmeldknoppies (“Teken aan met Wagwoord” teenoor “Teken aan met Passkey”), bied ons hulle 'n enkele, elegante invoer: Hul E-posadres. 
 
 
 
 
 Die gebruiker voer hul e-pos in en klik “Gaan voort.” Agter die skerms doen ons Symfony 7.4 backend 'n blitsvinnige kontrole.  Ons aktiveer onmiddellik die inheemse WebAuthn biometriese prompt (FaceID, TouchID, Windows Hello). As die gebruiker 'n geregistreerde Passkey het:  Die vorm brei genadiglik uit om die tradisionele wagwoordinvoerveld te openbaar. As die gebruiker op 'n wagwoord staatmaak: Dit is die presiese vloei wat deur tegnologie-reuse soos   en   gebruik word, en vandag bou ons dit geheel en al met standaard Symfony-gereedskap! Google GitHub Die Domein Model: Oorbrugging Twee Wêrelde In ons  , het ons Gebruikersentiteit nie eers 'n wagwoordveld gehad nie. Om 'n hibriede vloei te ondersteun, moet ons dit weer instel, maar as 'n opsionele geloofsbrief. Dit maak voorsiening vir 'n gelaagde sekuriteitsmodel: 'n gebruiker kan begin met 'n eenvoudige wagwoord en later hul rekening “opgradeer” deur 'n Passkey te registreer, wat uiteindelik hul primêre (en veiligste) manier om aan te meld word. vorige suiwer-wagwoordlose opstelling Deur die   te implementeer terwyl die wagwoordveld nulbaar gehou word, voldoen ons aan Symfony se sekuriteitsvereistes vir tradisionele aanmelding sonder om elke gebruiker te dwing om 'n ou geloofsbrief te hê. Hierdie argitektoniese keuse is deurslaggewend om agteruit-versoenbaarheid te handhaaf terwyl dit duidelik aandui dat Passkeys die toekomsvaste standaard vir die toepassing is. 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 vereis 'n blywende, nie-identifiserende handvatsel
        $this->userHandle = Uuid::v4()->toRfc4122();
    }

    // ... standaard getters/setters

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

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

    public function eraseCredentials(): void
    {
        // Maak tydelike sensitiewe data skoon
    }

    public function getUserIdentifier(): string
    {
        return (string) $this->email;
    }
}
 Die Argitektuur van Keuse: Vloei Opsporing Die kern van 'n wonderlike hibriede UX is Vloei Opsporing. Ons wil nie twee vorms wys nie. Ons wil een invoer hê: “Voer jou e-pos in.” Wanneer die gebruiker op “Gaan voort” klik, slaan ons Stimulus-beheerder 'n liggewig API-punt om die volgende stap te bepaal. Dit voorkom die “wagwoordveld-moegheid” waar gebruikers gekonfronteer word met 'n komplekse vorm voordat hulle hulself geïdentifiseer het. Belangrik is dat hierdie punt ontwerp is met “sekuriteit deur dubbelsinnigheid” in gedagte. As 'n e-pos nie gevind word nie, stel ons die antwoord standaard in op die wagwoordvloei. Dit verhoed dat kwaadwillige akteurs die API gebruik om te verifieer watter e-posse in ons stelsel geregistreer is (gebruikeropname), terwyl dit ons steeds in staat stel om 'n pasgemaakte, progressiewe UI vir ons wettige gebruikers te verskaf. Die Vloei 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) {
            // Behandel nie-bestaande gebruikers as wagwoordgebruikers om opname te voorkom
            return new JsonResponse(['flow' => 'password']);
        }

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

        return new JsonResponse([
            'flow' => $hasPasskeys ? 'passkey' : 'password'
        ]);
    }
}
 Die Sekuriteitswag: Hibriede Magtiger Terwyl die     hanteer, benodig ons 'n manier om die tradisionele wagwoord-terugval te hanteer. In plaas daarvan om die ingeboude form_login te gebruik, implementeer ons 'n pasgemaakte  . Dit stel ons in staat om verskillende geloofsbriewe ( ) as aparte “kentekens” binne 'n enkele verenigde magtigingsgebeurtenis te behandel, wat 'n baie skoner integrasie met die moderne Symfony 7.4 Sekuriteitskomponent bied. webauthn-symfony-bundle Passkey-verifikasie outomaties HybridAuthenticator Passkeys vs. Wagwoorde Deur 'n pasgemaakte magtiger te gebruik, kan ons ook verseker dat beide magtigingsmetodes presies dieselfde sukses- en mislukkingshanteerders deel. Dit beteken dat herlei dashboard-URL's, flitsboodskappe en sekuriteitslogboeke konsekwent oor die hele toepassing is, ongeag of die gebruiker hul vingerafdruk of 'n 20-karakter wagwoord gebruik het om toegang te verkry. // 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
    {
        // Intersep slegs standaard POST-aanmeldpogings met 'n wagwoord
        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 se magtigingsstelsel is ongelooflik buigsaam. Ons kan ons   konfigureer om beide vormaanmeldings (wagwoorde) en WebAuthn-bewysstukke op dieselfde firewall te aanvaar! 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 Magie: Voorwaardelike Bemiddeling (Autovul) Hier is waar die toepassing regtig modern begin voel. Voorwaardelike Bemiddeling laat die blaaier toe om 'n Passkey-voorstel te wys sodra die gebruiker op die e-posveld fokus. Hierdie “nul-moeite” aanmelding beteken dat, vir baie gebruikers, die aanmeldproses bestaan uit 'n enkele tik op hul naam in 'n blaaier-opsieskerm, gevolg deur 'n biometriese skandering. Om dit te bereik, gebruik ons die   attribuut in ons HTML. Dit dien as 'n direkte sein aan die blaaier se geloofsbriewebestuurder. Aan die JavaScript-kant is die Stimulus connect()-metode die perfekte plek om 'n agtergrond “luister” vir hierdie outovul-voorstelle te begin, wat die bladsy interaktief laat bly terwyl die blaaier wag vir die gebruiker se keuse. autocomplete=”username webauthn” Die Sjabloon Ons moet   by ons invoer voeg. Dit is die sein aan die blaaier. 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="Voer jou e-pos in">
    
    <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">Gaan voort</button>
</form>
 Die Stimulus Beheerder In ons   metode, kyk ons of die blaaier outovul ondersteun. As dit doen, begin ons die  . connect() WebAuthn seremonie onmiddellik in die agtergrond // 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 {
                // Agtergrond luister vir outovul
                const credential = await startAuthentication({
                    optionsJSON: await this.fetchOptions(),
                    useBrowserAutofill: true
                });
                await this.verifyResult(credential);
            } catch (e) {
                // Stille vang: gebruiker mag net handmatig tik
            }
        }
    }

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

        if (flow === 'passkey') {
            await this.triggerPasskeyLogin(email);
        } else {
            this.showPasswordInput();
        }
    }
}
 Die “Opgradering” Pad: Om Passkeys van die Dashboard by te Voeg Die grootste uitdaging met Passkeys is nie die kode nie; dit is die aanvaarding. Jy moet jou gebruikers 'n rede en 'n manier gee om biometrie by hul bestaande wagwoordrekeninge te voeg. Ons het 'n gespesialiseerde   geïmplementeer wat reeds-aangemelde gebruikers toelaat om veilig die gaping tussen hul wagwoordgebaseerde verlede en hul biometriese toekoms te oorbrug sonder die wrywing van 'n volledige herregistrasie. PasskeySettingsController 'n Sleutel deel van hierdie vloei is die gebruik van  . Deur die gebruiker se bestaande geloofsbriewe-ID's aan die blaaier te stuur tydens hierdie proses, verseker ons dat die gebruiker nie gevra word om 'n duplikaat Passkey op dieselfde toestel te skep nie. Dit voorkom “geloofsbrief rommel” en verseker dat die gebruiker se dashboard slegs unieke, funksionele sekuriteitsleutels wys, wat die ervaring skoon en hanteerbaar hou. 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()
    );

    // Sluit bestaande sleutels uit sodat die blaaier nie duplikate aanbied nie
    $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);
}
 Tegniese Valstrikke & Verifikasie Binêre Data en JSON Een van die mees algemene probleme in WebAuthn-ontwikkeling is kodering. Geloofsbriewe ID's en uitdagings is rou binêre data, wat standaard json_encode nie kan hanteer nie. Ons moet die base64url-standaard gebruik, wat spesifiek ontwerp is vir veilige vervoer in URL's en JSON sonder die problematiese + of / karakters wat in standaard Base64 gevind word. Deur die bundel se gespesialiseerde serialiseerder te gebruik, verseker ons dat hierdie omskakeling korrek en konsekwent plaasvind. Verifikasie Stappe 
 
 
 
 
  Skep 'n rekening via die ou /register/password-roete om jou basislyn “ou wêreld” gebruiker te vestig. Wagwoord Registrasie:  Gaan na /login en voer die e-pos in. Die stelsel moet die gebruiker korrek identifiseer as 'n wagwoord-alleen gebruiker en die wagwoordveld openbaar. Hibriede Aanmelding:  Meld aan met jou wagwoord, navigeer na die Dashboard, en klik “Voeg Passkey by” om die rekening na die biometriese wêreld te oorbrug. Opgradering:  Meld af. Klik die e-posveld. Jou blaaier behoort nou die Passkey-voorstel onmiddellik aan te bied, wat die sirkel van die hibriede ervaring voltooi. Autovul: Afsluiting Die implementering van 'n hibriede magtigingsmodel in Symfony 7.4 verteenwoordig 'n gesofistikeerde balans tussen top-moderne sekuriteit en praktiese toeganklikheid. Deur 'n verenigde koppelvlak te verskaf wat beide ou wagwoordgewoontes en die skuif na biometrie respekteer, elimineer jy die wrywing wat dikwels die aanvaarding van nuwe funksies doodmaak. Hierdie benadering verbeter nie net sekuriteit nie; dit bou vertroue met jou gebruikers deur hulle te ontmoet waar hulle is, terwyl dit hulle duidelik 'n beter, vinniger pad vorentoe wys. Tegniese gesproke het ons gesien dat Symfony se moderne Sekuriteitskomponent en die WebAuthn-bundel 'n merkwaardig robuuste fondament vir hierdie komplekse vloei bied. Die vermoë om wagwoorde en passkeys as aanvullende kentekens binne dieselfde ekosisteem te behandel, beteken dat jy as ontwikkelaar nie die raamwerk beveg om pasgemaakte logika te implementeer nie. In plaas daarvan gebruik jy standaard, interoperabele primitiewe om 'n stelsel te bou wat so onderhoubaar as wat dit veilig is. Vooruit kykend, is die doel 'n web waar magtiging so wrywingloos is dat dit onsigbaar word. Met Voorwaardelike Bemiddeling en hibriede terugvalle beweeg ons nader aan daardie realiteit, waar die las van sekuriteit verskuif van die gebruiker se geheue na die hardeware in hul sak. Deur hierdie patrone vandag aan te neem, maak jy jou toepassing toekomsbestand en verseker jy dat jou gebruikers voordeel trek uit die hoogste standaarde van digitale veiligheid sonder om die gerief wat hulle verwag het, op te offer.  Jy kan die volledige implementering vind en die projek se vordering op GitHub volg: [ ] Bronkode: https://github.com/mattleads/PasskeysAuth Laat Ons Skakel! As jy dit nuttig gevind het of vrae het oor die implementering, sal ek graag van jou wil hoor. Kom ons bly in kontak en hou die gesprek aan die gang oor hierdie platforms: 
 
 
 
 
 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

Hierdie oudio word in die oorspronklike taal van die storie vervaardig!

Hoe om 'n baster-pas-sleutelstrategie in Symfony 7.4 te bou: Navigeer verby die wagwoordlose vesting.

About Author

KOMMENTAAR

HANG TAGS

HIERDIE ARTIKEL IS AANGEBIED IN

Related Stories

Startups of The Year: Meet the Business Industry

'Decentralization Means Freedom': Interview with Alfredo de Candia

"What If ... I didn't Do It?"

HackerNoon and the Time We Took the 16 Personalities Test

Startups of The Year: Meet the Business Industry

'Decentralization Means Freedom': Interview with Alfredo de Candia

"What If ... I didn't Do It?"

HackerNoon and the Time We Took the 16 Personalities Test

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps