Widget de inicio de sesión

El widget de inicio de sesión agrega una experiencia de inicio de sesión a su aplicación. El widget es un botón que permite a los usuarios iniciar y cerrar sesión en las cuentas de ArcGIS. Al hacer clic en el botón se realizan diferentes acciones, dependiendo de si el usuario ya ha iniciado sesión o no, y de los comportamientos que se configuren en los ajustes del widget.

• Cuando los usuarios hacen clic en el widget para iniciar sesión, este puede abrir una ventana emergente de inicio de sesión o redirigirlos a una página de inicio de sesión de ArcGIS.
• Cuando los usuarios hacen clic en el widget mientras ya han iniciado sesión, este puede cerrar su sesión directamente o abrir un menú desplegable con opciones.

Puede configurar redireccionamientos que envíen a los usuarios a una página, vista, ventana o URL externa específica de la aplicación después de iniciar o cerrar sesión. También puede personalizar la apariencia del widget y del menú desplegable.

Ejemplos

Use este widget para apoyar los requisitos de diseño de la aplicación como por ejemplo los siguientes:

• Desea exigir a los usuarios que inicien sesión antes de acceder a una aplicación.
• Desea crear una página de inicio con un botón de inicio de sesión y redirigir a los usuarios a otra página después de que inicien sesión en una cuenta.
• Desea permitir a los usuarios cambiar de cuenta.

Notas de uso

Cuando agrega un widget de inicio de sesión a una página, aparece la ventana Estilo rápido. Puede seleccionar entre diseños preestablecidos que combinan con el tema de su aplicación. (Para volver a acceder a esta ventana más tarde, haga clic en el botón Estilo rápido en la barra de herramientas del widget). Puede personalizar aún más la apariencia del widget en la configuración de Apariencia.

La barra de herramientas del widget de inicio de sesión incluye el botón Alternar vista previa de inicio de sesión . Puede utilizar este botón para cambiar entre la vista previa del widget en estado de inicio de sesión y en estado de cierre de sesión.

Sugerencia:

Dado que debe iniciar sesión para editar la aplicación, el widget no le permite iniciar sesión, cerrar sesión ni cambiar de cuenta en el generador. Para probar por completo la experiencia de inicio y cierre de sesión, obtenga una vista previa de la aplicación en una nueva pestaña.

Configuración

El widget de inicio de sesión incluye la siguiente configuración:

• Visualización de la página de inicio de sesión: elija un comportamiento para cuando el usuario haga clic en el botón del widget sin haber iniciado sesión:
  • Ventana emergente: aparece una ventana y se solicita al usuario que inicie sesión.
  • Redirigir a la página de inicio de sesión: el widget redirige al usuario a una página de inicio de sesión de ArcGIS. Una vez que el usuario inicia sesión con una cuenta válida, vuelve a la aplicación.

  Nota:

  Cuando integra una aplicación de Experience Builder en otra aplicación o sitio web, la ventana emergente es siempre el comportamiento de inicio de sesión cuando el usuario hace clic en el widget de la aplicación incrustada, independientemente de la opción que seleccione aquí.

• Configuración posterior al inicio de sesión: configure los siguientes ajustes relacionados con el comportamiento del widget después de que el usuario haya iniciado sesión:
  • Redirigir después de iniciar sesión: opcionalmente, agregue un vínculo para enviar a los usuarios a una página, vista o ventana específica de su aplicación, o para ir a una dirección web, inmediatamente después de iniciar sesión correctamente. Si vincula con una dirección web, introduzca una URL (que comience por https://). Puede elegir si desea que la redirección se abra en la misma ventana que la aplicación, en la ventana superior o en una nueva ventana.
  • Redirigir después de cerrar sesión: opcionalmente, agregue un vínculo para enviar a los usuarios a una página, vista o ventana específica de su aplicación, o para ir a una dirección web, inmediatamente después de cerrar sesión correctamente. Si vincula con una dirección web, introduzca una URL (que comience por https://). Puede elegir si desea que la redirección se abra en la misma ventana que la aplicación, en la ventana superior o en una nueva ventana.
  • Al hacer clic en el botón de inicio de sesión: elija un comportamiento para cuando el usuario haga clic en el widget mientras está conectado:
    • Cerrar sesión directamente: el widget cierra la sesión del usuario en su cuenta.
    • Habilitar menú de usuario: aparece un menú desplegable cuando el usuario hace clic en el botón. El menú siempre incluye las opciones Cambiar de cuenta y Cerrar sesión. Puede elegir incluir los siguientes elementos y opciones adicionales:
      • Mostrar nombre de usuario: incluya el nombre del perfil de la cuenta en el menú.
      • Mostrar avatar de usuario: incluya la imagen del avatar de la cuenta en el menú.
      • Mostrar "Mi perfil": incluya un vínculo a la página de perfil de la cuenta.
      • Mostrar "Mi configuración": incluya un vínculo a la página de configuración de la cuenta.
      • Mostrar recursos restringidos (si los hay): incluya una lista de recursos de la aplicación a los que la cuenta actual no puede acceder.
      • Agregar un vínculo: agregue un vínculo al menú desplegable. Puede introducir una etiqueta y una URL https:// para cada vínculo.
• Apariencia: cambia la apariencia del widget de inicio de sesión.
  • Icono: agregue un icono al botón de inicio de sesión. Este icono aparece cuando el usuario ha cerrado sesión. El avatar del usuario aparece cuando el usuario ha iniciado sesión en su cuenta. Puede elegir iconos de las galerías predeterminadas o cargar su propio icono desde un archivo.
  • Puede anular la fuente y los colores heredados del tema de la aplicación para aplicar estilo a los dos estados del widget. El estado predeterminado es el estado del widget sin interacción del usuario y el estado al pasar el puntero es el estado iniciado por el usuario cuando señala o hace clic en el widget. Puede ajustar la siguiente configuración:
    • Texto: cambie el tamaño de la fuente (en píxeles) y el color de la fuente, y diseñe el texto del widget utilizando el formato negrita, cursiva, tachado y subrayado.
    • Icono: cambie el tamaño (en píxeles) y el color del icono del widget.
    • Fondo: elija un color de relleno o una imagen para establecer como fondo del widget. Si elige una imagen, puede colocarla en el widget utilizando las opciones Ajustar, Rellenar, Centrar, Tesela o Extender. Si elige Ajustar, el widget muestra el color de relleno de fondo alrededor de la imagen.
    • Borde: elija un color de borde, estilo (como por ejemplo guiones o puntos) y el ancho en píxeles. Puede definir el estilo de todos los lados del borde al mismo tiempo o hacerlo para cada uno de ellos por separado.
    • Radio del borde: cambie el tamaño del radio (en píxeles o porcentaje) para dar forma a las esquinas del widget.
    • Sombra: agregue un efecto de sombra alrededor del widget usando los siguientes ajustes:
      • Desplazamiento X: establezca la distancia horizontal de la sombra. Un valor negativo coloca la sombra en la parte izquierda del botón y un valor positivo la coloca en la parte derecha.
      • Desplazamiento Y: establezca la distancia vertical de la sombra. Un valor negativo coloca la sombra encima del botón y un valor positivo la coloca debajo.
      • Radio de desenfoque: aplique un efecto de desenfoque en la sombra.
      • Radio de propagación: ajuste el tamaño de la sombra.
      • Color: seleccione un color de sombra.
    • Menú desplegable: cambia la apariencia del menú desplegable que aparece si activa la configuración Habilitar menú de usuario:
      • Texto: cambie el tamaño de la fuente (en píxeles) y el color de la fuente, y diseñe el texto del menú utilizando el formato negrita, cursiva, tachado y subrayado.
      • Fondo: elija un color de relleno o una imagen para establecer como fondo del menú. Si elige una imagen, puede colocarla en el menú usando Ajustar, Rellenar, Centro, Tesela o Extender. Si elige Ajustar, el menú muestra el color de relleno de fondo alrededor de la imagen.
      • Borde: elija un color de borde, estilo (como por ejemplo guiones o puntos) y el ancho en píxeles. Puede definir el estilo de todos los lados del borde al mismo tiempo o hacerlo para cada uno de ellos por separado.
      • Sombra: agregue un efecto de sombra alrededor del menú usando los siguientes ajustes:
        • Desplazamiento X: establezca la distancia horizontal de la sombra. Un valor negativo coloca la sombra en la parte izquierda del botón y un valor positivo la coloca en la parte derecha.
        • Desplazamiento Y: establezca la distancia vertical de la sombra. Un valor negativo coloca la sombra encima del botón y un valor positivo la coloca debajo.
        • Radio de desenfoque: aplique un efecto de desenfoque en la sombra.
        • Radio de propagación: ajuste el tamaño de la sombra.
        • Color: seleccione un color de sombra.