# Node.js



--------------------------------------------------------------------------------
title: "Introducción"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.642Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/introduction/"
service: "All Services"
related:
- Project Directory Structure (/es/cli/v1/project-directory-structure/introduction/)
- Hosted Authentication Type (/es/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/)
- User Management (/es/cloud-scale/help/authentication/user-management/introduction/)
- Custom User Validation (/es/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)
- Social Logins (/es/cloud-scale/help/authentication/social-logins/introduction/)
- Java SDK (/es/sdk/java/v1/overview/)
- Node.js SDK (/es/sdk/nodejs/v2/overview/)
- Python SDK (/es/sdk/python/v1/overview/)

--------------------------------------------------------------------------------


# 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 Node.js 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:
<br />


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.

Nota: Si eres usuario del IDE Visual Studio Code, puedes instalar la extensión Catalyst Tools y usar tu IDE en lugar de la CLI. Puedes encontrar más detalles sobre la extensión de Catalyst para VS Code en esta sección de ayuda.

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.

Nota: 

Como estamos usando el método Hosted Login:<br />
  - No tienes que codificar la lógica adicional para activar los correos electrónicos; serán gestionados automáticamente por Catalyst en el backend.
  - Puedes estilizar las páginas de inicio de sesión, registro y restablecimiento de contraseña directamente en la consola, por lo que no tienes que codificar elementos de estilo adicionales.



--------------------------------------------------------------------------------
title: "Requisitos previos"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.644Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/prerequisities/"
service: "All Services"
related:
- CLI Command Reference (/es/cli/v1/cli-command-reference/)
- Install CLI (/es/getting-started/installing-catalyst-cli/)
- Login CLI (/es/cli/v1/login/login-from-cli/)

--------------------------------------------------------------------------------


# Requisitos previos

Antes de comenzar a construir la aplicación, debes tener los siguientes requisitos previos instalados en tu sistema:

1. **Catalyst CLI**<br /><br />
    Catalyst CLI contiene un conjunto de herramientas que te permiten inicializar, desarrollar, probar y desplegar los componentes de tu aplicación desde tu máquina local. Trabajaremos con Catalyst CLI en este tutorial.<br /><br />Debes realizar las siguientes acciones:
    * **Instalar Catalyst CLI**: Catalyst CLI se instala a través de NPM. Por lo tanto, debes tener NPM y Node.js instalados en tu sistema antes de instalar la CLI. Consulta la página de ayuda de instalación de Catalyst CLI para obtener detalles sobre los requisitos previos y los pasos para instalarla.
    * **Iniciar sesión en Catalyst CLI**: Después de instalar Catalyst CLI, debes autenticar la CLI con tu cuenta de Catalyst antes de usarla. Consulta la página de ayuda de inicio de sesión en la CLI para conocer los pasos para iniciar sesión desde Catalyst CLI y las diversas opciones disponibles.

2. **Cualquier herramienta IDE para desarrollo de Node.js y código del cliente**<br /><br />
    Puedes usar cualquier IDE para trabajar con la función *Basic I/O* y el código del cliente. Algunas opciones populares incluyen Visual Studio Code y Sublime Text. Descarga e instala un IDE de tu preferencia en tu sistema.

Si eres usuario del IDE Visual Studio Code, puedes instalar la extensión Catalyst Tools y usar tu propio IDE en lugar de la CLI. Puedes encontrar más detalles sobre la extensión de Catalyst para VS Code en esta sección de ayuda.


--------------------------------------------------------------------------------
title: "Crear un proyecto"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.644Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/create-project/"
service: "All Services"
related:
- Project Directory (/es/cli/v1/project-directory-structure/introduction)
- Set up Catalyst Projects (/es/getting-started/catalyst-projects)

--------------------------------------------------------------------------------


# Crear un proyecto

Vamos a crear un proyecto de Catalyst desde la consola de Catalyst.

1. Inicia sesión en la consola de Catalyst y haz clic en **Create New Project**.
    <br />

2. Ingresa el nombre del proyecto como "**AuthorizationPortal**" en la ventana emergente y haz clic en **Create**.
    <br />

Tu proyecto se creará y se abrirá.

Puedes acceder al proyecto más adelante haciendo clic en **Access Project**.
<br />


--------------------------------------------------------------------------------
title: "Configurar Hosted Authentication"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.644Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/configure-hosted-login/"
service: "All Services"
related:
- Setup Hosted Authentication type (/es/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/configure-hosted-authentication/)
- Configure Social Logins (/es/cloud-scale/help/authentication/social-logins/configuring-social-logins/)

--------------------------------------------------------------------------------


# Configurar Hosted Authentication para la aplicación

Configuremos el tipo de *Native Catalyst Authentication*, *Hosted Login*, en esta sección.

1. Authentication es un componente de Catalyst Cloud Scale. Haz clic en el ícono de **Cloud Scale** en el menú de navegación lateral de la consola para acceder a la consola del servicio Cloud Scale y luego haz clic en **Start Exploring**.
    <br />

2. Haz clic en **Authentication** en *Security & Identity* para acceder al componente Authentication.
    <br />

3. Puedes configurar el elemento de autenticación de tu aplicación usando *Native Catalyst Authentication* o un servicio de *Third-party Authentication*. Para este tutorial, vamos a configurar la autenticación de la aplicación usando *Hosted Login*, un tipo de *Native Catalyst Authentication*. Haz clic en el botón **Set Up** en la sección *Native Catalyst Authentication* para comenzar a configurar tu elemento de inicio de sesión.
    <br />

Nota:<br />

* Embedded Login
* Third-party Authentication 

4. Selecciona *Hosted Authentication* y haz clic en **Next**.
    <br />

5. Ingresa el nombre de tu empresa u otro nombre de tu preferencia en el campo *Company Name* y sube un archivo de imagen de tu elección para el *Company Logo*.
    <br />
Nota: Para los fines de este tutorial, estamos usando "Zylker Technologies Pvt. Ltd." como nombre de la empresa.

6. Usa las paletas de colores en la consola para estilizar tu elemento de inicio de sesión. Usa la sección *Preview* a la derecha y diseña el elemento de inicio de sesión según tu preferencia.
    <br />

Nota: Puedes usar la sección Preview para ver simultáneamente el estilo de tus elementos de Sign In, Sign Up y Password Reset. Sin embargo, para ver la página de Sign Up, necesitas habilitar Public Signup. Los pasos involucrados en habilitar Public Signup se indican a continuación.

7. Haz clic en el **botón de alternancia** para habilitar *Public Signup*.
    <br />
    * Lee la ventana emergente de información y haz clic en **Yes, Proceed**.
        <br />
Nota: Para obtener más información sobre Public Signup, visita este documento de ayuda.

8. Puedes agregar cualquiera o todos los Social Logins que están presentes en la consola.
    <br />

    Para habilitar el inicio de sesión social de **Zoho**:

    - Haz clic en el botón **Zoho** e ingresa "**AuthorizationPortal**" como el *Client Name*.
        <br />
    - Haz clic en **Enable**.
        <br />
        Tus usuarios finales ahora pueden iniciar sesión en tu aplicación usando sus credenciales de Zoho. 
    Nota: Como tu aplicación se está construyendo en Catalyst by Zoho, no necesitas crear credenciales OAuth de Client ID y Client Secret.

    Para habilitar el inicio de sesión social de **Google**:

    - Haz clic en el botón **Google** e ingresa las credenciales OAuth Client ID y Client Secret que obtuviste en la consola de Google en sus respectivos campos.
        <br />
        Nota: Los pasos para obtener las credenciales OAuth Client ID y Client Secret para cada uno de los inicios de sesión sociales se pueden consultar en los siguientes documentos de ayuda: Google, Microsoft 365, LinkedIn y Facebook.
    - Haz clic en **Enable**.
        <br />
        Tus usuarios finales ahora pueden iniciar sesión en tu aplicación usando sus credenciales de **Google**.
    
    Puedes repetir los mismos pasos para habilitar los otros inicios de sesión sociales.
    <br />

9. Haz clic en **Next**.

Nota: Siempre tienes la opción de editar tu diseño y las configuraciones de inicio de sesión social en un momento posterior usando la sección Authentication Type.

10. Configuraremos la sección *Additional Settings* en un momento posterior usando la funcionalidad *Whitelisting*. Haz clic en **Finish**.
    <br />

Ahora podrás ver y verificar que el tipo *Hosted Authentication* ha sido habilitado para tu aplicación.
<br />

También podrás ver que Catalyst ha generado **Access URLs** seguros para tus páginas de *Login*, *Sign Up* y *Password Reset*, y ha aplicado automáticamente tus preferencias de estilo en todas las páginas correspondientes.
<br />


--------------------------------------------------------------------------------
title: "Configurar las plantillas de correo electrónico"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.645Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/configure-email-templates/"
service: "All Services"
related:
- Email Templates (/es/cloud-scale/help/authentication/email-templates/introduction/)

--------------------------------------------------------------------------------


# Configurar las plantillas de correo electrónico

Catalyst te proporciona Email Templates que puedes usar para enviar correos electrónicos personalizados a tus usuarios finales cuando se registran en tu aplicación, o en instancias en las que deseen cambiar su contraseña.

Para configurar las plantillas de correo electrónico:

1. Haz clic en la pestaña **Email Templates** en el componente *Authentication* para navegar a la sección correspondiente.
    <br />

2. Haz clic en la pestaña **Email Verification** y luego haz clic en **Edit** para comenzar a personalizar y editar el contenido del correo electrónico. Puedes incluir marcadores de posición para valores que se insertarán dinámicamente.
    <br />

Nota:

* Puedes personalizar el contenido del correo electrónico según tu preferencia.

* El contenido del marcador de posición (el contenido que se encuentra entre **%%**) se completará dinámicamente según los detalles del usuario.

* El marcador de posición %LINK% contendrá el enlace de redirección de la aplicación. La URL se genera automáticamente por Catalyst cuando alojas tu aplicación, y la página de redirección se puede especificar en un archivo de configuración de Catalyst de tu proyecto. También puedes proporcionar un enlace personalizado.

3. Realiza los cambios necesarios y haz clic en **Save**.
    <br />

4. Para personalizar los correos electrónicos de *Reset Password*, haz clic en la pestaña **Password Reset** y personaliza el contenido del correo electrónico de la misma manera que se indicó anteriormente.
    <br />

Las plantillas de correo electrónico ahora estarán configuradas. 

Nota:

* Puedes obtener más información sobre Email Templates en este documento de ayuda.

* Debido a que estamos usando Hosted Login para autenticar esta aplicación, el envío de estos correos electrónicos en las instancias requeridas será configurado automáticamente por Catalyst, por lo que no tienes que codificar la lógica para activar estos correos.

<br />


--------------------------------------------------------------------------------
title: "Inicializar el proyecto"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.645Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/init-project/"
service: "All Services"
related:
- Initialize CLI Resources (/es/cli/v1/initialize-resources/introduction)
- Project Directory Structure (/es/cli/v1/project-directory-structure/introduction)

--------------------------------------------------------------------------------


# Inicializar el proyecto desde la CLI

Ahora puedes comenzar a trabajar en tu proyecto de Catalyst desde la CLI. El primer paso es inicializar el proyecto en un directorio vacío. Este será el directorio principal de tu proyecto y todos los archivos del proyecto se guardarán en él.

Puedes obtener más información sobre esto en la página de ayuda de la estructura del directorio del proyecto. Puedes aprender sobre la inicialización de un proyecto en detalle en la documentación de ayuda de la CLI.

Para esta aplicación, inicializaremos una función Basic I/O, que contendrá la lógica para Custom User Validation, y una aplicación web Basic como componente del cliente.

Nota: Asegúrate de ingresar el nombre del paquete o nombre de clase de la función exactamente como se indica, porque el código de la aplicación contiene el mismo nombre.

1. Crea una carpeta para el proyecto en tu máquina local y navega hasta ella desde la terminal.

2. Inicializa un proyecto ejecutando el siguiente comando desde ese directorio:
catalyst init

3. Navega usando las **teclas de flecha**, selecciona tu portal preferido y presiona la tecla **Enter**. Si no tienes otras organizaciones asociadas a la cuenta, se seleccionará automáticamente la predeterminada.
    <br />
Nota: Puedes obtener más información sobre la funcionalidad de portal multi-org de Catalyst en este documento de ayuda.

4. La CLI ahora te pedirá que asocies un proyecto de Catalyst con el directorio. Asócialo con el proyecto que creamos anteriormente desde la consola. Selecciona **Authorization Portal** de la lista y presiona **Enter**.
    <br />

5. Navega usando las teclas de flecha y selecciona **Functions**, **Client** usando la barra espaciadora. Presiona **Enter** para inicializar.
    <br />

6. La CLI iniciará la configuración de la función. Selecciona **Basic IO** como el tipo de función para tu función de *Custom User Validation*.
    <br />

7. Selecciona el runtime más reciente de *Node.js* como el stack de la función.
    <br />

8. Ingresa "authorized_portal_function" como nombre del paquete, "index.js" como punto de entrada, y tu dirección de correo electrónico como autor, luego presiona **Enter**. Alternativamente, puedes presionar **Enter** sin ingresar valores para completar con los valores predeterminados. La CLI solicitará la inicialización de las dependencias de Node. Presiona **Y** para confirmar la instalación y presiona **Enter** para confirmar tu elección. Se instalarán los módulos de Node.
    <br />

La CLI ahora iniciará la configuración del cliente.




9. Selecciona **Basic web app** y presiona **Enter** para inicializar tu cliente como una aplicación web básica.
    <br />

10. Ingresa un nombre para tu paquete de cliente y presiona **Enter**. Para los fines de este tutorial, estamos nombrando nuestro paquete de cliente "ZylkerTechnologies". Puedes usar el mismo o proporcionar un nombre de tu preferencia.
    <br />

La inicialización de Catalyst ha finalizado.

El directorio del proyecto ahora está configurado con el directorio del cliente y el directorio de funciones junto con los archivos de configuración y dependencias. El directorio del proyecto también contiene el archivo de configuración catalyst.json y un archivo oculto .catalystrc.

La estructura del directorio de tu proyecto debería verse como se muestra a continuación:
<br />




9. Selecciona **React web app** y presiona **Enter** para inicializar tu cliente como una aplicación web React.
    <br />

10. Selecciona **JavaScript** como el tipo de aplicación React y presiona **Enter**.
    <br />

11. Ingresa "zylkertechnologies" como nombre de tu paquete de cliente y haz clic en **Enter**. También puedes proporcionar cualquier nombre de tu preferencia. Todos los paquetes de React necesarios, como "react", "react-dom" y "react-scripts", se instalarán a través del plugin de Catalyst para React (zcatalyst-cli-plugin-react).
    <br />
    El cliente ahora se ha inicializado correctamente como una aplicación web React.
    <br />

El directorio del cliente se creará con la estructura estándar en el directorio del proyecto.

Esta es la estructura del directorio del proyecto *Authorization Portal* si el cliente se inicializa como una aplicación React.
<br />

La inicialización de Catalyst ha finalizado.




9. Selecciona **Angular web app** y presiona **Enter** para inicializar tu cliente como una aplicación web Angular.
    <br />

10. Nombra tu aplicación Angular "ZylkerTechnologies" y presiona la tecla **Enter**. Dado que esta aplicación no requiere Angular Routing, ingresa "N" en el prompt. Finalmente, elige CSS como formato de hoja de estilos y presiona la tecla **Enter**.
    <br />

Catalyst inicializará el cliente usando el **plugin de Catalyst para Angular** (zcatalyst-cli-plugin-angular).

<br />

El cliente ahora se ha inicializado correctamente como una aplicación web Angular.

El directorio del proyecto ahora está configurado con el directorio del cliente y el directorio de funciones junto con los archivos de configuración y dependencias. El directorio del proyecto también contiene el archivo de configuración catalyst.json y un archivo oculto .catalystrc.

La estructura del directorio de tu proyecto debería verse como se muestra a continuación:

<br />



<br />


--------------------------------------------------------------------------------
title: "Configurar la función Basic I/O"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.646Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/configure-function/"
service: "All Services"
related:
- Basic I/O Functions (/es/serverless/help/functions/basic-io/)
- Functions Directory Structure (/es/cli/v1/project-directory-structure/functions-directory)

--------------------------------------------------------------------------------


# Configurar la función

Ahora comenzaremos a codificar la aplicación del portal de autorización configurando el componente de la función.

El directorio de la función (functions/authorization_portal_function) contiene:

* El archivo principal de la función index.js
* El archivo de configuración catalyst-config.json
* Módulos de Node
* Archivos de dependencias package.json y package-lock.json

Agregarás código en el archivo index.js.

La función Basic I/O contiene las siguientes funcionalidades:

* Los detalles del usuario final se proporcionarán como entrada JSON a la función de *Custom User Validation*.
* La función está codificada para implementar una lógica personalizada en base a la cual el usuario final será autenticado o denegado.
Nota: Para los fines de este tutorial, hemos codificado una lógica para la función de Custom User Validation donde si el proveedor de correo electrónico del usuario es diferente a Zylker Technology (@zylker.com), el usuario final no podrá registrarse en la aplicación. Puedes usar la misma o codificar una lógica de tu preferencia.

Ahora, comencemos a codificar la función Basic I/O.

Copia el código proporcionado a continuación y pégalo en el archivo index.js en el directorio functions/authorization_portal_function de tu proyecto, y guarda el archivo. Puedes usar cualquier IDE de tu preferencia para trabajar con los archivos de la aplicación.

Nota: Revisa el código en esta sección para asegurarte de que lo comprendes completamente.

const catalyst = require("zcatalyst-sdk-node");
module.exports = (context, basicIO) => {
  const catalystApp = catalyst.initialize(context);
  const requestDetails = catalystApp
    .userManagement()
    .getSignupValidationRequest(basicIO);
  if (requestDetails) {
    if (requestDetails.user_details.email_id.includes("@zylker.com")) {
      // Las acciones que ocurren en caso de una autenticación exitosa pueden personalizarse
      basicIO.write(
        JSON.stringify({
          status: "success",
          user_details: {
            first_name: requestDetails.user_details.first_name,
            last_name: requestDetails.user_details.last_name,
            email_id: requestDetails.user_details.email_id,
            role_identifier: "App User", // Si deseas sobrescribir el rol predeterminado, puedes especificar el id/nombre del rol aquí.
            org_id: "", // Si proporcionas el Org ID, asegúrate de copiarlo exactamente desde la consola.
          },
        })
      );
    } else {
      // El usuario no ha pasado la autenticación
      basicIO.write(
        JSON.stringify({
          status: "failure",
        })
      );
    }
  }
  context.close();
};


Nota: También puedes usar este SDK para codificar tu propia lógica personalizada en lugar de la implementada anteriormente.

El directorio de la función ahora está configurado. Podemos proceder a configurar el directorio del cliente.


--------------------------------------------------------------------------------
title: "Habilitar Custom User Validation"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.647Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/enable-custom-validation/"
service: "All Services"
related:
- Custom User Validation (/es/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)
- Whitelisting (/es/cloud-scale/help/authentication/whitelisting/introduction/)
- Catalyst Deploy Options (/es/cli/v1/deploy-resources/deploy-options/)

--------------------------------------------------------------------------------


# Habilitar Custom User Validation

Ahora que hemos codificado la lógica, habilitemos Custom User Validation. Para hacer esto, primero debes desplegar la función en la consola.

Ingresa este comando de la CLI para desplegar el componente de la función únicamente en la consola.
catalyst deploy --only functions

<br />

Se creará un endpoint de función para la función que te permitirá acceder a ella directamente. La función se desplegará en la consola.

Ahora, ve a la consola e implementa los siguientes pasos:

1. Navega a la sección *Whitelisting* en el componente *Authentication* y haz clic en el interruptor **Custom User Validation**.
<br />

2. Selecciona la función **Basic I/O** del menú desplegable en la ventana emergente.
<br />

3. Haz clic en **Configure**.
<br />

La función de *Custom User Validation* ha sido habilitada para el proyecto, y los usuarios finales que se registren en tu aplicación ahora serán autenticados adicionalmente usando esta función.

Nota: Puedes conocer todas las funcionalidades presentes en la sección Whitelisting en este documento de ayuda.

<br />


--------------------------------------------------------------------------------
title: "Configurar el cliente"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.647Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/configure-client/"
service: "All Services"
related:
- Client Directory Structure (/es/cli/v1/project-directory-structure/client-directory)

--------------------------------------------------------------------------------


# Configurar el cliente

Configuremos el componente del cliente.



El directorio del cliente contiene:
* El archivo index.html que contiene el código HTML para la aplicación frontend
* El archivo main.css que contiene el código CSS para la aplicación frontend
* El archivo main.js que contiene el código JavaScript
* El archivo de configuración client-package.json

Codificaremos en index.html y main.js. También realizaremos un cambio en client-package.json para asegurar que la página de inicio de la aplicación sea la página autenticada.

Discutiremos el código al final de esta sección.

Nota: Revisa el código proporcionado en esta sección para asegurarte de que lo comprendes completamente.

Copia el código a continuación y pégalo en los respectivos archivos ubicados en el directorio client/ de tu proyecto usando un IDE y guarda los archivos.

<!DOCTYPE html>
<html>
<head>
 <title>Profile Information</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
 <script src="main.js"></script>
 <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
 <script src="/__catalyst/sdk/init.js"></script>
 <style>
  .card {
   max-width: 500px;
   margin: auto;
   text-align: center;
   font-family: arial;
   background-color: #a5a4a4;
  }

  .title {
   font-size: 23px;
   color: black;
  }

  button {
   border: none;
   outline: 0;
   display: inline-block;
   padding: 8px;
   color: white;
   background-color: #000;
   text-align: center;
   cursor: pointer;
   width: 50%;
   font-size: 18px;
   border-radius: 8px;
  }

  a {
   text-decoration: none;
   font-size: 22px;
   color: black;
  }

  button:hover,
  a:hover {
   opacity: 0.7;
  }

  body{
   background-color:#a5a4a4;
   font-size: 20px;
   visibility: hidden;
  }
  p{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 10px;
   font-weight: bold;
  }
 </style>
</head>
<body onload="showProfile()">
 <h1 style="text-align:center">User Profile Information</h1>
 <div class="card">
  <img width="200px" height="450px" src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png" alt="John" style="width:80px;height: 80px;" >
  <p class="title" id="fname"></p>
  <p class="title" id="lname"></p>
  <p class="title"id="mailid" ></p>
  <p class="title"id="tzone" ></p>
  <p class="title"id="ctime" ></p>
  <p><button onclick="logout()">Logout</button></p>
 </div>
</body>
</html>


function showProfile() {
debugger;
    // El método catalyst.auth.isUserAuthenticated() permite solo a los usuarios autenticados, es decir, los usuarios que han iniciado sesión, acceder a las páginas
    // Puedes cargar este método en el body de tu página para permitir solo a usuarios autenticados acceder a una página en particular
    catalyst.auth.isUserAuthenticated().then(result => {

        // Si el usuario ha iniciado sesión, se mostrarán estos contenidos de la página al usuario
        document.body.style.visibility = "visible";
        const first_name = "First Name: " + result.content.first_name;
        document.getElementById("fname").innerHTML = first_name;
        const last_name = "Last Name: " + result.content.last_name;
        document.getElementById("lname").innerHTML = last_name;
        const mailid = "Email Address: " + result.content.email_id;
        document.getElementById("mailid").innerHTML = mailid;
        const tzone = "Time Zone: " + result.content.time_zone;
        document.getElementById("tzone").innerHTML = tzone;
        const created_time = " Joined On: " + result.content.created_time;
        document.getElementById("ctime").innerHTML = created_time;
    }).catch(err => {
        // Si el usuario no ha iniciado sesión, se mostrará esto al usuario y será redirigido a la página de inicio de sesión
        document.body.style.visibility = "visible";
        document.body.innerHTML = 'You are not logged in. Please log in to continue. Redirecting you to the login page..';
        setTimeout(function () {
           window.location.href = "/__catalyst/auth/login";
        }, 5000);
    });
}

function logout() {
    // El método signOut se usa para cerrar la sesión del usuario en la aplicación
    const redirectURL = location.protocol +"//"+ location.hostname + "/__catalyst/auth/login";
    catalyst.auth.signOut(redirectURL);
}



    {
        "name" : "ZylkerTechnologies",
        "version" : "0.0.1",
        "homepage" : "/__catalyst/auth/login", 
        "login_redirect" : "index.html"
    }

Nota: La URL de la página de inicio se puede copiar desde la Access URL generada por Catalyst en la sección Authentication Types de la consola.

El directorio del cliente ahora está configurado. 

Repasemos cómo funcionan la función y el código del cliente:

* El usuario final primero encontrará la **página de inicio de sesión** que configuraste y estilizaste en la consola.
* Para crear una cuenta, hará clic en la opción **Sign Up** y será dirigido a la página de *Sign Up*.

Nota: Los usuarios finales pueden registrarse en tu aplicación usando sus Social Logins o usar el método convencional de registro en la aplicación usando su correo electrónico.

* Una vez que se ingresen los datos y hagan clic en **Sign Up**, o si intentan registrarse usando un Social Login de su preferencia, sus detalles se proporcionarán como entrada JSON a la función de Custom User Validation (authorization_portal_function/index.js).

* La función solo autenticará a los usuarios si se cumple la condición que has codificado. Para este tutorial, los usuarios solo serán autenticados si se registraron en la aplicación usando una dirección de correo electrónico registrada de Zylker.

* Tras una autenticación exitosa, se enviará un correo de Email Verification a la cuenta que usaron para registrarse en la aplicación.

Nota: Dado que estamos usando Hosted Login, un tipo de autenticación nativa de Catalyst, no se requiere lógica adicional para activar los correos electrónicos apropiados. Catalyst lo gestionará automáticamente.

* Una vez que el usuario verifique su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección User Management del componente *Authentication*.

* El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.

* El usuario final también puede restablecer su contraseña haciendo clic en la opción **Forgot Password**. En este caso, se enviará el correo de *Password Reset* a su correo electrónico registrado. Siguiendo los pasos mencionados en el correo, puede restablecer fácilmente sus credenciales.




Configuremos el componente del cliente.

El directorio del cliente de la aplicación web React contiene los siguientes archivos:

- El directorio raíz del cliente contiene un archivo client-package.json, que es un archivo de configuración que define el nombre, versión, página de inicio predeterminada y página de redirección del componente del cliente.
- El directorio del cliente **zylkertechnologies** contiene dos subcarpetas, según la estructura de proyecto predeterminada de una aplicación React:
    - La carpeta public se utiliza generalmente para contener archivos que los navegadores pueden acceder abiertamente a través de URLs públicas, como archivos de iconos de la aplicación web, el archivo index.html y el archivo 404.html.
    - La carpeta src contiene los archivos fuente de la aplicación que se incluirán en la carpeta de compilación cuando compilemos la aplicación React.
    - El directorio del cliente también contiene el archivo de dependencias package.json y un archivo oculto .gitignore.
- Los archivos presentes en la carpeta **public** incluyen:
    - Archivos nativos de React como setup Tests.js, index.js, reportWebVitals.js, logo.svg y App.test.js.
    - **index.html** - Contiene el SDK web de Catalyst que te permite acceder a los componentes de Catalyst.
    - Crearemos un archivo adicional **404.html** que contendrá los elementos de manejo de errores.
- Los archivos presentes en la carpeta **src** incluyen:
    - Archivos nativos de React como setupTests.js, reportWebVitals.js, logo.svg y App.test.js.
    - **App.js** - Contiene las rutas hash de tu aplicación
    - **App.css** - Contiene los elementos de estilo generales de tu aplicación
    - **index.js** - El punto de entrada de la aplicación React.
    - **index.css** - Contiene el estilo de los elementos presentes en el archivo index.js.
    - Crearás los siguientes archivos en la carpeta src:
        - **Button.css** - Contiene los elementos de estilo para el botón *Logout* que estará presente en la aplicación.
        - **Button.js** - Contiene el componente React para el *Logout* presente en la aplicación.
        - **Layout.js** - Contiene el componente React para la lógica de la aplicación
        - **LoginPage.js** - Contiene el componente React para las páginas de inicio de sesión que generaste en la consola de Catalyst.
        - **UserProfile.css** - Contiene los elementos de estilo para la página de información del usuario que se mostrará una vez que inicies sesión en la aplicación.
        - **UserProfile.js** - Contiene el componente React para renderizar los detalles del usuario después de iniciar sesión.

Codificaremos en los archivos index.html, 404.html, App.js, App.css, index.css, index.js, Button.css, Button.js, Layout.js, LoginPage.js, UserProfile.css y UserProfile.js. También realizaremos un cambio en client-package.json para asegurar que la página de inicio de la aplicación sea la página autenticada.

Nota: Puedes eliminar los archivos nativos de React ya que no son necesarios para construir esta aplicación.

#### Instalar paquetes adicionales de React

El paquete react-router-dom necesita instalarse en el directorio del cliente AuthorizationPortal/zylkertechnologies usando el comando de la CLI que se indica a continuación:

npm install react-router-dom

Este comando instalará el módulo react-router-dom, guardará las dependencias y nos permitirá realizar el enrutamiento hash requerido en nuestra aplicación.

Este es el directorio del cliente después de haber creado los archivos necesarios y eliminado los archivos innecesarios.
<br />

Nota: Revisa todo el código proporcionado en esta sección para asegurarte de que lo comprendes completamente.

Copia el código proporcionado a continuación y pégalo en index.html y 404.html, respectivamente, ubicados en el directorio del cliente (zylkertechnologies/public/) usando un IDE y guarda el archivo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
    <script src="/__catalyst/sdk/init.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <h2>You are viewing this 404 page since you tried to access a page which does not exist.</h2>
  </head>
</html>


Copia el código proporcionado a continuación y pégalo en App.css, App.js, index.js, index.css, Button.css, Button.js, Layout.js, LoginPage.js, UserProfile.css y UserProfile.js, respectivamente, ubicados en el directorio del cliente (zylkertechnologies/src/) usando un IDE y guarda el archivo.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.inputs {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}
#root {
  background-color: #c0c0c0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 1;
}


import "./App.css";
import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
import Layout from "./Layout";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Layout />} />
        <Route path="" element={<Navigate to="/" replace />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </HashRouter>
  );
}

export default App;


body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #c0c0c0;
}


import React from "react";
import "./index.css";
import App from "./App";
import * as ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 20%;
  font-size: 18px;
  border-radius: 8px;
}

button:hover,
.forgetPassword-btn:hover,
a:hover {
  opacity: 0.7;
}
a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}


import { useCallback } from "react";
import "./Button.css";

function Button({ title }) {
  const logout = useCallback(() => {
    const redirectURL = "/__catalyst/auth/login";
    window.catalyst.auth.signOut(redirectURL);
  }, []);
  return (
    <div id="logoutbtn" style={{ textAlign: "inline-block" }}>
      <button onClick={logout} id="logout" style={{ display: "inline-block" }}>
        {title}
      </button>
    </div>
  );
}

export default Button;


import UserProfile from "./UserProfile";
import LoginPage from "./LoginPage.js";
import { useEffect, useState } from "react";

function Layout() {
  const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);
  const [isFetching, setIsFetching] = useState(true);
  const [userDetails, setUserDetails] = useState({
    firstName: "",
    lastName: "",
    mailid: "",
    timeZone: "",
    createdTime: "",
  });

  useEffect(() => {
    window.catalyst.auth
      .isUserAuthenticated()
      .then((result) => {
        let userDetails = {
          firstName: result.content.first_name,
          lastName: result.content.last_name,
          mailid: result.content.email_id,
          timeZone: result.content.time_zone,
          createdTime: result.content.created_time,
        };
        setUserDetails(userDetails);
        setIsUserAuthenticated(true);
      })
      .catch((err) => {})
      .finally(() => {
        setIsFetching(false);
      });
  }, []);
  return (
    <>
      {isFetching ? (
        <p>Loading ....</p>
      ) : isUserAuthenticated ? (
        <UserProfile userDetails={userDetails} />
      ) : (
        <LoginPage />
      )}
    </>
  );
}

export default Layout;


import { useEffect } from "react";

function Login() {
  useEffect(() => {
    window.location.href = window.origin + "/__catalyst/auth/login";
  }, []);
  return null;
}

export default Login;


.card {
  margin: auto;
  text-align: center;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}

.title {
  font-size: 23px;
  color: black;
}
#userimg {
  height: 20%;
  width: 15%;
}

div.login {
  padding-top: 10px;
  height: 260px;
  width: 500px;
  margin: 0 auto;
}

div.signup {
  display: none;
}

div.forgotpwd {
  display: none;
}

/* Full-width input fields */
input[type="text"] {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}

/* Add a background color when the inputs get focus */
input[type="text"]:focus,
input[type="password"]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for all buttons */

/* Float cancel and signup buttons and add an equal width */
.seperatebtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

.signupbtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

.signupfnbtn {
  width: 20%;
  padding: 8px;
  border-radius: 8px;
}

.pwdfnbtn {
  width: 40%;
  padding: 8px;
  border-radius: 8px;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #474e5d;
}

/* Modal Content/Box */
.modal-content {
  background-color: #c0c0c0;
  margin: 5% auto 15% auto;
  /* 5% from the top, 15% from the bottom and centered */
  width: 25%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

p.homepage {
  font-size: 23px;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 100px) {
  .signupbtn {
    width: 100%;
  }
}


import Button from "./Button";
import "./UserProfile.css";
function UserProfile({ userDetails }) {
  return (
    <div className="card">
      <br> </br>
      <h1 className="title">User Profile Information</h1>
      <img
        alt="usericon"
        id="userimg"
        width="200px"
        height="450px"
        src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
      />
      <p className="title">First Name : {userDetails.firstName}</p>
      <p className="title">Last Name: {userDetails.lastName}</p>
      <p className="title">Email Address: {userDetails.mailid}</p>
      <p className="title">Time Zone: {userDetails.timeZone}</p>
      <p className="title">Joined On: {userDetails.createdTime}</p>
      <Button title="Logout"> </Button>
    </div>
  );
}
export default UserProfile;



    {
        "name": "zylkertechnologies",
        "version": "0.0.1",
        "homepage": "/__catalyst/auth/login",
        "login_redirect": "index.html"
    }


Nota: La URL de la página de inicio se puede copiar desde la Access URL generada por Catalyst en la sección Authentication Types de la consola.

El directorio del cliente ahora está configurado.

Repasemos el funcionamiento de la función y el código del cliente:

* El usuario final primero encontrará la *página de inicio de sesión* que configuraste y estilizaste en la consola.
* Para crear una cuenta, hará clic en la opción **Sign Up** y será dirigido a la página de *Sign Up*.

Nota: Los usuarios finales pueden registrarse en tu aplicación usando sus Social Logins o usar el método convencional de registro en la aplicación usando su correo electrónico.

* Una vez que se ingresen los datos y hagan clic en **Sign Up**, o si intentan registrarse usando un Social Login de su preferencia, sus detalles se proporcionarán como entrada JSON a la función de Custom User Validation (authorization_portal_function/index.js).

* La función solo autenticará a los usuarios si se cumple la condición que has codificado. Para este tutorial, los usuarios solo serán autenticados si se registraron en la aplicación usando una dirección de correo electrónico registrada de Zylker.

* Tras una autenticación exitosa, se enviará un correo de Email Verification a la cuenta que usaron para registrarse en la aplicación.

Nota: Dado que estamos usando Hosted Login, un tipo de autenticación nativa de Catalyst, no se requiere lógica adicional para activar los correos electrónicos apropiados. Catalyst lo gestionará automáticamente.

* Una vez que el usuario verifique su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección User Management del componente *Authentication*.

* El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.

* El usuario final también puede restablecer su contraseña haciendo clic en la opción **Forgot Password**. En este caso, se enviará el correo de *Password Reset* a su correo electrónico registrado. Siguiendo los pasos mencionados en el correo, puede restablecer fácilmente sus credenciales.




Configuremos el componente del cliente.

El directorio del cliente de la aplicación web Angular contiene: 

* El directorio raíz del cliente contiene un archivo client-package.json, que es un archivo de configuración que define el nombre, versión, página de inicio predeterminada y página de redirección del componente del cliente. Modificaremos este archivo después de haber codificado el componente del cliente.
* Archivos nativos de Angular como angular.json, tsconfig.app.json, tsconfig.json y tsconfig.spec.json.
* El directorio raíz del cliente también contiene el archivo de dependencias package.json y un archivo .gitignore.
* La carpeta **src** contiene los siguientes archivos y directorios según la estructura de proyecto predeterminada de la aplicación Angular:
  - Archivos nativos de Angular como favicon.ico, main.ts, polyfills.ts y test.ts junto con los directorios assets y environment.
  - **index.html**: El punto de entrada predeterminado de la aplicación.
  - **style.css**: Contendrá cualquier elemento de estilo requerido por la aplicación general.
* Los archivos presentes en el directorio **src/app/** son:
  - Archivos nativos de Angular como app.component.css y app.component.spec.ts.
  - app.component.html: Contiene el componente HTML que renderiza el enrutamiento que ocurre en la aplicación.
  - app.component.ts: Contiene la interfaz global de la aplicación donde se declara una variable de Catalyst para usar los métodos del SDK web de Catalyst.
  - app.module.ts: Contiene la lógica de enrutamiento involucrada en la aplicación

Codificaremos en los archivos index.html, app.component.html, app.component.ts y app.module.ts.

#### Crear un componente Layout

Necesitas crear un componente layout en la ruta del directorio src/app/. Este componente contendrá los elementos de estilo, la lógica del cliente y la lógica de redirección para proporcionar respuestas apropiadas a los usuarios autenticados y no autenticados.

Ejecuta el siguiente comando en el directorio src/app/ usando la CLI de Catalyst:

ng generate component layout

<br />

Esto creará una carpeta llamada layout en el directorio src/app/. 

Esta carpeta layout contendrá:
* Un archivo nativo de Angular llamado layout.component.pec.ts.
* layout.component.html: Contendrá el componente HTML requerido durante la validación de usuario.
* layout.component.css: Contendrá los elementos de estilo requeridos.
* layout.component.ts: Contendrá la lógica de enrutamiento y redirección.

Codificaremos en los archivos layout.component.html, layout.component.css y layout.component.ts.

#### Crear un componente Login

Necesitas crear un componente login en la ruta del directorio src/app/. Este componente contendrá la lógica de redirección para proporcionar respuestas apropiadas a los usuarios autenticados y no autenticados.

Ejecuta el siguiente comando en el directorio src/app/ usando la CLI de Catalyst:

ng generate component login

<br />

Esto creará una carpeta llamada login en el directorio src/app/. 

Esta carpeta login contendrá:
* Un archivo nativo de Angular llamado login.component.pec.ts.
* login.component.html: Contendrá el componente HTML requerido durante la validación de usuario.
* login.component.css: Contendrá los elementos de estilo requeridos.
* login.component.ts: Contendrá la lógica de enrutamiento y redirección.

Codificaremos en los archivos login.component.css y login.component.ts.

El directorio del cliente debería verse ahora como el que se muestra en la siguiente imagen.
<br />

Ahora puedes comenzar a codificar tu cliente.

Nota: Revisa el código proporcionado en esta sección para asegurarte de que lo comprendes completamente.

Copia el código a continuación y pégalo en el archivo index.html presente en el directorio src/.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Zylker Technologies</title>
    <base href="/app/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
    <script src="/__catalyst/sdk/init.js"> </script>
  </head>
  <body>
    <app-root> </app-root>
  </body>
</html>


Pega el siguiente código en los archivos app.component.html, app.component.ts y app.module.ts presentes en el directorio src/app/.


<router-outlet> </router-outlet>



import { Component } from '@angular/core';

declare global {
  interface Window {
    catalyst: any;     // Esta es una variable de Catalyst que se requiere para acceder a los métodos del SDK web de Catalyst.
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

}


Nota: La variable any es una variable de Catalyst que hemos declarado globalmente. Esta variable es necesaria para acceder a los métodos del SDK web de Catalyst.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
import { LoginComponent } from './login/login.component';

const approutes: Routes = [
  { path: '', component: LayoutComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' },
];

@NgModule({
  declarations: [AppComponent, LayoutComponent, LoginComponent],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    RouterModule.forRoot(approutes, { useHash: true }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


Copia el siguiente código y pégalo en los archivos layout.component.html, layout.component.css y layout.component.ts presentes en el directorio src/app/layout.


<div class="card" *ngIf="isAuthenticated">
  <div class="titleDiv">
    <h1 class="title">User Profile Information</h1>
  </div>
  <div class="imgDiv">
    <img
      id="userimg"
      width="200px"
      height="450px"
      src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
    />
  </div>
  <div class="textDiv">
    <p class="title" id="fname">First Name: {{ firstName }}</p>
    <p class="title" id="lname">Last Name: {{ lastName }}</p>
    <p class="title" id="mailid">Email ID: {{ mailID }}</p>
    <p class="title" id="tzone">Time Zone: {{ timezone }}</p>
    <p class="title" id="ctime">CreatedTime: {{ createdTime }}</p>
  </div>
  <div className="logoutDiv">
    <button (click)="logout()" id="logoutBtn">Logout</button>
  </div>
</div>

<div *ngIf="isFetching" class="loading-div">
  <p class="loading">Loading...</p>
</div>



.card {
  margin: auto;
  text-align: center;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}
.title {
  font-size: 23px;
  color: black;
  margin-top: 30px;
  margin-bottom: 30px;
  font-weight: bold;
}
#userimg {
  height: 20%;
  width: 15%;
}

#logoutBtn {
  background-color: rgb(2, 136, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}

#logoutBtn:hover {
  background-color: rgb(2, 165, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}

body {
  width: 100%;
}

.loading-div {
  margin-left: 45%;
}

.loading {
  font-weight: bolder;
  font-size: large;
}

#logoutBtn:active {
  background-color: rgb(2, 172, 2);
  color: white;
  border: none;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  margin-bottom: 30px;
  cursor: pointer;
}



import { Component, OnInit } from '@angular/core'; // decorador que indica que esto es un componente
import { Router } from '@angular/router';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css'],
})
export class LayoutComponent implements OnInit {
  constructor(private router: Router) {}

  firstName: any;
  lastName: any;
  mailID: any;
  timezone: any;
  createdTime: any;
  isAuthenticated: boolean = false;
  isFetching: boolean = true;

  ngOnInit(): void {
    window.catalyst.auth
      .isUserAuthenticated()
      .then((result: any) => {
        console.log(result);
        console.log(result.content.email_id);
        this.isAuthenticated = true;
        this.mailID = result.content.email_id;
        this.firstName = result.content.first_name;
        this.lastName = result.content.last_name;
        this.timezone = result.content.time_zone;
        this.createdTime = result.content.created_time;
      })

      .catch((err: any) => {
        console.log(err);
      })
      .finally(() => {
        console.log('finally');
        this.isFetching = false;

        this.isAuthenticated
          ? this.router.navigate([''])
          : this.router.navigate(['login']);
      });
  }

  logout() {
    const redirectURL = '/__catalyst/auth/login';
    console.log(redirectURL);

    var auth = window.catalyst.auth;
    auth.signOut(redirectURL);
  }
}


Copia el siguiente código y pégalo en los archivos login.component.css y login.component.ts presentes en el directorio src/app/login. 


h1 {
 color: red;
}




import { Component, OnInit } from '@angular/core'; // decorador que indica que esto es un componente

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css'],
})
export class LoginComponent {
 ngOnInit(): void {
 window.location.href = window.origin + '/__catalyst/auth/login'; // Gestionará las redirecciones de inicio de sesión 
 }
}


Ahora modificaremos el archivo client-package.json presente en el directorio raíz del cliente.


    {
        "name": "zylkertechnologies",
        "version": "0.0.1",
        "homepage": "/__catalyst/auth/login",
        "login_redirect": "index.html"
    }

Nota: La URL de la página de inicio se puede copiar desde la Access URL generada por Catalyst en la sección Authentication Types de la consola.

El directorio del cliente ahora está configurado.

Repasemos el funcionamiento de la función y el código del cliente.

* El usuario final primero encontrará la página de inicio de sesión que configuraste y estilizaste en la consola.

* Para crear una cuenta, hará clic en la opción Sign Up y será dirigido a la página de Sign Up.

Nota: Los usuarios finales pueden registrarse en tu aplicación usando los Social Logins o usar el método convencional de registro en la aplicación usando su dirección de correo electrónico.

* Después de ingresar la información y hacer clic en **Sign Up**, o si intentan registrarse usando un *Social Login* de su preferencia, sus detalles se completarán y proporcionarán como entrada JSON a la función de Custom User Validation: authorization_portal_function/index.js. 

* La función solo autenticará a los usuarios que se hayan registrado en la aplicación usando una dirección de correo electrónico de Zylker.

* Tras una autenticación exitosa, se enviará un correo de *Email Verification* a la cuenta que usaron para registrarse en la aplicación.

Nota: Dado que estamos usando Hosted Login, no se requiere lógica adicional para activar los correos electrónicos apropiados. Catalyst lo gestionará automáticamente.

* Después de que el usuario verifique su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus detalles se pueden ver en la sección *User Management* del componente Authentication.

* El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.

* El usuario final también puede restablecer su contraseña haciendo clic en la opción **Forgot Password**.

* En este caso, se enviará el correo de *Password Reset* a su correo electrónico registrado. Siguiendo los pasos mencionados en el correo, puede restablecer fácilmente sus credenciales.


<br />


--------------------------------------------------------------------------------
title: "Probar la aplicación"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.653Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/test-app/"
service: "All Services"
related:
- Serve CLI Resources (/es/cli/v1/serve-resources/introduction)

--------------------------------------------------------------------------------


# Probar la aplicación

Antes de desplegar la aplicación en la consola remota, puedes probar la aplicación en un servidor local y verificar que todo funcione usando la CLI de Catalyst. Para obtener información detallada sobre catalyst serve, consulta la página de ayuda de Serve Resources.

Para servir el proyecto de Catalyst localmente, ejecuta el siguiente comando desde el directorio de tu proyecto:

catalyst serve

La aplicación del portal de autorización ahora se servirá en el puerto 3000 predeterminado. Las URLs de los endpoints locales de los componentes se mostrarán en la CLI.




<br />

Nota: Cada vez que accedas a la página de inicio o a cualquiera de las subpáginas de tu cliente, o a la función, la CLI mostrará un registro en vivo de la URL accedida, junto con el método HTTP que se utiliza para acceder a ella.

Ahora puedes abrir la URL local del componente del cliente en un navegador para acceder a la aplicación.
<br />

### Caso de prueba 1

#### Registrarse usando dirección de correo electrónico

1. Haz clic en **Sign Up** para crear una nueva cuenta.
<br />

2. Ingresa los datos requeridos y haz clic en **Sign Up**.
<br />

3. Se enviará el correo de Email Verification a la dirección de correo electrónico que usaste para registrarte.
<br />

4. Haz clic en el enlace del correo electrónico.
<br />

5. Sigue las instrucciones y establece tu contraseña.
<br />

Una vez establecida la contraseña, iniciarás sesión en la aplicación.
<br />

Puedes verificar esto viendo la información del usuario en la sección User Management del componente *Authentication* en la consola.
<br />

### Caso de prueba 2

#### Probar Custom User Validation

1. Regístrate en la aplicación usando una dirección de correo electrónico que provoque una instancia de fallo.
<br />

Nota: Para los fines de este tutorial, hemos codificado una lógica para la función de Custom User Validation donde si el proveedor de correo electrónico del usuario es diferente a Zylker Technology (@zylker.com), el usuario final no podrá registrarse en la aplicación.

2. No podrás registrarte en la aplicación usando una dirección de correo electrónico diferente a la codificada para permitir en la lógica de la función.
<br />

### Caso de prueba 3

#### Registrarse en la aplicación usando Social Logins

1. Puedes hacer clic en un inicio de sesión social que hayas configurado para comenzar el proceso de registro. Para esta prueba, nos registramos usando el inicio de sesión social de Zoho.
<br />

2. Haz clic en **Accept**.
<br />

Iniciarás sesión en la aplicación.
<br />

Puedes verificar que el usuario final ha sido agregado viendo sus detalles en la sección *User Management* del componente Authentication en la consola.

### Caso de prueba 4

#### Funcionalidad de restablecimiento de contraseña

1. Haz clic en la opción **Forgot Password**.
<br />

2. Ingresa la dirección de correo electrónico.
<br />

3. Ingresa el captcha.
<br />

4. Aún puedes desbloquear una opción si recuerdas alguna contraseña anterior que hayas usado para crear esta cuenta. Sin embargo, para probar esta funcionalidad, haz clic en **Continue to reset password**.
<br />

5. Haz clic en **SEND OTP** para enviar la OTP a tu dirección de correo electrónico.
<br />

6. Ingresa la OTP recibida en tu correo electrónico y haz clic en **Verify**.
<br />

7. Ahora puedes crear tu nueva contraseña y hacer clic en **Change Password**.
<br />

Serás redirigido a la página de inicio de sesión, donde puedes iniciar sesión en la aplicación usando la nueva contraseña.




<br />

Nota: Cada vez que accedas a la página de inicio o a cualquiera de las subpáginas de tu cliente, o a la función, la CLI mostrará un registro en vivo de la URL accedida, junto con el método HTTP que se utiliza para acceder a ella.

Ahora puedes abrir la URL local del componente del cliente en un navegador para acceder a la aplicación.
<br />

### Caso de prueba 1

#### Registrarse usando dirección de correo electrónico

1. Haz clic en **Sign Up** para crear una nueva cuenta.
<br />

2. Ingresa los datos requeridos y haz clic en **Sign Up**.
<br />

3. Se enviará el correo de Email Verification a la dirección de correo electrónico que usaste para registrarte.
<br />

4. Haz clic en el enlace del correo electrónico.
<br />

5. Sigue las instrucciones y establece tu contraseña.
<br />

Una vez establecida la contraseña, iniciarás sesión en la aplicación.
<br />

Puedes verificar esto viendo la información del usuario en la sección User Management del componente *Authentication* en la consola.
<br />

### Caso de prueba 2

#### Probar Custom User Validation

1. Regístrate en la aplicación usando una dirección de correo electrónico que provoque una instancia de fallo.
<br />

Nota: Para los fines de este tutorial, hemos codificado una lógica para la función de Custom User Validation donde si el proveedor de correo electrónico del usuario es diferente a Zylker Technology (@zylker.com), el usuario final no podrá registrarse en la aplicación.

2. No podrás registrarte en la aplicación usando una dirección de correo electrónico diferente a la codificada para permitir en la lógica de la función.
<br />

### Caso de prueba 3

#### Registrarse en la aplicación usando Social Logins

1. Puedes hacer clic en un inicio de sesión social que hayas configurado para comenzar el proceso de registro. Para esta prueba, nos registramos usando el inicio de sesión social de Zoho.
<br />

2. Haz clic en **Accept**.
<br />

Iniciarás sesión en la aplicación.
<br />

Puedes verificar que el usuario final ha sido agregado viendo sus detalles en la sección *User Management* del componente Authentication en la consola.

### Caso de prueba 4

#### Funcionalidad de restablecimiento de contraseña

1. Haz clic en la opción **Forgot Password**.
<br />

2. Ingresa la dirección de correo electrónico.
<br />

3. Ingresa el captcha.
<br />

4. Aún puedes desbloquear una opción si recuerdas alguna contraseña anterior que hayas usado para crear esta cuenta. Sin embargo, para probar esta funcionalidad, haz clic en **Continue to reset password**.
<br />

5. Haz clic en **SEND OTP** para enviar la OTP a tu dirección de correo electrónico.
<br />

6. Ingresa la OTP recibida en tu correo electrónico y haz clic en **Verify**.
<br />

7. Ahora puedes crear tu nueva contraseña y hacer clic en **Change Password**.
<br />

Serás redirigido a la página de inicio de sesión, donde puedes iniciar sesión en la aplicación usando la nueva contraseña.




<br />

Cada vez que accedas a la página de inicio o a cualquiera de las subpáginas de tu cliente, o a la función, la CLI mostrará un registro en vivo de la URL accedida, junto con el método HTTP que se utiliza para acceder a ella.

<br />

Ahora puedes abrir la URL local del componente del cliente en un navegador para acceder a la aplicación.

### Caso de prueba 1

#### Registrarse usando dirección de correo electrónico

1. Haz clic en **Sign Up** para crear una nueva cuenta.
<br />

2. Ingresa los datos requeridos y haz clic en **Sign Up**.
<br />

3. Se enviará el correo de Email Verification a la dirección de correo electrónico que usaste para registrarte.
<br />

4. Haz clic en el enlace del correo electrónico.
<br />

5. Sigue las instrucciones y establece tu contraseña.
<br />

Una vez establecida la contraseña, iniciarás sesión en la aplicación.
<br />

Puedes verificar esto viendo la información del usuario en la sección User Management del componente *Authentication* en la consola.
<br />

### Caso de prueba 2

#### Probar Custom User Validation

1. Regístrate en la aplicación usando una dirección de correo electrónico que provoque una instancia de fallo.
<br />

Nota: Para los fines de este tutorial, hemos codificado una lógica para la función de Custom User Validation donde si el proveedor de correo electrónico del usuario es diferente a Zylker Technology (@zylker.com), el usuario final no podrá registrarse en la aplicación.

2. No podrás registrarte en la aplicación usando una dirección de correo electrónico diferente a la codificada para permitir en la lógica de la función.
<br />

### Caso de prueba 3

#### Registrarse en la aplicación usando Social Logins

1. Puedes hacer clic en un inicio de sesión social que hayas configurado para comenzar el proceso de registro. Para esta prueba, nos registramos usando el inicio de sesión social de Zoho.
<br />

2. Haz clic en **Accept**.
<br />

Iniciarás sesión en la aplicación.
<br />

Puedes verificar que el usuario final ha sido agregado viendo sus detalles en la sección *User Management* del componente Authentication en la consola.

### Caso de prueba 4

#### Funcionalidad de restablecimiento de contraseña

1. Haz clic en la opción **Forgot Password**.
<br />

2. Ingresa la dirección de correo electrónico.
<br />

3. Ingresa el captcha.
<br />

4. Aún puedes desbloquear una opción si recuerdas alguna contraseña anterior que hayas usado para crear esta cuenta. Sin embargo, para probar esta funcionalidad, haz clic en **Continue to reset password**.
<br />

5. Haz clic en **SEND OTP** para enviar la OTP a tu dirección de correo electrónico.
<br />

6. Ingresa la OTP recibida en tu correo electrónico y haz clic en **Verify**.
<br />

7. Ahora puedes crear tu nueva contraseña y hacer clic en **Change Password**.
<br />

Serás redirigido a la página de inicio de sesión, donde puedes iniciar sesión en la aplicación usando la nueva contraseña.





--------------------------------------------------------------------------------
title: "Desplegar la aplicación"
description: "Crea una aplicación sencilla Basic o React utilizando las funcionalidades de Catalyst Hosted Authentication que proporciona registro de usuarios, inicio de sesión, restablecimiento de contraseña e implementa el inicio de sesión mediante proveedores de identidad federados populares."
last_updated: "2026-10-08T06:48:03.658Z"
source: "https://docs.catalyst.zoho.com/es/tutorials/hosted-login-app/nodejs/deploy-app/"
service: "All Services"
related:
- Deploy CLI Resources (/es/cli/v1/deploy-resources/introduction/)
- Web Client Hosting (/es/cloud-scale/help/web-client-hosting/introduction)

--------------------------------------------------------------------------------


# Desplegar la aplicación

Para desplegar tu proyecto de Catalyst desde la CLI, ejecuta el siguiente comando en tu terminal desde el directorio de tu proyecto:

catalyst deploy

La función se despliega primero, seguida del componente del cliente. Las URLs de los endpoints de los componentes se mostrarán en la CLI:




<br />

Nota También puedes usar el comando de la CLI catalyst deploy --only client para desplegar solo el componente del cliente, ya que el componente de la función ya fue desplegado.

Ahora puedes abrir la URL del componente del cliente en un navegador para acceder a la aplicación desplegada. La aplicación del portal de autorización ahora puede accederse desde su URL de la aplicación web.
<br />

La aplicación del portal de autorización ahora es funcional y debería funcionar sin errores.




<br />

Nota También puedes usar el comando de la CLI catalyst deploy --only client para desplegar solo el componente del cliente, ya que el componente de la función ya fue desplegado.

Ahora puedes abrir la URL del componente del cliente en un navegador para acceder a la aplicación desplegada. La aplicación del portal de autorización ahora puede accederse desde su URL de la aplicación web.
<br />

La aplicación del portal de autorización ahora es funcional y debería funcionar sin errores.



La función se despliega primero, seguida del componente del cliente. Las URLs de los endpoints de los componentes se mostrarán en la CLI:
<br />

Nota: También puedes usar el comando de la CLI catalyst deploy --only client para desplegar solo el componente del cliente, ya que el componente de la función ya fue desplegado.

Ahora puedes abrir la URL del componente del cliente en un navegador para acceder a la aplicación desplegada. La aplicación del portal de autorización ahora puede accederse desde su URL de la aplicación web.

<br />

La aplicación del portal de autorización ahora es funcional y debería funcionar sin errores.




<br />