Compartir:
){kind=small}
Actor de formación con una disertación sobre la comedia, llegué al desarrollo de PHP a través de la escena de las reuniones. Puedes encontrarme hablando y escribiendo sobre tecnología, o tocando/comprando discos raros de mi colección de vinilos.
Integración de la autenticación silenciosa de Vonage en Laravel
Tiempo de lectura: 7 minutos
La autenticación silenciosa elimina la necesidad de una contraseña de un solo uso (OTP) cuando se utiliza la autenticación de dos factores mediante el envío de un número de teléfono del dispositivo y la comprobación de su autenticidad (por ahora, si quieres saber "cómo", la respuesta fácil es "magia" y la respuesta real está en este desglose de cómo funcionan las API de red).
Entonces, nuestra aplicación de demostración utilizará Laravel para intentar el inicio de sesión de un usuario real de tu aplicación utilizando la autenticación silenciosa de Vonage en Verify. Si el número de teléfono no se encuentra en un territorio admitido o no está en una red admitida, se volverá por defecto a SMS.
Es la velocidad a la que se escribe el código de Laravel lo que hace que el framework sea una opción ideal para mostrar cómo funciona este sistema de autenticación en la práctica. No es de extrañar que Laravel, como empresa, acaba de anunciar 57 millones de dólares en financiación de serie A al mismo tiempo que se anunció el lanzamiento del perfil Cloud SaaS de Laravel.
Un gran dolor de cabeza con los Frameworks para Desarrolladores de Aplicaciones Web en todos los lenguajes y sabores es lo que se incluye como boilerplate. Node, por ejemplo, tiene miles de frameworks y librerías, y debido a esto, la metodología de facto para construir una aplicación es elegir cada elemento de tu aplicación y conectarlo. Aunque muchos desarrolladores de Node asentirán que así es como lo hacemoshay algunos (descargo de responsabilidad: yo) que no están acostumbrados a esta forma de trabajar porque tenemos cosas como...
...que te da todo lo que necesitas para empezar con un sistema de autenticación. Estas son algunas características:
Migraciones para la tabla de usuarios a ejecutar para la base de datos
Plantillas para dar de alta un nuevo usuario en tu app, que comienzan como una ruta abierta, pero que luego puedes proteger si es necesario
Un sistema de activación de contraseñas olvidadas prediseñado para ti
Formularios de inicio de sesión preconstruidos
Una gran cantidad de opciones CLI sobre cómo quieres que funcione este front-end. Blade plantillas con Alpine.js, Livewireo una SPA como Vue.js o React
El propósito de este artículo no es mostrarte cómo instalarlo o explicar las partes que conecta, sino personalizar lo que hace Breeze. Un argumento en contra de este tipo de prototipado rápido es: "Pero lo que sale está todo en el estilo de Laravel" Claro que sí. Pero es el boilerplate lo que importa: para hacer tuyo este código, lo único que te detiene es cambiar cómo funcionan los controladores y qué plantillas/rutas emiten. Aparte de eso, si realmente odias Tailwindpuedes deshacerte de él en unos 30 segundos.
Así que, dado que todo esto viene de fábrica, ¿por qué no integrar la API de autenticación silenciosa en el mecanismo de inicio de sesión? Y eso, lector, es exactamente lo que he hecho.
Esto es lo que necesitas para probarlo:
PHP 8.1 o superior (¡por favor, asegúrense de estar al día!)
Docker y docker-compose
Compositor
Un proxy localhost, como ngrok o Expose
Para empezar a utilizar el código, clona el repositorio:
git clone https://github.com/Vonage-Community/sample-verify2_sms_silent_auth-laravelY luego instalar las dependencias del proyecto:
composer installNecesitará un archivo de entorno, así que copie el ejemplo proporcionado (utilizando el comando que corresponda a su Sistema Operativo), que Sail utilizará para crear un nuevo archivo de base de datos SQLite.
cp .env.example .env // Unix-like OS
copy .env.example .env // WindowsLos siguientes pasos de instalación requieren que su aplicación sea arrancada en Docker-esta aplicación fue construida usando Laravel Sailpor lo que, siempre que la instalación de dependencias haya funcionado, podrá extraer los contenedores de la aplicación y ejecutarlos:
./vendor/bin/sail up -dEl -d ejecuta Docker como un demonio, en lugar de rastrear los registros. Puede que notes que el archivo de variables de entorno utiliza SQLite como base de datos -cuando escribí esta aplicación originalmente utilicé MySQL, pero para fines de demostración SQLite es un sustituto perfectamente aceptable (además, navegar por la base de datos con un IDE como VSCode o PHPStorm es más sencillo).
Usando el binario de Sail, ahora podemos terminar de instalar la base de datos y los activos del frontend:
./vendor/bin/sail artisan migrate
./vendor/bin/sail artisan db:seed
./vendor/bin/sail yarn installLa aplicación requiere un servidor front-end assets o build. La forma más rápida es ejecutar un servidor de desarrollo front-end:
./vendor/bin/sail yarn run devEsto ejecutará Vite como un proceso en su ventana de terminal, por lo que tendrá que abrir una nueva pestaña o ventana de terminal.
Por último, tendrá que generar una clave de aplicación:
./vendor/bin/sail artisan keyLa aplicación requiere una cuenta de desarrollador de Vonage válida y un JWT para realizar llamadas a la APIque son creadas automáticamente por el SDK PHP de Vonage usando tu clave privada descargada del Panel de aplicaciones y el ID de aplicación único de tu aplicación. Una vez que los tengas, descarga la clave privada en el directorio raíz de tu aplicación, agrega ./clave.privada como variable de entorno VONAGE_PRIVATE_KEY_PATHy el ID de la aplicación como VONAGE_APPLICATION_ID en su archivo .env . Es posible que tenga que reiniciar Sail una vez configuradas estas variables.
Con Sail arrancado, debería aparecer una pantalla de bienvenida al acceder a localhost:80.
Laravel Silent Auth Spash Screen
¡Ya estamos! Ha llegado el momento de registrarse. Dirígete a la esquina superior derecha y haz clic en Regístrese en. Verás la mayoría de Laravel Breeze con la excepción de un campo adicional "Número de teléfono". Esta parte es clave - almacenará tu número en la base de datos y luego intentará usar la Autenticación Silenciosa para completarlo.
Una cosa que puede que es que no he explicado qué es la Autenticación Silenciosa es. Bueno, este artículo es sobre la aplicación de demostración, así que si quieres leer más sobre ello, echa un vistazo a este artículo de nuestro blog.
El TLDR; aquí es: usted sólo será capaz de iniciar sesión con un dispositivo celular en una conexión celular. Esto significa que vamos a tener que exponer nuestra aplicación al mundo exterior. Para ello, yo recomendaría ya sea usando ngrok o quizás una opción más lógica podría ser Exponer que utiliza ReactPHP y proviene de la comunidad Laravel. Una vez que tengas una URL externa, es hora de acceder a ella desde tu dispositivo.
¿Qué ocurre cuando intentas conectarte? En primer lugar, el código comprueba si es la primera vez que se conecta o si el último inicio de sesión se produjo hace más de 4 días. Si se cumplen estas condiciones, se activará automáticamente el mecanismo de autenticación de dos factores (2FA).
Start Silent Auth Process
Al hacer clic en el botón para iniciar la autenticación, la aplicación determinará automáticamente si puede completar el proceso mediante Autenticación silenciosa y, si no puede, volverá a utilizar SMS:
SMS Fallback Option
Por lo tanto, para acceder al panel de control, deberá iniciar sesión automáticamente haciendo clic en el botón de inicio de Autenticación silenciosa, o puede iniciar sesión introduciendo el código enviado a su dispositivo. Para que la solicitud de Silent Auth funcione debes tener tu conexión WiFi desactivada y estar conectado a la red celular. Esto se debe a que Vonage valida el dispositivo y la ubicación.
Esencialmente, necesitaba secuestrar el existente Breeze existente. Por lo tanto, creé un nuevo middlewareVonageSilentAuthMiddleware-que se ejecuta en la ruta de inicio de sesión. Este middleware se ejecuta después de un inicio de sesión exitoso con una contraseñapor lo que sólo puede completar el flujo de autenticación si el controlador de autenticación silenciosa o el controlador de SMS pasan. Esta es parte de la lógica del middleware:
// is this the first time logging in?
if (empty($user->last_login)) {
$request->session()->put('email', $user->email);
$request->session()->put('phone_number', $user->phone_number);
Auth::logout();
return redirect()->route('silent');
}
// was the last login over 4 days ago?
$lastLogin = Carbon::make($user->last_login);
if ($lastLogin->diffInDays(Carbon::now()) > 4) {
$request->session()->put('email', $user->email);
$request->session()->put('phone_number', $user->phone_number);
Auth::logout();
return redirect()->route('silent');
}Una cosa que notarás es que el correo electrónico y el número de teléfono del usuario se ponen en la sesión. Esto le dice a los otros controladores después de la redirección que usuario sacar de la tabla de usuarios para autorizar una vez que se completa un mecanismo de autenticación en un controlador.
Esta es una parte del código bastante compleja de explicar. La contrapartida de la Autenticación Silenciosa es que es una experiencia casi sin fricción para el usuario final, pero más compleja de integrar para los desarrolladores. Esta aplicación Laravel sigue esencialmente el mismo proceso que el tutorial web de tutorial web Express.js pero con un panel de control y una tabla de usuarios. Para una explicación más detallada de cómo funciona el código frontend para resolver la petición de Autenticación Silenciosa, puedes encontrarlo en el tutorial.
Puede que note que está basado en la web Autenticación silenciosa. Hay algunas cosas a tener en cuenta aquí:
La mejor experiencia de Autenticación Silenciosa gira en torno al iOS y Android para aplicaciones móviles. Esto se debe a que estos SDK pueden forzar la solicitud de autenticación silenciosa a través de la conexión celular del dispositivo.
Sin embargoaunque no hay APIs web disponibles en el navegador para hacer este tipo de funcionalidad, tenemos una opción alternativa como se muestra en esta demo. Debido a esto: ¿por qué no tener Silent Auth como una opción de todos modosy si falla, usar un canal diferente para completar la 2FA?
Silent Auth a través de nuestra Verify API es una de las ofertas de esta nueva era de API de red. Para más información, consulte otras nuevas API que hemos lanzado, como la API de intercambio de SIM. Para más información sobre lo que ofrecemos o cómo funcionan estas API, consulte nuestra Comunidad de desarrolladores Slack o síganos en X.
Compartir:
Actor de formación con una disertación sobre la comedia, llegué al desarrollo de PHP a través de la escena de las reuniones. Puedes encontrarme hablando y escribiendo sobre tecnología, o tocando/comprando discos raros de mi colección de vinilos.