Crear autenticación de CapacitorJS con Logto
En este tutorial, demostraremos cómo construir el flujo de autenticación con Logto en Capacitor. Esto te permitirá crear flujos de inicio y registro multiplataforma con facilidad.
Founder
Introducción
- Logto es una alternativa moderna a Auth0 para construir infraestructura de identidad del cliente con un esfuerzo mínimo. Soporta varios métodos de inicio de sesión, incluyendo nombre de usuario, correo electrónico, número de teléfono e inicios de sesión sociales populares como Google y GitHub.
- Capacitor es un runtime nativo de código abierto para construir aplicaciones Web Nativas.
En este tutorial, demostraremos cómo construir el flujo de autenticación con Logto en Capacitor. Esto te permitirá crear flujos de inicio y registro multiplataforma con facilidad.
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
- Una cuenta de Logto. Si no tienes una, puedes registrarte gratis.
- Un proyecto de Capacitor. Puedes seguir la guía oficial para crear uno.
Crear una aplicación Logto
Para comenzar, crea una aplicación Logto con el tipo "Nativa". Las aplicaciones Logto sirven como aplicaciones cliente en los flujos de OAuth 2.0 y OpenID Connect (OIDC). Sigue estos pasos para crear una aplicación Logto:
- Inicia sesión en la Consola en la Nube de Logto.
- En la barra de navegación izquierda, haz clic en Aplicaciones.
- Haz clic en Crear aplicación.
- Selecciona Nativa como el tipo de aplicación e ingresa el nombre de la aplicación.
- Haz clic en Crear.
Después de crear la aplicación Logto, configura el URI de redirección. El URI de redirección se usa para redirigir al usuario de vuelta a tu aplicación después del flujo de autenticación.
Asegúrate de que el URI redirija a la app de Capacitor, por ejemplo, com.example.app://callback. El valor puede variar dependiendo de la configuración de tu app de Capacitor. Para más detalles, consulta Capacitor Deep Links.
Recuerda hacer clic en Guardar cambios después de actualizar el URI de redirección.
Si no estás seguro sobre el URI de redirección, puedes dejarlo vacío por ahora y actualizarlo más tarde.
Configura Capacitor
Asumiendo que ya tienes un proyecto de Capacitor, este tutorial es agnóstico al marco, por lo que puedes usar cualquier marco de interfaz de usuario que prefieras y actualizar el código en consecuencia.
Instalar dependencias
Inicializar el cliente Logto
- El
endpointes el punto de acceso API de Logto. Puedes encontrarlo en la guía integrada o en la sección Dominios en la configuración del arrendatario. - El
appIdes el ID de la aplicación Logto. Puedes encontrarlo en la página de detalles de la aplicación.
Implementar el botón de inicio de sesión
Añade el siguiente código al controlador onClick del botón de inicio de sesión:
Reemplaza com.example.app://callback con el URI de redirección que configuraste en la aplicación Logto.
Punto de control: Iniciar el flujo de autenticación
Ejecuta la aplicación de Capacitor y haz clic en el botón de inicio de sesión. Se abrirá una ventana del navegador, redirigiendo a la página de inicio de sesión de Logto.
Cerrar sesión
Dado que Capacitor aprovecha el Safari View Controller en iOS y las Chrome Custom Tabs en Android, el estado de autenticación puede persistir por un tiempo. Sin embargo, a veces el usuario puede querer cerrar sesión de la aplicación inmediatamente. En este caso, podemos usar el método signOut para cerrar sesión del usuario:
El método signOut tiene un parámetro opcional para el URI de redirección post cierre de sesión. Si no se proporciona, el usuario será redirigido a la página de cierre de sesión de Logto:
El usuario necesita hacer clic en "Hecho" para cerrar la vista web y volver a la aplicación de Capacitor. Si deseas redirigir automáticamente al usuario de vuelta a la aplicación de Capacitor, puedes proporcionar el URI de redirección post cierre de sesión:
Asegúrate de que el URI de redirección post cierre de sesión redirija a la app de Capacitor, y recuerda añadir el URI de redirección post cierre de sesión en la Consola de Logto:
Punto de control: Completar el flujo de autenticación
Ejecuta la aplicación de Capacitor nuevamente y haz clic en el botón de inicio de sesión. Si todo va bien, cuando el flujo de autenticación se complete, la aplicación de Capacitor recibirá el resultado de inicio de sesión e imprimirá las credenciales del usuario en la consola.
Luego haz clic en el botón de cierre de sesión, y la aplicación de Capacitor será redirigida a la página de cierre de sesión de Logto. Se redirigirá automáticamente de vuelta a la aplicación de Capacitor si el URI de redirección post cierre de sesión está configurado.
Ahora puedes configurar el flujo de autenticación en la Consola en la nube de Logto sin escribir código complejo. La configuración se aplicará a todas las aplicaciones cliente, asegurando una experiencia de usuario consistente.
Si encuentras algún problema durante la integración, por favor no dudes en contactarnos vía correo electrónico en [email protected] o únete a nuestro servidor de Discord!