En la era moderna de la web, las contraseñas ya no son suficientes.Son la causa raíz de más del 80% de las violaciones de datos, sujetas a phishing, reutilización y terribles reglas de complejidad. Passkeys are the future. El sistema de autenticación de la web ( ) y Su dispositivo (iPhone, Android, Windows Hello, YubiKey) almacena una clave privada, mientras que el servidor sólo ve la clave pública. WebAuthn FIDO2 En esta guía completa, nos Usando la sinfonía y el oficial Eliminaremos el concepto de contraseña completamente de nuestra aplicación.No fallback, no “reset password” enlaces. will build a 100% passwordless authentication system web-auth/webauthn-symfony-bundle Arquitectura y requisitos básicos Passkeys funciona sustituyendo un secreto compartido (contraseña) por un par de claves pública/privada.La clave privada nunca sale del dispositivo de Apple del usuario (iPhone, Mac, iPad), y la clave pública se almacena en su servidor Symfony. Técnico Stack 
 
 
 
 
 PHP: 8.2 o superior (Requerido para las últimas libs de WebAuthn) Sinfonía: 7.4 LTS Base de datos: PostgreSQL, MySQL o SQLite para dev (para almacenar fuentes de credenciales) Archivo de la etiqueta: web-auth/webauthn-symfony-bundle Paquetes esenciales Execute el siguiente comando para instalar las dependencias necesarias: composer require web-auth/webauthn-symfony-bundle:^5.2 \
                 web-auth/webauthn-stimulus:^5.2 \
                 symfony/uid:^7.4
 Nosotros usamos a través de AssetMapper (que proporciona excelentes funciones de envoltura para las API WebAuthn del navegador nativo) porque Apple Passkeys requiere una interacción frontend que se maneja mejor a través de una en un entorno de Symfony moderno, o puede utilizar módulos React/Vue. @sustitución/browser Stimulus controller @sustitución/browser Esquema de base de datos: la fuente credencial Aquí es donde nuestra aplicación se diferencia drásticamente de una aplicación tradicional de Symfony. Las entidades de usuario de Symfony estándar no están equipadas para almacenar metadatos de Passkey (como AAGUIDs o algoritmos de Cose de clave pública). La entidad de usuario Nuestro Entidad Implementación La ausencia notable es la . User Symfony\Component\Security\Core\User\UserInterface PasswordAuthenticatedUserInterface namespace App\Entity;

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

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

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

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

    public function __construct()
    {
        $this->userHandle = Uuid::v4()->toRfc4122();
    }

    ...
}
 La Entidad PublicKeyCredentialSource Un único usuario puede tener múltiples passkeys (por ejemplo, Face ID en su teléfono, Touch ID en su Mac, un YubiKey en su clave).Necesitamos una entidad para almacenar estas claves públicas y sus metadatos asociados. Crear Esta entidad debe ser capaz de traducir a y desde el nativo del paquete El objeto. src/Entity/PublicKeyCredentialSource.php Webauthn\PublicKeyCredentialSource Por ello, es fundamental preservar el No hacerlo destruye los datos de certificación necesarios si alguna vez necesita claves de hardware empresarial de alta seguridad. TrustPath namespace App\Entity;

use App\Repository\PublicKeyCredentialSourceRepository;
use Doctrine\ORM\Mapping as ORM;
use Webauthn\PublicKeyCredentialSource as WebauthnSource;

#[ORM\Entity(repositoryClass: PublicKeyCredentialSourceRepository::class)]
#[ORM\Table(name: 'webauthn_credentials')]
class PublicKeyCredentialSource extends WebauthnSource
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    public function getId(): ?int
    {
        return $this->id;
    }
}
 El CredentialSourceRepository También debe implementar una Estas implementaciones . CredentialSourceRepository Webauthn\Bundle\Repository\PublicKeyCredentialSourceRepository 
namespace App\Repository;

use App\Entity\PublicKeyCredentialSource;
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
use Doctrine\Persistence\ManagerRegistry;
use Symfony\Component\ObjectMapper\ObjectMapperInterface;
use Webauthn\Bundle\Repository\PublicKeyCredentialSourceRepositoryInterface;
use Webauthn\Bundle\Repository\CanSaveCredentialSource;
use Webauthn\PublicKeyCredentialSource as WebauthnSource;
use Webauthn\PublicKeyCredentialUserEntity;

class PublicKeyCredentialSourceRepository extends ServiceEntityRepository implements PublicKeyCredentialSourceRepositoryInterface, CanSaveCredentialSource
{
    public function __construct(ManagerRegistry $registry, private readonly ObjectMapperInterface $objectMapper)
    {
        parent::__construct($registry, PublicKeyCredentialSource::class);
    }

    public function findOneByCredentialId(string $publicKeyCredentialId): ?WebauthnSource
    {
        return $this->findOneBy(['publicKeyCredentialId' => $publicKeyCredentialId]);
    }

    public function findAllForUserEntity(PublicKeyCredentialUserEntity $publicKeyCredentialUserEntity): array
    {
        return $this->findBy(['userHandle' => $publicKeyCredentialUserEntity->id]);
    }

    public function saveCredentialSource(WebauthnSource $publicKeyCredentialSource): void
    {
        $entity = $this->findOneBy(['publicKeyCredentialId' => base64_encode($publicKeyCredentialSource->publicKeyCredentialId)])
            ?? $this->objectMapper->map($publicKeyCredentialSource, PublicKeyCredentialSource::class);

        $this->getEntityManager()->persist($entity);
        $this->getEntityManager()->flush();
    }
}
 El paquete WebAuthn se basa en interfaces abstractas para encontrar y persistir usuarios y credenciales. El usuarioRepositorio El UserRepository implementa PublicKeyCredentialUserEntityRepositoryInterface. Debido a que queremos que el bundle maneje la creación de usuarios automáticamente durante un registro passkey, también implementamos y . CanRegisterUserEntity CanGenerateUserEntity 
namespace App\Repository;

use App\Entity\User;
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
use Doctrine\Persistence\ManagerRegistry;
use Symfony\Component\Uid\Uuid;
use Webauthn\Bundle\Repository\CanGenerateUserEntity;
use Webauthn\Bundle\Repository\CanRegisterUserEntity;
use Webauthn\Bundle\Repository\PublicKeyCredentialUserEntityRepositoryInterface;
use Webauthn\Exception\InvalidDataException;
use Webauthn\PublicKeyCredentialUserEntity;

class UserRepository extends ServiceEntityRepository implements PublicKeyCredentialUserEntityRepositoryInterface, CanRegisterUserEntity, CanGenerateUserEntity
{
    public function __construct(ManagerRegistry $registry)
    {
        parent::__construct($registry, User::class);
    }

    public function saveUserEntity(PublicKeyCredentialUserEntity $userEntity): void
    {
        $user = new User();
        $user->setEmail($userEntity->name);
        $user->setUserHandle($userEntity->id);

        $this->getEntityManager()->persist($user);
        $this->getEntityManager()->flush();
    }

    public function generateUserEntity(?string $username, ?string $displayName): PublicKeyCredentialUserEntity
    {
        return new PublicKeyCredentialUserEntity(
            $username ?? '',
            Uuid::v4()->toRfc4122(),
            $displayName ?? $username ?? ''
        );
    }

    ...
 Configuración: Bridging Symfony y Apple Apple requiere específicos Esto identifica su aplicación a la cadena de claves de iCloud del usuario. “Relying Party” (RP) Configuración de WebAuthn Crear o actualizar config/packages/webauthn.yaml: webauthn:
    allowed_origins: ['%env(WEBAUTHN_ALLOWED_ORIGINS)%']
    credential_repository: 'App\Repository\PublicKeyCredentialSourceRepository'
    user_repository: 'App\Repository\UserRepository'
    creation_profiles:
        default:
            rp:
                name: '%env(RELYING_PARTY_NAME)%'
                id: '%env(RELYING_PARTY_ID)%'
    request_profiles:
        default:
            rp_id: '%env(RELYING_PARTY_ID)%'
 WebAuthn es increíblemente estricto sobre los dominios. Un passkey creado para No se puede utilizar en Para garantizar que nuestra aplicación sea portátil en entornos diferentes, definimos nuestras configuraciones de Reliance Party (RP) en el El archivo. example.com phishing-example.com .env abierta y añadiendo: .env or .env.local ###> web-auth/webauthn-symfony-bundle ###
RELYING_PARTY_ID=localhost
RELYING_PARTY_NAME="My Application"
WEBAUTHN_ALLOWED_ORIGINS=localhost
###< web-auth/webauthn-symfony-bundle ###
 En la producción, debe ser su dominio raíz exacto (por ejemplo, ), y . el . RELYING_PARTY_ID example.com WebAuthn requires a secure HTTPS context Browsers only exempt localhost for development El flujo de registro (Creación) El registro de Passkey es un movimiento de dos pasos: 
 
 
 Desafío: El servidor genera un desafío único y “Opciones de creación”. Atestación: El navegador (Safari/Chrome) pide al usuario FaceID/TouchID, firma el desafío y envía el “Objeto de Atestación” de vuelta al servidor. El Frontend: Estímulo y CSRF La seguridad es fundamental, aunque es inherentemente resistente al phishing, sus puntos finales siguen siendo vulnerables a los tradicionales Pasaremos los tokens CSRF integrados de Symfony a través de los encabezados en nuestro . WebAuthn Cross-Site Request Forgery (CSRF) fetch() calls Suponiendo que usted tiene un estándar Ayudante (como que extrae el token de una meta tag o entrada oculta), lo inyectamos en nuestro controlador Passkey. CSRF csrf_protection_controller.js import { Controller } from '@hotwired/stimulus';
import { startRegistration, startAuthentication } from '@simplewebauthn/browser';
import { generateCsrfHeaders } from './csrf_protection_controller.js';

export default class extends Controller {
    static values = {
        optionsUrl: String,
        resultUrl: String,
        isLogin: Boolean
    }

    connect() {
        console.log('Passkey controller connected! 🔑');
    }

    async submit(event) {
        event.preventDefault();
        
        const username = this.element.querySelector('[name="username"]')?.value;

        if (!this.isLoginValue && !username) {
            alert('Please provide a username/email');
            return;
        }

        const csrfHeaders = generateCsrfHeaders(this.element);

        try {
            // 1. Fetch options
            const response = await fetch(this.optionsUrlValue, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', ...csrfHeaders },
                body: username ? JSON.stringify({ username: username, displayName: username }) : '{}'
            });
            
            if (!response.ok) {
                const errorData = await response.json().catch(() => ({}));
                throw new Error(errorData.errorMessage || 'Failed to fetch WebAuthn options from server');
            }
            
            const options = await response.json();

            // 2. Trigger Apple's Passkey UI (Create or Get)
            let credential;
            if (this.isLoginValue) {
                credential = await startAuthentication({ optionsJSON: options });
            } else {
                credential = await startRegistration({ optionsJSON: options });
            }

            // 3. Send result back to verify
            const result = await fetch(this.resultUrlValue, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', ...csrfHeaders },
                body: JSON.stringify(credential)
            });

            if (result.ok) {
                window.location.reload();
            } else {
                const errorText = await result.text();
                alert('Authentication failed: ' + errorText);
            }
        } catch (e) {
            console.error(e);
            alert('WebAuthn process failed: ' + e.message);
        }
    }
}
 Rutación Debes asegurarte de que el tipo de rotación para Creación - Crear : webauthn config/routes/webauthn_routes.yaml webauthn_routes:
    resource: .
    type: webauthn
 Integración del Bundle de Seguridad Para permitir que los usuarios se conecten con su Es necesario configurar el . Passkey Symfony Guard (now the Authenticator system) En config/packages/security.yaml: security:
    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

            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 }
 Gestión de fallos de autenticación porque Ceremonias involucradas Las solicitudes del frontend, una redirección estándar de Symfony en el fracaso (por ejemplo, tratando de registrar un correo electrónico que ya existe) serán silenciosamente ingeridas por el navegador, resultando en una experiencia de usuario frustrante. WebAuthn AJAX fetch() Implementamos una costumbre que devuelve una limpieza La respuesta cuando la solicitud es AJAX. AuthenticationFailureHandler 401 Unauthorized JSON Crear : src/Security/AuthenticationFailureHandler.php 
namespace App\Security;

use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
use Symfony\Component\Security\Core\Exception\AuthenticationException;
use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface;
use Symfony\Component\Security\Http\SecurityRequestAttributes;

readonly class AuthenticationFailureHandler implements AuthenticationFailureHandlerInterface
{
    public function __construct(private UrlGeneratorInterface $urlGenerator) {}

    public function onAuthenticationFailure(Request $request, AuthenticationException $exception): RedirectResponse|JsonResponse
    {
        if ($request->getContentTypeFormat() === 'json' || $request->isXmlHttpRequest()) {
            return new JsonResponse([
                'status' => 'error',
                'errorMessage' => $exception->getMessageKey(),
            ], Response::HTTP_UNAUTHORIZED);
        }

        // Store the error in the session
        $request->getSession()->set(SecurityRequestAttributes::AUTHENTICATION_ERROR, $exception);

        return new RedirectResponse($this->urlGenerator->generate('app_login'));
    }
}
 El gestor de éxito de la autenticación Dado que Passkeys a menudo elude el formulario de inicio de sesión tradicional, es necesario definir dónde va el usuario después de un successful “Handshake.” 
namespace App\Security;

use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface;

readonly class AuthenticationSuccessHandler implements AuthenticationSuccessHandlerInterface
{
    public function __construct(private UrlGeneratorInterface $urlGenerator) {}

    public function onAuthenticationSuccess(Request $request, TokenInterface $token): RedirectResponse
    {
        return new RedirectResponse($this->urlGenerator->generate('app_dashboard'));
    }
}
 Verificación y Gotchas específicos de Apple 
 
 
 
 HTTPS es obligatorio: los navegadores no expondrán las credenciales de navigator.credentials en orígenes inseguros (excepto localhost). RP ID Match: Asegúrese de que el id en webauthn.yaml coincida exactamente con su dominio. Si usted está en dev.example.com, su RP ID debe ser example.com. AAGUID de Apple: Los dispositivos de Apple a menudo devuelven un “Zero AAGUID” (todos los zeros).Si su biblioteca está configurada para validar estrictamente los autenticadores a través de metadatos, es posible que necesite permitir “Autenticadores desconocidos” en su configuración. Conclusión La transición a Apple Passkeys con Symfony 7.4 no es sólo una actualización de seguridad; es una mejora significativa para su experiencia de usuario. , de y complejos requisitos de caracteres, aumenta la conversión y la retención de usuarios. password managers “forgot password” emails, Como desarrollador senior o líder, su prioridad es asegurarse de que esta implementación permanezca sostenible. y los atributos de PHP 8.x, se asegura de que su base de código permanezca idiomática y listo para futuras ediciones de Symfony LTS. WebAuthn-Symfony-Bundle Lista de verificación de despliegue 
 
 
 
 
 SSL/TLS: asegúrese de que su entorno de producción utiliza un certificado válido (Passkeys fallará en HTTP simple). Estrategia de RP ID: Decide si desea apoyar los subdominios configurando su ID de partido relajante en el dominio de nivel superior. Métodos de copia de seguridad: Siempre proporcione un método de inicio de sesión secundario (como Magic Links o una contraseña tradicional) para los usuarios en dispositivos antiguos que no soportan FIDO2. Validación de metadatos: Para aplicaciones de alta seguridad, considere habilitar el servicio web-auth/webauthn-metadata para verificar que el Passkey realmente proviene de un dispositivo de Apple y no de un emulador no autorizado. Puedes encontrar la implementación completa y seguir el progreso del proyecto en GitHub: [ ] Source Code: https://github.com/mattleads/PasskeysAuth https://github.com/mattleads/PasskeysAuth ¡Vamos a conectar! Si ha encontrado esto útil o tiene preguntas sobre la implementación, me encantaría escuchar de usted. 
 
 
 
 
 Linkedin: [https://www.linkedin.com/in/matthew-mochalkin/] X (Twitter): [https://x.com/MattLeads] Telegrama: [https://t.me/MattLeads] GitHub: [https://github.com/mattleads] https://www.linkedin.com/in/matthew-mochalkin/ https://x.com/MattLeads https://t.me/MattLeads https://github.com/mattleads

Read My Stories

Este audio es producido en el idioma original de la historia!

Passkeys en Symfony 7.4: Cómo construir un futuro completamente sin contraseñas

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

State of the Noonion: A New Era For Brands and Writers

State of the Noonion: Green Clock Strikes Noon

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

State of the Noonion: A New Era For Brands and Writers

State of the Noonion: Green Clock Strikes Noon

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps