Introducción

Este tutorial te ayudará a construir una aplicación client sencilla que permite a tus usuarios finales iniciar sesión en tu aplicación después de haber sido autenticados utilizando 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 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 utilizando Embedded 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. Inicializaremos y configuraremos el client como una Basic web app y una aplicación React.
• Catalyst Serverless
  • Functions: Utilizaremos una función Basic I/O para codificar la lógica utilizada para implementar Custom User Validation. Codificaremos la función en Python.

Este tutorial te ayudará a comprender cómo utilizar las diversas características 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 Identity Provider:
  • Zoho
  • Google
  • Microsoft 365
  • LinkedIn
  • Facebook
• Opción de restablecimiento de contraseña en caso de que un usuario final olvide su contraseña
• Configurar las plantillas de correo electrónico de Email Verification y Password Reset
• Configurar y agregar una función de Custom User Validation
• Ver 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 sus funcionalidades aquí: ¡Prueba la App!

Utilizarás las siguientes características 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 característica, 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: 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 (CLI) de Catalyst para construir esta aplicación.

Se te proporcionará el código de los archivos que deben incluirse en el directorio de la función y del client de tu proyecto en este tutorial. Puedes copiar el código proporcionado o personalizarlo según lo consideres 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: