
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 I   av den här serien utforskade vi det "heliga gralen" inom modern autentisering: en 100 % lösenordsfri applikation. Vi tog bort lösenord, hashningar och återställningsmejl, och ersatte dem med den kryptografiska elegans som WebAuthn API erbjuder. Del 1 Men verkligheten är sällan så ren. Du har befintliga användare som litar mer på sina lösenordshanterare än på sin biometri. Du har företagsmiljöer där säkerhetsnycklar ännu inte är standard. Viktigast av allt har du "Övergångsperioden" – den besvärliga fasen där du behöver stödja det gamla samtidigt som du aggressivt driver det nya. Idag bygger vi hybridmodellen. Vi kommer att skapa ett enda, intelligent inloggningsformulär som automatiskt upptäcker om en användare har en Passkey, utlöser biometri om det finns tillgängligt, men på ett smidigt sätt återgår till ett traditionellt lösenord när det är nödvändigt. Vi kommer också att titta på Villkorad medling (Passkey Autofill) – den "magiska" användarupplevelsen som låter en användare logga in bara genom att fokusera på ett inmatningsfält. Tech-stacken För att följa den här guiden behöver du: 
 
 
 
 
  Utnyttjar readonly-klasser och konstruktörspromotion. PHP 8.2+:  Använder de senaste förbättringarna i Security Component. Symfony 7.4: : Branschstandarden för WebAuthn i Symfony. web-auth/webauthn-symfony-bundle  För en frontend-upplevelse utan Node.js. Stimulus & AssetMapper: UX-mästerverket: Hur det fungerar Istället för att förvirra användare med två separata inloggningsknappar ("Logga in med lösenord" vs "Logga in med Passkey"), presenterar vi dem med en enda, elegant inmatning: Deras e-postadress. 
 
 
 
 
 Användaren anger sin e-postadress och klickar på "Fortsätt". Bakom kulisserna gör vår Symfony 7.4-backend en blixtsnabb kontroll.  Vi utlöser omedelbart den inbyggda WebAuthn biometriska prompten (FaceID, TouchID, Windows Hello). Om användaren har en registrerad Passkey:  Formuläret expanderar smidigt för att avslöja det traditionella inmatningsfältet för lösenord. Om användaren förlitar sig på ett lösenord: Det här är exakt det flöde som används av teknikjättar som   och   och idag bygger vi det helt med standard Symfony-verktyg! Google GitHub, Domänmodellen: Överbryggar två världar I vår   hade vår User-entitet inte ens ett lösenordsfält. För att stödja ett hybridflöde måste vi återinföra det, men som en valfri behörighet. Detta möjliggör en hierarkisk säkerhetsmodell: en användare kan börja med ett enkelt lösenord och senare "uppgradera" sitt konto genom att registrera en Passkey, som så småningom blir deras primära (och mest säkra) inloggningsmetod. tidigare rena lösenordsfria installation Genom att implementera   samtidigt som lösenordsfältet hålls nullabel, uppfyller vi Symfonys säkerhetskrav för traditionell inloggning utan att tvinga varje användare att ha en äldre behörighet. Detta arkitektoniska val är avgörande för att upprätthålla bakåtkompatibilitet samtidigt som det tydligt signalerar att Passkeys är den framtidssäkra standarden för 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 en persistent, icke-identifierande hanterare
        $this->userHandle = Uuid::v4()->toRfc4122();
    }

    // ... standard gettrar/settrar

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

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

    public function eraseCredentials(): void
    {
        // Rensa temporär känslig data
    }

    public function getUserIdentifier(): string
    {
        return (string) $this->email;
    }
}
 Arkitekturen av val: Flödesdetektering Kärnan i en bra hybrid UX är Flödesdetektering. Vi vill inte visa två formulär. Vi vill ha en inmatning: "Ange din e-postadress". När användaren klickar på "Fortsätt", träffar vår Stimulus-kontroller en lättviktig API-slutpunkt för att bestämma nästa steg. Detta förhindrar "lösenordsfältsutmattning" där användare konfronteras med ett komplext formulär innan de ens har identifierat sig. Viktigt är att denna slutpunkt är utformad med "säkerhet genom tvetydighet" i åtanke. Om en e-postadress inte hittas, skickar vi svaret som standard till lösenordsflödet. Detta förhindrar illvilliga aktörer från att använda API:et för att verifiera vilka e-postadresser som är registrerade i vårt system (användaruppräkning), samtidigt som det tillåter oss att tillhandahålla ett anpassat, progressivt användargränssnitt för våra legitima användare. Flödes-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) {
            // Behandla icke-existerande användare som lösenordsanvändare för att förhindra uppräkning
            return new JsonResponse(['flow' => 'password']);
        }

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

        return new JsonResponse([
            'flow' => $hasPasskeys ? 'passkey' : 'password'
        ]);
    }
}
 Säkerhetsvakten: HybridAuthenticator Medan   hanterar  , behöver vi ett sätt att hantera den traditionella lösenordsåtergången. Istället för att använda den inbyggda form_login, implementerar vi en anpassad  . Detta gör att vi kan behandla olika behörighetstyper ( ) som separata "märken" inom en enda enhetlig autentiseringshändelse, vilket ger en mycket renare integration med den moderna Symfony 7.4 Security-komponenten. webauthn-symfony-bundle Passkey-verifiering automatiskt HybridAuthenticator Passkeys vs. Lösenord Genom att använda en anpassad autentiserare kan vi också säkerställa att båda autentiseringsmetoderna delar exakt samma framgångs- och felhanterare. Detta innebär att omdirigerade dashboard-URL:er, snabbmeddelanden och säkerhetsloggning är konsekventa i hela appen, oavsett om användaren använde sitt fingeravtryck eller ett 20-teckens lösenord för att få åtkomst. // 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
    {
        // Avlyssna endast standard POST-inloggningsförsök med lösenord
        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 autentiseringssystem är otroligt flexibelt. Vi kan konfigurera vår   för att acceptera både formulärinloggningar (lösenord) och WebAuthn-intyg på samma brandvägg! 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: Villkorad medling (Autofill) Det är här applikationen börjar kännas riktigt modern. Villkorad medling gör det möjligt för webbläsaren att visa ett Passkey-förslag så snart användaren fokuserar på e-postfältet. Denna "noll-ansträngning"-inloggning innebär att för många användare består inloggningsprocessen av en enda tryckning på deras namn i en webbläsarpopup, följt av en biometrisk skanning. För att uppnå detta använder vi attributet   i vår HTML. Detta fungerar som en direkt signal till webbläsarens behörighetshanterare. På JavaScript-sidan är Stimulus connect()-metod den perfekta platsen för att initiera en bakgrunds-"lyssning" efter dessa autofill-förslag, vilket gör att sidan förblir interaktiv medan webbläsaren väntar på användarens val. autocomplete=”username webauthn” Mallen Vi behöver lägga till   till vår inmatning. Detta är signalen till webbläsaren. 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="Ange din e-postadress">

    <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ätt</button>
</form>
 Stimulus-kontrollern I vår  -metod kontrollerar vi om webbläsaren stöder autofill. Om den gör det, startar vi  . connect() WebAuthn-ceremonin omedelbart i bakgrunden // 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 {
                // Bakgrundslyssning för autofill
                const credential = await startAuthentication({
                    optionsJSON: await this.fetchOptions(),
                    useBrowserAutofill: true
                });
                await this.verifyResult(credential);
            } catch (e) {
                // Tyst fångst: användaren kanske bara skriver manuellt
            }
        }
    }

    async submit(event) {
        event.preventDefault();
        const email = this.emailTarget.value;

        // 1. Kontrollera flöde
        const { flow } = await fetch(`/api/auth/flow?email=${email}`).then(r => r.json());

        if (flow === 'passkey') {
            await this.triggerPasskeyLogin(email);
        } else {
            this.showPasswordInput();
        }
    }
}
 "Uppgraderings"-vägen: Lägga till Passkeys från Dashboarden Den största utmaningen med Passkeys är inte koden; det är adoptionen. Du måste ge dina användare en anledning och ett sätt att lägga till biometri till sina befintliga lösenordskonton. Vi har implementerat en specialiserad   som låter redan inloggade användare säkert överbrygga klyftan mellan sitt lösenordsbaserade förflutna och sin biometriska framtid utan friktionen av en fullständig omregistrering. PasskeySettingsController En viktig del av detta flöde är användningen av  . Genom att skicka användarens befintliga behörighets-ID:n till webbläsaren under denna process säkerställer vi att användaren inte uppmanas att skapa en dubblett-Passkey på samma enhet. Detta förhindrar "behörighetsröra" och säkerställer att användarens dashboard bara visar unika, fungerande säkerhetsnycklar, vilket håller upplevelsen ren och hanterbar. 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()
    );

    // Exkludera befintliga nycklar så att webbläsaren inte erbjuder dubbletter
    $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);
}
 Tekniska fallgropar & Verifiering Binärdata och JSON Ett av de vanligaste problemen vid WebAuthn-utveckling är kodning. Behörighets-ID:n och utmaningar är rå binärdata, som standard json_encode inte kan hantera. Vi måste använda base64url-standarden, som är speciellt utformad för säker transport i URL:er och JSON utan de problematiska tecknen + eller / som finns i standard Base64. Att använda bundlens specialiserade serialiserare säkerställer att denna konvertering sker korrekt och konsekvent. Verifieringssteg 
 
 
 
 
  Skapa ett konto via den äldre /register/password-rutten för att etablera din baslinje "gamla världen"-användare. Lösenordsregistrering:  Gå till /login och ange e-postadressen. Systemet bör korrekt identifiera användaren som enbart lösenordsanvändare och avslöja lösenordsfältet. Hybridinloggning:  Logga in med ditt lösenord, navigera till Dashboarden och klicka på "Lägg till Passkey" för att brygga kontot in i den biometriska världen. Uppgradera:  Logga ut. Klicka på e-postfältet. Din webbläsare bör nu erbjuda Passkey-förslaget omedelbart, vilket slutför cirkeln av hybridupplevelsen. Autofill: Slutsats Implementeringen av en hybrid autentiseringsmodell i Symfony 7.4 representerar en sofistikerad balans mellan banbrytande säkerhet och praktisk tillgänglighet. Genom att tillhandahålla ett enhetligt gränssnitt som respekterar både traditionella lösenordsvanor och övergången mot biometri, eliminerar du den friktion som ofta dödar adoptionen av nya funktioner. Detta tillvägagångssätt förbättrar inte bara säkerheten; det bygger förtroende hos dina användare genom att möta dem där de är, samtidigt som det tydligt visar dem en bättre, snabbare väg framåt. Tekniskt sett har vi sett att Symfonys moderna Security-komponent och WebAuthn-bundlen erbjuder en anmärkningsvärt robust grund för dessa komplexa flöden. Förmågan att behandla lösenord och passkeys som kompletterande märken inom samma ekosystem innebär att du som utvecklare inte kämpar mot ramverket för att implementera anpassad logik. Istället använder du standardiserade, interoperabla primitiva för att bygga ett system som är lika underhållbart som det är säkert. Med blicken framåt är målet en webb där autentisering är så friktionsfri att den blir osynlig. Med villkorad medling och hybrida återgångar närmar vi oss den verkligheten, där bördan av säkerhet skiftar från användarens minne till hårdvaran i deras ficka. Genom att anamma dessa mönster idag framtidssäkrar du din applikation och säkerställer att dina användare drar nytta av de högsta standarderna för digital säkerhet utan att offra den bekvämlighet de har kommit att förvänta sig.  Du kan hitta hela implementeringen och följa projektets framsteg på GitHub: [ ] Källkod: https://github.com/mattleads/PasskeysAuth Låt oss ansluta! Om du tyckte att detta var hjälpsamt eller har frågor om implementeringen, skulle jag gärna höra från dig. Låt oss hålla kontakten och fortsätta samtalet på dessa plattformar: 
 
 
 
 
 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

Det här ljudet är producerat på berättelsens originalspråk!

Hur man bygger en hybridnyckelstrategi i Symfony 7.4: Navigera bortom lösenordslösa fästningen

About Author

KOMMENTARER

HÄNG TAGGAR

DENNA ARTIKEL PRESENTERAS I

Related Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps