La forma más rápida de construir un sistema de autenticación

Agregar un sistema de autenticación de usuarios a tu producto debería ser fácil, ¿verdad? Después de todo, es un módulo tan estandarizado. Al menos, eso es lo que pensé, y el equipo de Logto se dedica a hacer que sea fácil para cada producto tener un sistema de identidad seguro y adecuado para negocios.

¿Qué tan rápido se puede hacer? Bien, veamos. Hay una solución de código bajo superrápida para aplicaciones web, perfecta para pruebas rápidas o para desplegar directamente a producción. Incluyendo el registro en la plataforma, todo se puede hacer en solo 1 hora o incluso menos. ¿No lo crees? Adelante, pruébalo tú mismo.

Como empresa de herramientas de IA, el tiempo es dinero, y necesito lanzar rápidamente para capturar el mercado. Esto es lo que necesito para la autenticación:

• Registro: Correo electrónico + Verificación de correo + Configurar contraseña
• Iniciar Sesión: Correo electrónico + Contraseña
• ¿Olvidaste tu contraseña?: Verificar correo + Restablecer contraseña
• Inicio de sesión social: Vamos con el más popular, inicio de sesión con Google.

De acuerdo, vamos.

Paso 1: Crear una cuenta y tenant en Logto#

1. Visita cloud.logto.io y regístrate para obtener una cuenta en Logto.
2. Crea un tenant de Producción directamente. El plan gratuito (50,000 MAU) es suficiente para nuestras necesidades de startup.

Paso 2: Configurar la conexión de correo electrónico#

¿Conectarme con mi proveedor de correo electrónico de terceros y crear plantillas de correo electrónico? ¡Oh, espera! Logto tiene un Servicio de Correo Electrónico preconstruido que no necesita configuración.

1. Ingresa información básica: Nombre del remitente, información de la empresa y carga el logotipo del correo electrónico (todo opcional).
2. Prueba: Envíate un correo electrónico. Llega un elegante correo electrónico de verificación.

¡Eso es, toda la configuración y prueba lleva menos de 5 minutos! Si no te importa que el remitente sea “[email protected]”, puedes usar este servicio gratuito y olvidarte de escribir plantillas de correo electrónico para diferentes escenarios. De lo contrario, puedes optar por un proveedor de correo personalizado.

Paso 3: Configurar la conexión social#

Diferentes productos necesitan diferentes IDs de cliente de proveedores de Google, así que necesito vincular el conector de Google yo mismo. Pero no es complicado.

1. Rellena el Client ID y Client secret en Logto, luego habilita Google One Tap.

2. Ingresa la URL de Callback. Selecciona ../auth/userinfo.email, ../auth/userinfo.profile y openid en la consola API de Google.

Gracias a la guía paso a paso de Logto, terminé la configuración en menos de 10 minutos.

Paso 4: Configurar la experiencia de inicio de sesión#

Con los recursos del proveedor configurados, es hora de configurar la experiencia de inicio de sesión y registro.

1. Navega a la sección “Sign-in Experience”:
   • Carga el logotipo de tu aplicación y el Favicon.
   • Reemplaza el color de la marca.
   • Habilita el modo oscuro con un solo clic y rellena los mismos campos.
2. Ve a la pestaña “Sign-up & sign-in” para cambiar los métodos de autenticación:
   • Configura “Correo electrónico” como el identificador de registro y marca “Crear tu contraseña” y “Verificar al registrarse”.
   • Configura “Correo electrónico” y “Contraseña” como el identificador de inicio de sesión y el factor de autenticación.
   • Agrega “Google” para el inicio de sesión social.

Convenientemente, las configuraciones predeterminadas eran exactamente lo que necesitaba, así que esto no tomó mucho tiempo en absoluto.

Paso 5: Integrar la aplicación web sin SDK#

¿Por qué perder tiempo integrando servicios? Usa la aplicación protegida de Logto para hacer proxy de las solicitudes de mi aplicación.

1. Crea una Aplicación Protegida: Ingresa la URL original de mi aplicación (la que no tiene protección de autenticación, cualquiera puede visitar). Configura el dominio de la aplicación con el sufijo “.protected.app” para pruebas (esta dirección web se proporciona a los usuarios para que visiten tu sitio, pero ya está configurada con flujos de autenticación, de ahí el nombre "Aplicación Protegida").

   

2. Una vez creada la aplicación, visita esta dirección de prueba acme.protected.app (👈 ¡tú también puedes probarlo!). Se requiere autenticación para acceder a este sitio. Prueba realizada con éxito.

   

3. Configura mi dominio real de este sitio web para producción en lugar del .protected.app por defecto.

4. Opcional: Si solo quieres usar autenticación para rutas específicas, puedes agregar “Reglas de autenticación personalizadas”. Por defecto, todo el sitio web está protegido.

5. Las rutas de autenticación /register, /sign-in, /sign-in-callback, y /sign-out se pueden agregar directamente a botones como Comenzar, Iniciar Sesión, y Cerrar Sesión.

6. Por último, pero no menos importante, asegura tu servidor de origen con Autenticación Básica HTTP para completar esta integración de proxy. Cada solicitud de la Aplicación Protegida incluye el siguiente encabezado: Authorization: Basic base64(appId:appSecret).

¡Eso es todo! En solo una hora, mi sitio web está protegido con autenticación.

Conclusión#

Puedes usar con confianza esta solución superfácil de ejecución para proteger tu sitio web. A medida que tu producto crece, el poderoso y completo sistema de Logto te permite actualizar sin problemas a funciones como soporte multiaaplicación, MFA, SSO, autorización de aplicaciones de terceros, RBAC y organización multi-tenant, junto con integraciones para todo tipo de frameworks para mejorar la protección de tus recursos y la gestión de usuarios.

Te invito a que lo experimentes por ti mismo y equipes rápidamente tu sitio web con protección de autenticación.

Para más información sobre integración rápida de autenticación, envía comentarios en nuestra Hoja de Ruta o contáctanos directamente. Y no olvides unirte a nuestra comunidad en Discord para charlar con el equipo de Logto.

¡Feliz integración!