Introducción

Este tutorial te ayudará a construir una aplicación 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 Embedded Authentication Portal 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 se alojará en Catalyst usando el componente Web Client Hosting. Inicializaremos y configuraremos el client como una Basic web app y una React app.
• Catalyst Serverless
  • Functions: Usaremos una función Basic I/O para codificar la lógica utilizada para implementar Custom User Validation. Codificaremos la función en Node.js.

Este tutorial te ayudará a comprender las diversas funciones 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 Identity Provider Logins:
  • 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

El siguiente es un ejemplo de cómo aparecerá la aplicación client:

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

Usarás las siguientes funciones 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.

Usaremos 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 función y 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 las instrucciones.

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 Identity Provider Logins de 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 datos ingresados por el usuario final durante el proceso de inicio de sesión se enviarán como entrada JSON a la función Custom User Validation. Si los datos 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 por 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 utilizada para registrar la cuenta. El contenido y estilo del correo de verificación puede personalizarse 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 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, la cuenta de usuario será creada 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 alguna 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.