
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 I   af denne serie udforskede vi "hellige gral" inden for moderne godkendelse: en 100% adgangskodeløs applikation. Vi fjernede adgangskoder, hashes og nulstillings-e-mails og erstattede dem med den kryptografiske elegance af WebAuthn API'en. Del 1 Men den virkelige verden er sjældent så ren. Du har ældre brugere, der stoler mere på deres adgangskodeadministratorer end på deres biometri. Du har virksomhedsmiljøer, hvor sikkerhedsnøgler endnu ikke er standard. Vigtigst af alt har du "overgangsperioden" – den akavede fase, hvor du skal understøtte det gamle, mens du aggressivt skubber det nye. I dag bygger vi Hybridmodellen. Vi vil oprette en enkelt, intelligent login-formular, der automatisk registrerer, om en bruger har en Passkey, udløser biometri, hvis det er tilgængeligt, men elegant falder tilbage til en traditionel adgangskode, når det er nødvendigt. Vi vil også se på Betinget Mediation (Passkey Autofill) – den "magiske" UX, der giver en bruger mulighed for at logge ind blot ved at fokusere på et inputfelt. Teknologi-stacken For at følge denne guide skal du bruge: 
 
 
 
 
  Udnytter readonly classes og constructor promotion. PHP 8.2+:  Bruger de seneste forbedringer i Security Component. Symfony 7.4: : Industristandarden for WebAuthn i Symfony. web-auth/webauthn-symfony-bundle  For en zero-Node.js frontend-oplevelse. Stimulus & AssetMapper: UX-mesterværket: Sådan virker det I stedet for at forvirre brugerne med to separate login-knapper ("Log ind med adgangskode" vs. "Log ind med Passkey"), præsenterer vi dem for et enkelt, elegant input: Deres e-mailadresse. 
 
 
 
 
 Brugeren indtaster deres e-mail og klikker på "Fortsæt". Bag kulisserne udfører vores Symfony 7.4 backend en lynhurtig kontrol.  Vi udløser øjeblikkeligt den native WebAuthn biometriske prompt (FaceID, TouchID, Windows Hello). Hvis brugeren har en registreret Passkey:  Formularen udvides elegant for at afsløre det traditionelle adgangskode-inputfelt. Hvis brugeren er afhængig af en adgangskode: Dette er den præcise flow, der bruges af teknologigiganter som   og   og i dag bygger vi det udelukkende med standard Symfony-værktøjer! Google GitHub, Domænemodellen: Brobygning af to verdener I vores   havde vores User-entitet ikke engang et adgangskodefelt. For at understøtte et hybridt flow skal vi genintroducere det, men som en valgfri credential. Dette giver mulighed for en lagdelt sikkerhedsmodel: en bruger kan starte med en simpel adgangskode og senere "opgradere" deres konto ved at registrere en Passkey, som til sidst bliver deres primære (og mest sikre) måde at logge ind på. tidligere rene adgangskodeløse opsætning Ved at implementere   samtidig med at holde adgangskodefeltet nullable, opfylder vi Symfony's sikkerhedskrav til traditionel login uden at tvinge hver bruger til at have en ældre credential. Dette arkitektoniske valg er afgørende for at opretholde bagudkompatibilitet, samtidig med at det tydeligt signalerer, at Passkeys er den fremtidssikre standard for applikationen. 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 kræver et vedvarende, ikke-identificerende håndtag
        $this->userHandle = Uuid::v4()->toRfc4122();
    }

    // ... standard getters/setters

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

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

    public function eraseCredentials(): void
    {
        // Ryd midlertidige følsomme data
    }

    public function getUserIdentifier(): string
    {
        return (string) $this->email;
    }
}
 Arkitekturen af valg: Flowdetektion Kernen i en god hybrid UX er Flowdetektion. Vi ønsker ikke at vise to formularer. Vi ønsker ét input: "Indtast din e-mail". Når brugeren klikker på "Fortsæt", rammer vores Stimulus controller et letvægts API-endepunkt for at bestemme det næste træk. Dette forhindrer "adgangskodefelt-træthed", hvor brugerne konfronteres med en kompleks formular, før de endda har identificeret sig selv. Vigtigst er det, at dette endepunkt er designet med "sikkerhed gennem tvetydighed" i tankerne. Hvis en e-mail ikke findes, returnerer vi som standard til adgangskodeflowet. Dette forhindrer ondsindede aktører i at bruge API'en til at verificere, hvilke e-mails der er registreret i vores system (bruger-enumerering), samtidig med at vi stadig kan levere en skræddersyet, progressiv UI til vores legitime brugere. Flow API'en // 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) {
            // Behandl ikke-eksisterende brugere som adgangskodebrugere for at forhindre enumerering
            return new JsonResponse(['flow' => 'password']);
        }

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

        return new JsonResponse([
            'flow' => $hasPasskeys ? 'passkey' : 'password'
        ]);
    }
}
 Sikkerhedsvagten: HybridAuthenticator Mens   håndterer  , har vi brug for en måde at håndtere den traditionelle adgangskode-fallback på. I stedet for at bruge den indbyggede form_login implementerer vi en brugerdefineret  . Dette giver os mulighed for at behandle forskellige credential-typer ( ) som separate "badges" inden for en enkelt, samlet godkendelseshændelse, hvilket giver en meget renere integration med den moderne Symfony 7.4 Security-komponent. webauthn-symfony-bundle Passkey-verifikation automatisk HybridAuthenticator Passkeys vs. Adgangskoder Ved at bruge en brugerdefineret authenticator kan vi også sikre, at begge godkendelsesmetoder deler præcis de samme succes- og fejlhåndteringsrutiner. Dette betyder, at omdirigerede dashboard-URL'er, flash-beskeder og sikkerhedslogning er konsistente på tværs af hele appen, uanset om brugeren brugte sit fingeraftryk eller en 20-tegns adgangskode til at få adgang. // 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
    {
        // Aflyt kun standard POST login-forsøg med en adgangskode
        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's authenticator-system er utroligt fleksibelt. Vi kan konfigurere vores   til at acceptere både form logins (adgangskoder) og WebAuthn assertions på den samme firewall! 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 Magi: Betinget Mediation (Autofill) Her begynder applikationen virkelig at føles moderne. Betinget Mediation giver browseren mulighed for at vise et Passkey-forslag, så snart brugeren fokuserer på e-mail-feltet. Dette "nul-indsats" login betyder, at for mange brugere består login-processen af et enkelt tryk på deres navn i et browser-popup, efterfulgt af en biometrisk scanning. For at opnå dette bruger vi   attributten i vores HTML. Dette fungerer som et direkte signal til browserens credential manager. På JavaScript-siden er Stimulus connect()-metoden det perfekte sted at igangsætte en baggrunds-"lytning" efter disse autofill-forslag, hvilket giver siden mulighed for at forblive interaktiv, mens browseren venter på brugerens valg. autocomplete=”username webauthn” Skabelonen Vi skal tilføje   til vores input. Dette er signalet til browseren. 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="Indtast din e-mail">
    
    <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">Fortsæt</button>
</form>
 Stimulus controlleren I vores   metode kontrollerer vi, om browseren understøtter autofill. Hvis den gør det, starter vi  . connect() WebAuthn-ceremonien øjeblikkeligt i baggrunden // 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 {
                // Baggrundslytning efter autofill
                const credential = await startAuthentication({
                    optionsJSON: await this.fetchOptions(),
                    useBrowserAutofill: true
                });
                await this.verifyResult(credential);
            } catch (e) {
                // Stille catch: brugeren kan blot skrive manuelt
            }
        }
    }

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

        if (flow === 'passkey') {
            await this.triggerPasskeyLogin(email);
        } else {
            this.showPasswordInput();
        }
    }
}
 "Opgraderings"-stien: Tilføjelse af Passkeys fra Dashboardet Den største udfordring med Passkeys er ikke koden; det er adoptionen. Du skal give dine brugere en grund og en måde at tilføje biometri til deres eksisterende adgangskodekonti. Vi har implementeret en specialiseret  , der gør det muligt for allerede-loggede brugere sikkert at bygge bro mellem deres adgangskodebaserede fortid og deres biometriske fremtid uden friktionen ved en fuld genregistrering. PasskeySettingsController En nøgledel af dette flow er brugen af  . Ved at sende brugerens eksisterende credential IDs til browseren under denne proces sikrer vi, at brugeren ikke bliver bedt om at oprette en duplikeret Passkey på den samme enhed. Dette forhindrer "credential-rod" og sikrer, at brugerens dashboard kun viser unikke, funktionelle sikkerhedsnøgler, hvilket holder oplevelsen ren og håndterbar. 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()
    );

    // Udeluk eksisterende nøgler, så browseren ikke tilbyder dubletter
    $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);
}
 Tekniske faldgruber & Verifikation Binære data og JSON Et af de mest almindelige problemer i WebAuthn-udvikling er kodning. Credential IDs og challenges er rå binære data, som standard json_encode ikke kan håndtere. Vi skal bruge base64url-standarden, som er specielt designet til sikker transport i URL'er og JSON uden de problematiske + eller / tegn, der findes i standard Base64. Brugen af bundtens specialiserede serializer sikrer, at denne konvertering sker korrekt og konsekvent. Verifikationstrin 
 
 
 
 
  Opret en konto via den ældre /register/password-rute for at etablere din baseline "gamle verden"-bruger. Adgangskoderegistrering:  Gå til /login og indtast e-mailen. Systemet bør korrekt identificere brugeren som en ren adgangskodebruger og afsløre adgangskodefeltet. Hybrid Login:  Log ind med din adgangskode, naviger til Dashboardet og klik på "Tilføj Passkey" for at brobygge kontoen ind i den biometriske verden. Opgradering:  Log ud. Klik på e-mail-feltet. Din browser bør nu tilbyde Passkey-forslaget med det samme, hvilket fuldender cirklen af den hybride oplevelse. Autofill: Konklusion Implementeringen af en hybrid godkendelsesmodel i Symfony 7.4 repræsenterer en sofistikeret balance mellem banebrydende sikkerhed og praktisk tilgængelighed. Ved at tilbyde en samlet grænseflade, der respekterer både ældre adgangskodevaner og bevægelsen mod biometri, eliminerer du den friktion, der ofte dræber ny funktionsadoption. Denne tilgang forbedrer ikke kun sikkerheden; den opbygger tillid hos dine brugere ved at møde dem, hvor de er, og samtidig tydeligt vise dem en bedre, hurtigere vej frem. Teknisk set har vi set, at Symfony's moderne Security-komponent og WebAuthn-bundtet giver et bemærkelsesværdigt robust fundament for disse komplekse flows. Muligheden for at behandle adgangskoder og passkeys som komplementære badges inden for det samme økosystem betyder, at du som udvikler ikke kæmper mod frameworket for at implementere brugerdefineret logik. I stedet udnytter du standardiserede, interoperable primitiver til at bygge et system, der er lige så vedligeholdelsesvenligt som det er sikkert. Ser vi fremad, er målet en web, hvor godkendelse er så friktionsfri, at den bliver usynlig. Med Betinget Mediation og hybride fallbacks bevæger vi os tættere på denne virkelighed, hvor byrden af sikkerhed flyttes fra brugerens hukommelse til hardwaren i deres lomme. Ved at adoptere disse mønstre i dag fremtidssikrer du din applikation og sikrer, at dine brugere drager fordel af de højeste standarder for digital sikkerhed uden at ofre den bekvemmelighed, de er kommet til at forvente.  Du kan finde den fulde implementering og følge projektets fremskridt på GitHub: [ ] Kildekode: https://github.com/mattleads/PasskeysAuth Lad os forbinde! Hvis du fandt dette nyttigt, eller har spørgsmål om implementeringen, vil jeg meget gerne høre fra dig. Lad os holde kontakten og holde samtalen i gang på tværs af disse platforme: 
 
 
 
 
 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

Denne lyd er produceret på historiens originalsprog!

Sådan opbygger du en hybrid nøgleløsningsstrategi i Symfony 7.4: Navigering ud over den adgangskodeløse fæstning

About Author

KOMMENTARER

HÆNG TAGS

DENNE ARTIKEL BLEV PRÆsenterET I

Related Stories

Meet Bybit: HackerNoon Company of the Week

Meet Hubstaff: HackerNoon Company of the Week

Meet Timescale: HackerNoon Company of the Week

Meet Surfshark: HackerNoon Company of the Week

Meet Bybit: HackerNoon Company of the Week

Meet Hubstaff: HackerNoon Company of the Week

Meet Timescale: HackerNoon Company of the Week

Meet Surfshark: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps