Introducción

Este tutorial te ayudará a construir una aplicación cliente sencilla que permite a tus usuarios finales iniciar sesión en tu aplicación después de haber sido autenticados mediante Catalyst Hosted Authentication con una función de Custom User Validation.

La aplicación Authorization Portal utiliza los siguientes servicios de Catalyst y sus respectivos componentes:

• Catalyst Cloud Scale
  • Authentication: El usuario final será autenticado en tu aplicación mediante Hosted Authentication, un tipo de Native Catalyst Authentication.
  • Web Client Hosting: El frontend de la aplicación se alojará en Catalyst utilizando el componente Web Client Hosting. Puedes inicializar y configurar el cliente como una aplicación web Basic, una aplicación React o una aplicación Angular.
• Catalyst Serverless
  • Functions: Codificaremos la función Basic I/O en Python para implementar Custom User Validation.

Este tutorial te ayudará a comprender el uso de las diversas funcionalidades del tipo Hosted Authentication. Incorporaremos las siguientes funcionalidades en este tutorial:

• Registrar usuarios finales en la aplicación web usando su dirección de correo electrónico
• Iniciar sesión de usuarios finales en la aplicación usando la información de la cuenta de registro
• Iniciar sesión de usuarios finales en la aplicación usando cualquiera o todos los siguientes proveedores de identidad federados:
  • Zoho
  • Google
  • Microsoft 365
  • LinkedIn
  • Facebook
• Restablecer la contraseña en caso de que un usuario final olvide su contraseña
• Personalizar y estilizar los elementos de inicio de sesión de las siguientes páginas: Sign Up, Confirm Password, Log In y Password Reset.
• Personalizar y configurar las plantillas de correo electrónico de Email Verification y Password Reset.
• Configurar y agregar una función de Custom User Validation
• Iniciar y cerrar sesión en la aplicación

La siguiente imagen es un ejemplo de cómo aparecerá la pantalla de inicio de sesión de la aplicación cliente:

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

• User Management: Los detalles del usuario se guardan automáticamente en esta sección, después de que se registren en la aplicación. Usando esta funcionalidad, 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 si es necesario.

• Whitelisting: Utilizará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 de Catalyst (CLI) 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 cliente 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 sociales de Zoho, Google, LinkedIn, Microsoft 365 o Facebook, o hacer clic en la opción Sign Up proporcionada para registrarse usando su correo electrónico.

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

• Correo de verificación de email activado: Después de que un usuario se registra en la aplicación, se enviará un correo de verificación de email a la dirección de correo electrónico utilizada para registrar la cuenta. El contenido y estilo del correo de verificación se puede personalizar según tu preferencia usando la funcionalidad Email Templates de Authentication.

• Configuración de contraseña: Cuando los usuarios finales hagan clic en el enlace presente en el correo de verificación de email, serán dirigidos a la página de configuración de contraseña. Aquí, el usuario final puede proteger 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 se ha creado visualizando 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 alguna de sus contraseñas anteriores para recuperar su cuenta o que procedan con la opción de restablecimiento. Después de que los usuarios procedan con la opción de restablecimiento, se enviará un correo con una contraseña de un solo uso (OTP) al usuario. Después de que se verifique la OTP, podrán establecer una nueva contraseña para su cuenta.