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.
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.
Antes de comenzar, asegúrate de tener lo siguiente:
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:
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.
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.
endpoint es 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.appId es el ID de la aplicación Logto. Puedes encontrarlo en la página de detalles de la aplicació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.
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.
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:
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!