Inicio de sesión de usuarios en una aplicación de escritorio Electron de ejemplo

  • Artículo

En esta guía paso a paso se usa una aplicación de escritorio Electron de ejemplo para mostrar cómo agregar autenticación a una aplicación de escritorio. La aplicación de ejemplo permite a los usuarios iniciar sesión y cerrar la sesión. La aplicación web de ejemplo usa la biblioteca de autenticación de Microsoft (MSAL) para que Node controle la autenticación.

En este artículo, realice las tareas siguientes:

  • Registre una aplicación de escritorio en el centro de administración de Microsoft Entra.

  • Creación de un flujo de usuario de inicio de sesión y cierre de sesión en el centro de administración de Microsoft Entra.

  • Asociación de la aplicación web al flujo de usuarios.

  • Actualice una aplicación de escritorio Electron de ejemplo con sus propios detalles de inquilino externo.

  • Ejecución y prueba de la aplicación de escritorio de ejemplo.

Prerrequisitos

Registro de una aplicación de escritorio

Para permitir que su aplicación inicie la sesión de los usuarios con Microsoft Entra, la id. externa de Microsoft Entra debe tener en cuenta la aplicación que haya creado. El registro de la aplicación establece una relación de confianza entre la aplicación y Microsoft Entra. Al registrar una aplicación, External ID genera un identificador único conocido como Id. de aplicación (cliente), un valor que se usa para identificar la aplicación al crear solicitudes de autenticación.

En los pasos siguientes, se muestra cómo registrar una aplicación en el centro de administración de Microsoft Entra:

  1. Inicie sesión en el Centro de administración de Microsoft Entra al menos como Desarrollador de aplicaciones.

  2. Si tiene acceso a varios inquilinos, use el icono Configuración en el menú superior para cambiar al inquilino externo desde el menú Directorios y suscripciones.

  3. Vaya aIdentidad>Aplicaciones>Registros de aplicaciones.

  4. Seleccione + Nuevo registro.

  5. En la página Registrar una aplicación que aparece;

    1. Introduzca un Nombre de aplicación significativo que se muestre a los usuarios de la aplicación, por ejemplo ciam-client-app.
    2. En Tipos de cuenta admitidos, seleccione Solo las cuentas de este directorio organizativo.

  6. Seleccione Registrar.

  7. Se muestra el panel Información general de la aplicación tras registrarse correctamente. Registre el Id. de la aplicación (cliente) que se usará en el código fuente de la aplicación.

Para especificar el tipo de aplicación en el registro de la aplicación, siga estos pasos:

  1. En Administrar, seleccione Autenticación.
  2. En la página Configuraciones de plataforma, seleccione Agregar una plataforma y elija la opción Aplicaciones móviles y de escritorio.
  3. En URI de redireccionamiento personalizados, escriba http://localhost y seleccione Configurar.
  4. Selecciona Configurar para guardar los cambios.

Concesión de permisos de API

  1. En la página Registros de aplicaciones, seleccione la aplicación que creó (como ciam-client-app) para abrir la página Información general.

  2. En Administrar, seleccione Permisos de API.

  3. En Permisos configurados, seleccione Agregar un permiso.

  4. Seleccione la pestaña API de Microsoft.

  5. En la sección API de Microsoft más usadas, seleccione Microsoft Graph.

  6. Seleccione la opción Permisos delegados.

  7. En la sección Seleccionar permisos, busque y seleccione los permisos openid y offline_access.

  8. Seleccione el botón Agregar permisos.

  9. En este momento, ha asignado los permisos correctamente. Sin embargo, dado que se trata de un inquilino del cliente, los propios usuarios consumidores no pueden dar su consentimiento a estos permisos. Como administrador, debes dar tu consentimiento a estos permisos en nombre de todos los usuarios del inquilino:

    1. Seleccione Conceder consentimiento del administrador para <nombre del inquilino> y seleccione Sí.
    2. Seleccione Actualizar y luego compruebe que aparece Concedido para <nombre del inquilino> en Estado para ambos ámbitos.

Configuración de notificaciones opcionales

  1. En Administrar, seleccione Configuración del token.

  2. Seleccione Agregar notificación opcional.

  3. Seleccione el tipo de notificación opcional y, a continuación, elija Id.

  4. Seleccione la notificación opcional login_hint.

  5. Haga clic en Agregar para guardar los cambios.

Creación de un flujo de usuario

Siga estos pasos para crear un flujo de usuario que un cliente pueda usar para iniciar sesión o registrarse en una aplicación.

  1. Inicie sesión en el centro de administración de Microsoft Entra como mínimo un administrador de flujo de usuario de identificador externo.

  2. Si tiene acceso a varios inquilinos, use el icono Configuración en el menú superior para cambiar al inquilino externo desde el menú Directorios y suscripciones.

  3. Vaya a Identidad> Identidades externas> Flujos de usuarios.

  4. Seleccione + Nuevo flujo de usuario.

  5. En la página Crear:

    1. Escriba un nombre para el flujo de usuario, como SignInSignUpSample.

    2. En la lista Proveedores de identidades, seleccione Cuentas de correo electrónico. Este proveedor de identidades permite a los usuarios iniciar sesión o registrarse con su dirección de correo electrónico.

      Nota

      Los proveedores de identidades adicionales se mostrarán aquí solo después de que configure la federación con ellos. Por ejemplo, si configura la federación con Google o Facebook, podrá seleccionar esos proveedores de identidades adicionales aquí.

    3. En Cuentas de correo electrónico, puede seleccionar una de las dos opciones. En este tutorial, seleccione Correo electrónico con contraseña.

      • Correo electrónico con contraseña: permite a los nuevos usuarios registrarse e iniciar sesión con una dirección de correo electrónico como nombre de inicio de sesión y una contraseña como credencial del primer factor.
      • Código de acceso de un solo uso de correo electrónico: permite a los nuevos usuarios registrarse e iniciar sesión con una dirección de correo electrónico como el nombre de inicio de sesión y el código de acceso de un solo uso como credencial del primer factor. El código de acceso de un solo uso de correo electrónico debe estar habilitado en el nivel de inquilino (Todos los proveedores de identidades>Código de acceso de un solo uso de correo electrónico) para que esta opción esté disponible en el nivel de flujo de usuario.

    4. En Atributos de usuario, elija los atributos que quiere recopilar del usuario tras registrarse. Al seleccionar Mostrar más, puede elegir los atributos y las notificaciones de País o región, Nombre para mostrar y Código postal. Seleccione Aceptar. (A los usuarios solo se les solicitan atributos cuando se registran por primera vez).

  6. Seleccione Crear. El nuevo flujo de usuario aparece en la lista Flujos de usuario. Si es necesario, actualice la página.

Para habilitar el autoservicio de restablecimiento de contraseña, siga los pasos descritos en el artículo Habilitar el autoservicio de restablecimiento de contraseña.

Asociación de la aplicación web al flujo de usuarios

Aunque muchas aplicaciones se pueden asociar a su flujo de usuario, una sola aplicación solo se puede asociar a un flujo de usuario. Un flujo de usuario permite la configuración de la experiencia del usuario para aplicaciones específicas. Por ejemplo, puede configurar un flujo de usuario que requiera que los usuarios inicien sesión o se registren con la dirección de correo electrónico.

  1. En el menú de la barra lateral, seleccione Identidad.

  2. Seleccione External Identities y, a continuación, Flujos de usuario.

  3. En la página Flujos de usuario, seleccione el nombre del flujo de usuario que creó anteriormente; por ejemplo, SignInSignUpSample.

  4. En Usar, seleccione Aplicaciones.

  5. Seleccione Agregar una aplicación.

  6. Seleccione la aplicación de la lista, como ciam-client-app, o use el cuadro de búsqueda para buscar la aplicación y selecciónela.

  7. Elija Seleccionar.

Clonación o descarga de la aplicación web de ejemplo

Para obtener el código de ejemplo de la aplicación de escritorio, descargue el archivo .zip o clone la aplicación web de ejemplo de GitHub ejecutando el siguiente comando:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Si decide descargar el archivo .zip, extraiga el archivo de aplicación de ejemplo en una carpeta donde la longitud total de la ruta de acceso sea de 260 caracteres o menos.

Instalación de dependencias del proyecto

  1. Abra una ventana de consola y cambie al directorio que contiene la aplicación Electron de ejemplo:

    cd 1-Authentication\3-sign-in-electron\App

  2. Ejecute los siguientes comandos para instalar las dependencias de la aplicación:

    npm install && npm update

Configuración de la aplicación web de ejemplo

  1. En el editor de código, abra el archivo App\authConfig.js.

  2. Busque el marcador de posición:

    1. Enter_the_Application_Id_Here y reemplácelo por el identificador de aplicación (cliente) de la aplicación que registró anteriormente.

    2. Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio del directorio (inquilino). Por ejemplo, si el dominio principal del inquilino es contoso.onmicrosoft.com, use contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.

Ejecución y prueba de la aplicación web

Ahora puede probar la aplicación de escritorio Electron de ejemplo. Después de ejecutar la aplicación, la ventana de la aplicación de escritorio aparece automáticamente:

  1. Ejecute el comando siguiente en el terminal:

    npm start

    Captura de pantalla del inicio de sesión en una aplicación de escritorio Electron.

  2. En la ventana de escritorio que aparece, seleccione el botón Iniciar sesión o Registrarse. Se abre una ventana del explorador y se le pide que inicie sesión.

  3. En la página de inicio de sesión del explorador, escriba su dirección de correo electrónico, seleccione Siguiente, escriba la contraseña y, a continuación, seleccione Iniciar sesión. Si no tiene una cuenta, seleccione el vínculo ¿No tiene una cuenta? Cree una, que inicia el flujo de registro.

  4. Si elige la opción de registro, después de rellenar el correo electrónico, el código de acceso de un solo uso, la nueva contraseña y más detalles de la cuenta, completará todo el flujo de registro. Verá una página similar a la que aparece en la siguiente captura de pantalla. Verá una página similar si elige la opción de inicio de sesión. En la página se muestran las notificaciones de identificador de token.

    Captura de pantalla de ver las notificaciones de token en una aplicación de escritorio Electron.

Consulte también