Introducción

Este tutorial te ayudará a construir una aplicación de client simple que permite a tus usuarios finales iniciar sesión en tu aplicación después de haber sido autenticados usando el tipo Embedded Authentication con una función de Custom User Validation. El tipo Embedded Authentication te permite cargar tu elemento de inicio de sesión como un iFrame en tu aplicación.

La aplicación del portal Embedded Authentication utiliza los siguientes servicios de Catalyst y sus respectivos componentes:

• Catalyst Cloud Scale
  • Authentication: El usuario final será autenticado en tu aplicación usando Embedded Authentication, un tipo de Native Catalyst Authentication.
  • Web Client Hosting: El front end de la aplicación será alojado en Catalyst usando el componente Web Client Hosting. Inicializaremos y configuraremos el client como una aplicación web básica y una aplicación React.
• Catalyst Serverless
  • Functions: Utilizaremos una función Basic I/O para codificar la lógica usada para implementar Custom User Validation. Codificaremos la función en Java.

Este tutorial te ayudará a comprender las diversas funcionalidades del tipo Embedded Authentication. Incorporaremos las siguientes funcionalidades en este tutorial:

• Registrarse en la aplicación web usando una dirección de correo electrónico
• Iniciar sesión en la aplicación usando la información de la cuenta de registro
• Iniciar sesión en la aplicación usando cualquiera o todos los siguientes inicios de sesión de proveedores de identidad:
  • Zoho
  • Google
  • Microsoft 365
  • LinkedIn
  • Facebook
• Opción de restablecer la contraseña en caso de que un usuario final olvide su contraseña
• Configurar plantillas de correo electrónico de Email Verification y Password Reset email templates
• Configurar y agregar una función de Custom User Validation
• Ver la información del perfil después de iniciar sesión en la aplicación
• Cerrar sesión en la aplicación

A continuación se muestra un ejemplo de cómo aparecerá la aplicación de client:

Puedes acceder a una aplicación funcional y probar su funcionalidad aquí: ¡Prueba la aplicación!

Utilizarás las siguientes funcionalidades del componente Authentication en esta aplicación:

• User Management: Los perfiles de usuario se guardan automáticamente en esta sección cuando se registran en la aplicación. Usando esta función, puedes gestionar el acceso de los usuarios finales a tu aplicación y configurar sus roles.

• Authentication Type: Podrás ver el tipo de autenticación que has configurado para tu aplicación y editar tus configuraciones cuando sea necesario.

• Whitelisting: Usarás esta sección para habilitar Custom User Validation. También puedes usar esta sección para habilitar el acceso CORS e iFrame a tu aplicación.

• Email Templates: Podrás configurar y personalizar los correos electrónicos de Email Verification y Password Reset desde esta sección.

Utilizaremos la consola web de Catalyst y la Interfaz de Línea de Comandos (CLI) de Catalyst para construir esta aplicación.

Se te proporcionará el código para los archivos que se incluirán en el directorio de la función y del client de tu proyecto en este tutorial. Puedes copiar el código proporcionado o personalizarlo, si lo consideras necesario, y pegarlo en los archivos apropiados según se indique.

Arquitectura de la aplicación

La lógica de la aplicación del portal de autorización se describe a continuación:

• Proceso de inicio de sesión: El usuario final será dirigido a la página de inicio de sesión. Puede optar por iniciar sesión en la aplicación usando los inicios de sesión de los proveedores de identidad Zoho, Google, LinkedIn, Microsoft 365 o Facebook, o hacer clic en la opción Sign Up proporcionada para registrarse usando su dirección de correo electrónico.

• Validación personalizada de usuario: Los detalles ingresados por el usuario final durante el proceso de inicio de sesión se enviarán como una entrada JSON a la función de Custom User Validation. Si los detalles se validan exitosamente según la lógica personalizada presente en la función Basic I/O, se activará el correo electrónico de verificación.

• Verificación de correo electrónico activada: Una vez que los usuarios se registran en la aplicación, se enviará un correo electrónico de verificación a la dirección de correo electrónico utilizada para registrar la cuenta. El contenido y estilo del correo electrónico de verificación se pueden personalizar según tu preferencia usando la función Email Templates de Authentication.

• Configuración de contraseña: Cuando los usuarios finales hacen clic en el enlace presente en el correo electrónico de verificación, serán dirigidos a la página de configuración de contraseña. Aquí, el usuario final puede asegurar su cuenta estableciendo una contraseña de su preferencia.

• Cuenta de usuario final creada: Después de establecer la contraseña, se creará la cuenta de usuario y el usuario final podrá iniciar sesión en la aplicación usando las credenciales que creó. Puedes confirmar que la cuenta ha sido creada viendo los detalles de la cuenta en la sección User Management del componente Authentication.

• Opción de restablecimiento de contraseña: Los usuarios finales tendrán la opción de restablecer la contraseña optando por la opción Forgot Password presente en la página de inicio de sesión. Luego se les pedirá que proporcionen cualquiera de sus contraseñas anteriores para recuperar su cuenta o que procedan con la opción de restablecimiento. Una vez que los usuarios procedan con la opción de restablecimiento, se enviará un correo electrónico con una contraseña de un solo uso (OTP) al usuario. Una vez verificado el OTP, pueden establecer una nueva contraseña para su cuenta.