Nodos y componentes

Conozca los nodos de formularios y los componentes disponibles.

Forms le permite agregar nodos y componentes, como campos, bloques y widgets, para que sus usuarios interactúen con el formulario. Después, puede hacer referencia a los datos introducidos en los componentes dentro de sus formularios y flujos.

​

Nodos de formulario

Hay cinco tipos de nodos de formulario: Inicio, Paso, Flujo, Enrutador y pantalla de finalización. Estos nodos cumplen una función muy específica dentro de la estructura del formulario.

​

Nodo de paso

Los nodos de paso son la representación visual del formulario. Pueden contener cualquier cantidad de componentes, como campos, bloques y widgets, en los que el usuario puede introducir sus datos.

​

Componentes de campo

Los campos son componentes de la interfaz de usuario donde los usuarios introducen su información en Forms.

​

Configuración de campos

Los campos tienen una serie de ajustes predeterminados que puede configurar para adaptarlos a sus necesidades.

Los ajustes predeterminados de los campos son:

Configuración	Descripción
ID	El id único
Etiqueta	Mostrar u ocultar una etiqueta
Obligatorio	El valor de entrada es obligatorio
Texto de ayuda	Mostrar un texto de ayuda
Texto de marcador de posición	Texto visible para el usuario
Valor predeterminado	Valor predeterminado visible para el usuario
Transitorio	Habilitar o deshabilitar la máscara de datos

​

Reglas de validación de campos

Configuración	Descripción
Longitud mín. / Longitud máx.	Define la longitud mínima o máxima del valor de entrada.
Valor mín. / Valor máx.	Define el valor numérico mínimo o máximo.

​

Campos disponibles en Forms

Los campos disponibles, con su configuración específica y sus tipos de salida de datos, son:

Campo de texto

La entrada estándar permite que un usuario introduzca cualquier valor de tipo cadena.

Configuración del campo de texto

La configuración del campo de texto es:

Configuración	Descripción
Multiline	Habilita la entrada de texto en varias líneas.

Valor de salida del campo de texto

El tipo de datos del valor de salida del campo de texto es string.

{
  "text_field_id": "Auth0"
}

Campo de correo electrónico

La entrada estándar permite que un usuario introduzca valores de correo electrónico en formato de cadena.

Valor de salida del campo de correo electrónico

El tipo de datos del valor de salida del campo de correo electrónico es string.

{
  "email_field_id": "[e-mail]"
}

Campo de teléfono

La entrada estándar permite a un usuario introducir números de teléfono.

Configuración del campo de teléfono

La configuración del campo de teléfono es la siguiente:

Configuración	Descripción
Selector de país	Habilite o deshabilite el selector de país. De forma predeterminada, muestra la ubicación del usuario según su IP.
Texto del marcador de posición del filtro	Texto visible para el usuario en la ventana de búsqueda de país.

Valor de salida del campo de teléfono

El tipo de dato del valor de salida del campo de teléfono es string o, si el selector de país está habilitado, un object.

El valor de salida del campo de teléfono como string:

{
  "phone_field_id": "8005550175"
}

El valor del tipo de dato de salida del campo teléfono es un object :

{
  "phone_field_id": {
    "national_number": "8005550175",
    "national_format": "[phone]",
    "international_number": "[phone]",
    "international_format": "[phone]",
    "country_code_iso": "US",
    "country_code_number": "1"
  }
}

Campo de opciones

Campo estándar que permite a un usuario seleccionar valores de opción única o múltiple.

Configuración del campo Choice

La configuración del campo Choice es la siguiente:

Configuración	Descripción
Opción múltiple	Permite seleccionar varias opciones.
Otra opción	Permite que los usuarios introduzcan su propia opción.
Advanced > Valores internos	Asigna un valor interno a cada opción.
Advanced > Edición masiva	Edita en bloque las etiquetas y los valores internos de las opciones.

Valor de salida del campo Choice

El tipo de datos del valor de salida del campo Choice es string o, si la opción múltiple está habilitada, array of strings .

El valor de salida del campo Choice con tipo de datos string:

{
  "choice_field_id": "Option A"
}

El valor del tipo de datos de salida del campo de selección es un array of strings:

{
  "choice_field_id": ["Option A", "Option B"]
}

Campo de tarjetas

Campo estándar que permite a un usuario seleccionar imágenes de opción única o múltiple.

Configuración del campo de tarjetas

La configuración del campo de tarjetas es la siguiente:

Configuración	Descripción
Selección múltiple	Permite seleccionar varias opciones.
Ocultar etiquetas	Oculta las etiquetas de las tarjetas.
Avanzado > Valores internos	Asigna un valor interno a cada opción.

Valor de salida del campo de tarjetas

El tipo de datos del valor de salida del campo de tarjetas es string o, si la selección múltiple está habilitada, un array of strings.

El valor de salida del campo de tarjetas como string:

{
  "card_field_id": "Option A"
}

El campo cards devuelve un valor del tipo de datos array of strings:

{
  "card_field_id": ["Option A", "Option B"]
}

Campo URL

La entrada estándar permite que un usuario introduzca una URL.

Valor de salida del campo URL

El tipo de datos del valor de salida del campo URL es una cadena:

{
  "url_field_id": "https://auth0.com"
}

Campo de contraseña

Campo de entrada estándar que permite a un usuario introducir una contraseña o un valor secreto.

Configuración del campo de contraseña

La configuración del campo de contraseña es la siguiente:

Configuración	Descripción
Requerir contraseña compleja	Las contraseñas deben contener una letra mayúscula, una letra minúscula, un símbolo y un número.
Aplicar las directrices de NIST	La contraseña no puede tener menos de 8 caracteres ni incluir contraseñas obtenidas de filtraciones de datos anteriores, palabras del diccionario, caracteres repetidos o secuenciales, ni palabras específicas del contenido.
Añadir medidor de seguridad	Se muestra un medidor gráfico con una escala roja, amarilla y verde debajo del campo de contraseña para indicar la solidez de la contraseña introducida.
Hash	Seleccione un algoritmo para aplicar una función hash al valor introducido directamente en el navegador.

Valor de salida del campo de contraseña

El tipo de datos del valor de salida del campo de contraseña es un string enmascarado:

{
  "password_field_id": "███"
}

Campo de pago

Campo estándar que permite a un usuario introducir información de pago mediante un proveedor de pagos. Los pagos se procesan antes del nodo Ending.

Configuración del campo de pago

Los ajustes del campo de pago son los siguientes:

Configuración	Descripción
Tipo de pago	Seleccione pagos únicos (Charge) o recurrentes (Subscription).
Importe	Especifique el importe para un pago único (Charge).
Moneda	Especifique la moneda para un pago único (Charge).
Acción de suscripción	Seleccione si desea crear o actualizar una suscripción existente.
Acción del cliente	Seleccione si desea crear o actualizar un cliente existente.
Opciones de visualización	Muestre y edite las etiquetas de Número de tarjeta, Fecha de vencimiento y Código de seguridad, así como los sellos de confianza.

Valor de salida del campo de pago

El tipo de dato del valor de salida del campo de pago es una cadena o un objeto para los flujos posteriores al envío.

El tipo de dato del valor de salida del campo de pago como string:

{
  "payment_field_id": "pm_1P19e..."
}

El tipo de dato del valor de salida del campo de pago para suscripciones en forma de object :

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "price_ids": [
      "price_1ONHR..."
    ],
    "subscription_id": "sub_1P1A...",
    "payment_intent_id": "pi_3P19e5..."
  }
}

El tipo de dato del valor de salida del campo de pago para charge como object :

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "amount": 100,
    "payment_intent_id": "pi_3P19e5..."
  }
}

Campo de aviso legal

Campo estándar que añade texto legal y una casilla de verificación.

Valor de salida del campo legal

El tipo de datos del valor de salida del campo legal es boolean.

{
  "legal_field_id": true
}

Campo de lista desplegable

Campo estándar que permite a un usuario seleccionar uno o varios valores de una lista desplegable.

Configuración del campo de lista desplegable

Los ajustes del campo de lista desplegable son:

Ajustes	Descripción
Selector múltiple	Habilita la selección de varias opciones.
Avanzado > Valores internos	Asigna un valor interno a cada opción.
Avanzado > Edición masiva	Edita en masa la etiqueta y los valores internos.

Valor de salida del campo de lista desplegable

El tipo de datos del valor de salida del campo de lista desplegable es string o, si la selección múltiple está habilitada, array of strings .

El valor de salida del campo de lista desplegable con tipo de datos string:

{
  "dropdown_field_id": "Option A"
}

El valor del tipo de datos de salida del campo desplegable es un array of strings:

{
  "dropdown_field_id": ["Option A", "Option B"]
}

Campo numérico

Campo de entrada estándar que permite a un usuario introducir valores numéricos.

Valor de salida del campo numérico

El tipo de dato del valor de salida del campo numérico es number.

{
  "number_field_id": 123
}

Campo de fecha y hora

Entrada estándar que permite a un usuario introducir un valor de fecha o de hora.

Configuración del campo de fecha / hora

La configuración del campo de fecha/hora incluye lo siguiente:

Clave	Descripción
Formato	Seleccione el formato Fecha o Hora.

Valor de salida del campo de fecha / hora

El valor del tipo de datos de salida del campo de fecha/hora para la fecha es un string:

{
  "date_time_field_id": "2023-04-11"
}

El valor del tipo de dato de salida del campo de fecha/hora para la hora es de tipo string:

{
  "date_time_field_id": "23:15"
}

Campo booleano

Entrada estándar que permite a un usuario introducir valores true o false.

Valor de salida del campo booleano

El tipo de dato del valor de salida del campo booleano es booleano.

{
  "boolean_field_id": true
}

Campo personalizado

Campo estándar que puede personalizar para crear su propio campo.

Configuración del campo personalizado

La configuración del campo personalizado es la siguiente:

Configuración	Descripción
Parámetros	Agregue pares clave-valor para consultarlos en el código fuente del campo personalizado.
Código fuente	Agregue su código JavaScript al campo personalizado.
Esquema JSON	De forma predeterminada, el campo personalizado acepta cualquier formato de valor. Sin embargo, puede usar JSON Schema para validar los valores.

Para obtener más información, consulte Custom Field Components for Forms.

​

Componentes de bloque

Los bloques son componentes de interfaz de usuario que añaden funcionalidad a sus formularios, pero no recopilan información del usuario.

​

Bloques disponibles en Forms

Los bloques disponibles son:

Bloque de botón Siguiente

Un botón que permite a los usuarios continuar al siguiente nodo del formulario.

• Antes de continuar, las reglas de validación de campos se aplican y se validan tanto del lado del cliente como del lado del servidor. Si la validación de campos falla, se muestra un mensaje de error para que el usuario lo revise.
• Si el siguiente nodo es un nodo de flujo, se muestra un indicador de carga hasta que el flujo se complete. Si el flujo falla o devuelve un mensaje de error personalizado, se muestra un mensaje de error.

Bloque de botón Anterior

Un botón que permite a los usuarios ir al nodo de paso anterior.

Si un usuario selecciona el botón anterior, las reglas de validación de campos se ejecutan de nuevo, aunque no se haya realizado ningún cambio en los datos de entrada antes de continuar.

Bloque de botón de salto

Un botón que permite a los usuarios omitir el paso actual y saltar directamente al nodo de destino.

Al omitir el paso actual, no se validará ni se recopilará ninguna información completada en ese paso.

Bloque de botón de reenvío

Un componente que permite a los usuarios volver a ejecutar un flujo para generar y enviar un nuevo código OTP

Si un usuario selecciona el botón de reenvío, el flujo asociado generará y enviará un nuevo código OTP.

Configuración	Descripción
Alineación del texto	Seleccione la alineación del texto: izquierda, centro o derecha
Texto	Texto predeterminado que se muestra cuando los usuarios seleccionan el botón de reenvío
Texto del botón	Texto del botón
Texto de espera	Texto que se muestra cuando los usuarios han seleccionado el botón de reenvío. Reemplaza la configuración Text y Button text. Use la variable “{{remaining_seconds}}” para mostrar dinámicamente la cantidad de segundos restantes hasta que el botón de envío vuelva a estar habilitado. Por ejemplo: “Reenviar en {{remaining_seconds}} segundos”.
Flujo	Flujo que se ejecuta después de que el usuario selecciona el botón de reenvío.
Intentos máximos	La cantidad máxima de veces que el usuario puede seleccionar el botón de reenvío
Tiempo de espera	El tiempo de espera entre intentos, en segundos.

Bloque de texto enriquecido

Un bloque de texto enriquecido para personalizar el nodo de paso con información adicional.

Bloque divisor

Una línea para dividir distintas secciones del nodo de paso. Puede contener un texto breve.

Bloque HTML

Un bloque HTML para crear su interfaz de usuario personalizada.

Bloque de imagen

Un bloque de imagen para personalizar el paso agregando imágenes.

​

Componentes de widget

Los widgets son componentes prediseñados, con integraciones de terceros, que añaden lógica del lado del cliente y del lado del servidor a sus formularios.

​

Widgets disponibles en Forms

Los widgets disponibles son:

Widget de direcciones de Google

Un widget que permite a un usuario introducir y validar su dirección.

Configuración del widget de direcciones de Google

La configuración del widget de direcciones de Google incluye:

Configuración	Descripción
Clave de API	Requiere una clave de API de Google Maps para autenticar las solicitudes.

Valor de salida del widget de direcciones de Google

El tipo de datos del valor de salida del widget de direcciones de Google es un object.

{
  "google_address_widget_id": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -73.9654415,
        40.8054491
      ]
    },
    "properties": {
      "geocoding": {
        "type": "house",
        "housenumber": "2880",
        "street": "Broadway",
        "city": "New York",
        "county": "New York County",
        "state": "New York",
        "country": "United States",
        "postcode": "10025"
      }
    }
  }
}

Google reCAPTCHA

Un widget que ayuda a proteger su sitio web del spam y el abuso al verificar que un usuario es una persona y no un bot.

El widget admite:

• Basado en puntuación (v3)

• Desafío (v2)

  • Insignia invisible de reCAPTCHA

Diferencias entre v2 y v3:

• v2 requiere interacción del usuario con desafíos visibles, como hacer clic en una casilla de verificación o resolver rompecabezas.
• v3 se ejecuta en segundo plano y proporciona una puntuación basada en el comportamiento del usuario, sin requerir interacción del usuario. Al usar esta versión, asegúrese de implementar lógica de negocio adicional para gestionar la puntuación y determinar si es necesario realizar alguna acción adicional.

Configuración del widget de Google reCAPTCHA

La configuración del widget de Google reCAPTCHA incluye:

Configuración	Descripción
Clave del sitio	La clave pública del sitio que se usa para inicializar reCAPTCHA en su sitio web. Puede crearla en la consola de Google reCAPTCHA o en su proyecto de Google Cloud Platform.
Clave secreta	La clave secreta que se usa para comunicarse de forma segura con el servicio de reCAPTCHA del lado del servidor. Puede crearla en la consola de Google reCAPTCHA o en su proyecto de Google Cloud Platform.

Valor de salida de Google reCAPTCHA

El tipo de datos del valor de salida del widget de Google reCAPTCHA es un object.

Ejemplo de respuesta de v2:

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com"
  }
}

Ejemplo de respuesta de v3:

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com",
    "score": 0.9
  }
}

Credenciales verificables

Un widget que permite a un usuario verificar su identidad mediante credenciales verificables almacenadas en su billetera digital.

Configuración del widget de credenciales verificables

La configuración del widget de credenciales verificables incluye:

Configuración	Descripción
URL	El valor de URL usado para generar el código QR. Este valor se devuelve en la propiedad engagement de la solicitud de verificación.
Texto del enlace	Texto alternativo que se mostrará a los usuarios que no puedan escanear el código QR y prefieran abrir el enlace directamente en su dispositivo.
Tamaño	El tamaño del código QR.
Token público	El token de acceso necesario para consumir el endpoint de polling. Asegúrese de que el token se genere solo con el scope read:verification_request para evitar exponer acceso a otros recursos.
ID de verificación	El ID de verificación generado al iniciar la solicitud de verificación.
Tiempo máximo de espera	El tiempo máximo de espera para que se complete el proceso de verificación. Una vez alcanzado el tiempo establecido, el polling se detendrá y se generará un error, independientemente del estado de la verificación.

Valor de salida de credenciales verificables

El tipo de datos del valor de salida del widget de credenciales verificables es un object.

{
  "verifiable_credentials_widget_id": {
    "state": "honored",
    "reason": "...", // El campo `reason` contiene información adicional (si está disponible) sobre el estado de la solicitud de verificación. 
    "presentation": {} // La presentación contiene los claims proporcionados por la billetera en respuesta a la definición de presentación.
  }
}

​

Nodo Enrutador

Los nodos Enrutador le permiten agregar reglas para crear saltos de lógica condicional entre nodos.

De forma predeterminada, un nodo Enrutador tiene una sola regla de paso llamada Caso predeterminado que se conecta con otros nodos. Puede agregar reglas adicionales basadas en un conjunto de condiciones que una variable debe cumplir para conectarse luego con otros nodos. Para obtener más información, consulte Enrutador.

​

Nodo de flujo

Los nodos de flujo permiten agregar lógica personalizada y crear flujos de integración para los formularios. Para obtener más información, consulte Flows.

​

Nodo de inicio

Los nodos de inicio no son visibles para el usuario. En ellos puede configurar variables de campos ocultos, como atributos del usuario al renderizar un formulario con una Action.

​

Nodo de pantalla de finalización

Cada formulario tiene un nodo de pantalla de finalización. De forma predeterminada, este nodo reanuda el flujo de autenticación, y aquí es donde puede configurar un flujo posterior al envío.