
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 En la   de esta serie, exploramos el “santo grial” de la autenticación moderna: una aplicación 100% sin contraseñas. Eliminamos contraseñas, hashes y correos electrónicos de restablecimiento, reemplazándolos con la elegancia criptográfica de la API WebAuthn. Parte 1 Pero el mundo real rara vez es tan limpio. Tienes usuarios heredados que confían más en sus administradores de contraseñas que en sus datos biométricos. Tienes entornos corporativos donde las llaves de seguridad aún no son estándar. Lo más importante es que tienes el “Período de Transición”, esa fase incómoda donde necesitas soportar lo antiguo mientras impulsas agresivamente lo nuevo. Hoy, estamos construyendo el Modelo Híbrido. Vamos a crear un único formulario de inicio de sesión inteligente que detecta automáticamente si un usuario tiene una Passkey, activa la biometría si está disponible, pero recurre elegantemente a una contraseña tradicional cuando es necesario. También veremos la Mediación Condicional (Autocompletado de Passkey), la UX “mágica” que permite a un usuario iniciar sesión simplemente enfocando un campo de entrada. La Pila Tecnológica Para seguir esta guía, necesitarás: 
 
 
 
 
  Aprovechando las clases de solo lectura y la promoción de constructores. PHP 8.2+:  Utilizando las últimas mejoras del Componente de Seguridad. Symfony 7.4: : El estándar de la industria para WebAuthn en Symfony. web-auth/webauthn-symfony-bundle  Para una experiencia frontend sin Node.js. Stimulus & AssetMapper: La Obra Maestra de UX: Cómo Funciona En lugar de confundir a los usuarios con dos botones de inicio de sesión separados (“Iniciar sesión con contraseña” vs “Iniciar sesión con Passkey”), les presentamos una única entrada elegante: Su Dirección de Correo Electrónico. 
 
 
 
 
 El usuario ingresa su correo electrónico y hace clic en “Continuar”. En segundo plano, nuestro backend de Symfony 7.4 realiza una verificación ultrarrápida.  Activamos instantáneamente el indicador biométrico nativo de WebAuthn (FaceID, TouchID, Windows Hello). Si el usuario tiene una Passkey registrada:  El formulario se expande elegantemente para revelar el campo de entrada de contraseña tradicional. Si el usuario depende de una contraseña: Este es el flujo exacto utilizado por gigantes tecnológicos como   y  , ¡y hoy, lo estamos construyendo completamente con herramientas estándar de Symfony! Google GitHub El Modelo de Dominio: Uniendo Dos Mundos En nuestra  , nuestra entidad User ni siquiera tenía un campo de contraseña. Para soportar un flujo híbrido, debemos reintroducirlo, pero como una credencial opcional. Esto permite un modelo de seguridad escalonado: un usuario puede comenzar con una contraseña simple y luego “actualizar” su cuenta registrando una Passkey, que eventualmente se convierte en su forma principal (y más segura) de iniciar sesión. configuración anterior puramente sin contraseña Al implementar la   mientras mantenemos el campo de contraseña nulo, satisfacemos los requisitos de seguridad de Symfony para el inicio de sesión tradicional sin forzar a cada usuario a tener una credencial heredada. Esta elección arquitectónica es crucial para mantener la compatibilidad con versiones anteriores y al mismo tiempo indicar claramente que las Passkeys son el estándar a prueba de futuro para la aplicación. 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 requiere un identificador persistente y no identificativo
        $this->userHandle = Uuid::v4()->toRfc4122();
    }

    // ... getters/setters estándar

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

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

    public function eraseCredentials(): void
    {
        // Borrar datos sensibles temporales
    }

    public function getUserIdentifier(): string
    {
        return (string) $this->email;
    }
}
 La Arquitectura de Elección: Detección de Flujo El núcleo de una gran experiencia de usuario híbrida es la Detección de Flujo. No queremos mostrar dos formularios. Queremos una entrada: “Ingresa tu correo electrónico”. Cuando el usuario hace clic en “Continuar”, nuestro controlador Stimulus accede a un punto final de API ligero para decidir el próximo movimiento. Esto evita la “fatiga del campo de contraseña” donde los usuarios se enfrentan a un formulario complejo antes de haberse identificado. Es importante destacar que este punto final está diseñado pensando en la “seguridad a través de la ambigüedad”. Si no se encuentra un correo electrónico, la respuesta predeterminada es el flujo de contraseña. Esto evita que actores maliciosos utilicen la API para verificar qué correos electrónicos están registrados en nuestro sistema (enumeración de usuarios), al tiempo que nos permite proporcionar una interfaz de usuario personalizada y progresiva para nuestros usuarios legítimos. La API de Flujo // 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) {
            // Tratar a los usuarios inexistentes como usuarios de contraseña para evitar la enumeración
            return new JsonResponse(['flow' => 'password']);
        }

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

        return new JsonResponse([
            'flow' => $hasPasskeys ? 'passkey' : 'password'
        ]);
    }
}
 El Guardia de Seguridad: HybridAuthenticator Mientras que el   maneja la  , necesitamos una forma de manejar la opción de respaldo de contraseña tradicional. En lugar de usar el form_login incorporado, implementamos un   personalizado. Esto nos permite tratar diferentes tipos de credenciales ( ) como “insignias” separadas dentro de un único evento de autenticación unificado, proporcionando una integración mucho más limpia con el componente de seguridad moderno de Symfony 7.4. webauthn-symfony-bundle verificación de Passkeys automáticamente HybridAuthenticator Passkeys vs. Contraseñas Al usar un autenticador personalizado, también podemos asegurarnos de que ambos métodos de autenticación compartan exactamente los mismos manejadores de éxito y fracaso. Esto significa que las URL de redirección al panel de control, los mensajes flash y el registro de seguridad son consistentes en toda la aplicación, independientemente de si el usuario usó su huella digital o una contraseña de 20 caracteres para acceder. // 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
    {
        // Solo interceptar intentos de inicio de sesión POST estándar con una contraseña
        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);
    }
}
 El sistema de autenticadores de Symfony 7.4 es increíblemente flexible. ¡Podemos configurar nuestro   para aceptar tanto inicios de sesión por formulario (contraseñas) como aserciones WebAuthn en el mismo 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 }
 Magia Frontend: Mediación Condicional (Autocompletado) Aquí es donde la aplicación comienza a sentirse verdaderamente moderna. La Mediación Condicional permite al navegador mostrar una sugerencia de Passkey tan pronto como el usuario se enfoca en el campo de correo electrónico. Este inicio de sesión de “cero esfuerzo” significa que para muchos usuarios, el proceso de inicio de sesión consiste en un solo toque en su nombre en una ventana emergente del navegador, seguido de un escaneo biométrico. Para lograr esto, usamos el atributo   en nuestro HTML. Esto sirve como una señal directa al administrador de credenciales del navegador. En el lado de JavaScript, el método connect() de Stimulus es el lugar perfecto para iniciar una “escucha” en segundo plano de estas sugerencias de autocompletado, permitiendo que la página permanezca interactiva mientras el navegador espera la selección del usuario. autocomplete=”username webauthn” La Plantilla Necesitamos agregar   a nuestra entrada. Esta es la señal para el navegador. 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="Introduce tu correo electrónico">
    
    <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">Continuar</button>
</form>
 El Controlador Stimulus En nuestro método  , verificamos si el navegador soporta el autocompletado. Si lo hace, iniciamos la  . connect() ceremonia WebAuthn inmediatamente en segundo plano // 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 {
                // Escucha en segundo plano para autocompletado
                const credential = await startAuthentication({
                    optionsJSON: await this.fetchOptions(),
                    useBrowserAutofill: true
                });
                await this.verifyResult(credential);
            } catch (e) {
                // Captura silenciosa: el usuario podría simplemente escribir manualmente
            }
        }
    }

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

        if (flow === 'passkey') {
            await this.triggerPasskeyLogin(email);
        } else {
            this.showPasswordInput();
        }
    }
}
 El Camino de “Actualización”: Añadir Passkeys desde el Panel de Control El mayor desafío con las Passkeys no es el código; es la adopción. Necesitas darle a tus usuarios una razón y una forma de agregar datos biométricos a sus cuentas de contraseña existentes. Hemos implementado un   especializado que permite a los usuarios ya conectados tender un puente seguro entre su pasado basado en contraseñas y su futuro biométrico sin la fricción de un re-registro completo. PasskeySettingsController Una parte clave de este flujo es el uso de  . Al pasar los identificadores de credenciales existentes del usuario al navegador durante este proceso, nos aseguramos de que el usuario no reciba la indicación de crear una Passkey duplicada en el mismo dispositivo. Esto evita el “desorden de credenciales” y garantiza que el panel de control del usuario solo muestre llaves de seguridad únicas y funcionales, manteniendo la experiencia limpia y manejable. 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()
    );

    // Excluir llaves existentes para que el navegador no ofrezca duplicados
    $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);
}
 Dificultades Técnicas y Verificación Datos Binarios y JSON Uno de los problemas más comunes en el desarrollo de WebAuthn es la codificación. Los identificadores de credenciales y los desafíos son datos binarios crudos, que el json_encode estándar no puede manejar. Debemos usar el estándar base64url, que está diseñado específicamente para el transporte seguro en URL y JSON sin los caracteres problemáticos + o / que se encuentran en el Base64 estándar. Usar el serializador especializado del bundle asegura que esta conversión ocurra correcta y consistentemente. Pasos de Verificación 
 
 
 
 
  Crea una cuenta a través de la ruta heredada /register/password para establecer tu usuario base del “viejo mundo”. Registro de Contraseña:  Ve a /login e ingresa el correo electrónico. El sistema debería identificar correctamente al usuario como un usuario solo de contraseña y revelar el campo de contraseña. Inicio de Sesión Híbrido:  Inicia sesión con tu contraseña, navega al Panel de Control y haz clic en “Agregar Passkey” para conectar la cuenta al mundo biométrico. Actualización:  Cierra sesión. Haz clic en el campo de correo electrónico. Tu navegador ahora debería ofrecer la sugerencia de Passkey inmediatamente, completando el círculo de la experiencia híbrida. Autocompletado: Conclusión La implementación de un modelo de autenticación híbrido en Symfony 7.4 representa un equilibrio sofisticado entre seguridad de vanguardia y accesibilidad práctica. Al proporcionar una interfaz unificada que respeta tanto los hábitos de contraseña heredados como el movimiento hacia la biometría, eliminas la fricción que a menudo aniquila la adopción de nuevas funciones. Este enfoque no solo mejora la seguridad; construye confianza con tus usuarios al encontrarlos donde están, mostrándoles claramente un camino mejor y más rápido. Técnicamente, hemos visto que el componente de Seguridad moderno de Symfony y el bundle WebAuthn proporcionan una base notablemente robusta para estos flujos complejos. La capacidad de tratar las contraseñas y las passkeys como insignias complementarias dentro del mismo ecosistema significa que, como desarrollador, no estás luchando contra el framework para implementar lógica personalizada. En cambio, estás utilizando primitivas estándar e interoperables para construir un sistema que es tan mantenible como seguro. Mirando hacia el futuro, el objetivo es una web donde la autenticación sea tan fluida que se vuelva invisible. Con la Mediación Condicional y los mecanismos de respaldo híbridos, nos estamos acercando a esa realidad, donde la carga de la seguridad se traslada de la memoria del usuario al hardware en su bolsillo. Al adoptar estos patrones hoy, estás preparando tu aplicación para el futuro y asegurando que tus usuarios se beneficien de los más altos estándares de seguridad digital sin sacrificar la conveniencia que esperan.  Puedes encontrar la implementación completa y seguir el progreso del proyecto en GitHub: [ ] Código Fuente: https://github.com/mattleads/PasskeysAuth ¡Conectemos! Si encontraste útil esto o tienes preguntas sobre la implementación, me encantaría saber de ti. Mantengámonos en contacto y sigamos la conversación en estas plataformas: 
 
 
 
 
 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

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

Cómo construir una estrategia de clave híbrida en Symfony 7.4: Navegando más allá de la fortaleza sin contraseña

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps