Compartir a través de

Inicio rápido: Edición del perfil en una aplicación web de Node.js de ejemplo

Se aplica a:Círculo blanco con un símbolo X gris. inquilinos de personal Círculo verde con un símbolo de marca de verificación blanca. inquilinos externos (más información)

En este inicio rápido, usará una aplicación web de ejemplo Node.js para aprender a agregar inicio de sesión y editar el perfil en una aplicación web. La aplicación web de ejemplo usa Biblioteca de autenticación de Microsoft para Node (nodo MSAL) y Microsoft Graph API para completar la operación de inicio de sesión y edición del perfil. La operación de edición del perfil requiere que un usuario complete una autenticación multifactor (MFA).

Prerrequisitos

Configuración de ámbitos y roles de API

Al registrar la API web, debe configurar ámbitos de API para definir los permisos que una aplicación cliente puede solicitar para acceder a la API web. Además, debe configurar roles de aplicación para especificar los roles disponibles para los usuarios o aplicaciones y conceder los permisos de API necesarios a la aplicación web para permitir que llame a la API web.

Configuración de los ámbitos de la API de la aplicación EditProfileService

La aplicación EditProfileService debe exponer los permisos que adquiere una aplicación cliente para llamar a la API web.

Una API debe publicar un mínimo de un ámbito, también denominado Permiso delegado, para que las aplicaciones cliente obtengan un token de acceso para un usuario correctamente. Para publicar un ámbito, siga estos pasos:

  1. En la página Registros de aplicaciones, seleccione la aplicación de API que creó (por ejemplo, edit-profile-service) para abrir su página Información general.

  2. En Administrar, seleccione Exponer una API.

  3. En la parte superior de la página, junto a URI de id. de aplicación, seleccione el vínculo Agregar para generar un URI que sea único para esta aplicación.

  4. Acepte el URI de identificador de aplicación propuesto, como api://{clientId}, y seleccione Guardar. Cuando la aplicación web solicite un token de acceso para la API web, deberá agregar este URI como prefijo para cada ámbito que se defina para la API.

  5. En Ámbitos definidos con esta API, seleccione Agregar un ámbito.

  6. Escriba los valores siguientes que definan el acceso de lectura a la API y, a continuación, seleccione Agregar ámbito para guardar los cambios:

    Propiedad Valor
    Nombre de ámbito EditProfileService.ReadWrite
    ¿Quién puede dar el consentimiento? Solo administradores
    Nombre para mostrar del consentimiento del administrador El cliente edita el perfil mediante el servicio de edición de perfiles
    Descripción del consentimiento del administrador Ámbito para permitir que la aplicación web cliente edite el perfil mediante una llamada al servicio de edición de perfiles.
    Estado Habilitado

Concesión del permiso User.ReadWrite a la aplicación EditProfileService

User.ReadWrite es un permiso de Microsoft Graph API que permite a un usuario actualizar su perfil. Para conceder el permiso User.ReadWrite a la aplicación EditProfileService, siga estos pasos:

  1. En la página Registros de aplicaciones, seleccione la aplicación que creó (por ejemplo, edit-profile-service) para abrir su página Información general.

  2. En Administrar, seleccione Permisos de API.

  3. Seleccione la pestaña API de Microsoft y, después, en API de Microsoft usadas habitualmente, seleccione Microsoft Graph.

  4. Seleccione Permisos delegados, busque y seleccione User.ReadWrite en la lista de permisos.

  5. Seleccione el botón Agregar permisos.

  6. Ha asignado los permisos User.ReadWrite correctamente a la aplicación EditProfileService. Sin embargo, dado que el inquilino es un inquilino externo, los propios usuarios del cliente no pueden dar su consentimiento a estos permisos. Como administrador del inquilino, debe dar su consentimiento a este permiso en nombre de todos los usuarios del inquilino:

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

Concesión de permisos de API a la aplicación web cliente

En esta sección, concederá permisos de API a la aplicación web cliente que registró anteriormente (en requisitos previos).

Conceda a la aplicación web cliente el permiso EditProfileService.ReadWrite. La aplicación EditProfileService expone este permiso y protege la operación de perfil de actualización con MFA. Para conceder el permiso EditProfileService.ReadWrite a la aplicación web cliente, siga estos pasos:

  1. En la página Registros de aplicaciones, seleccione la aplicación de API 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 usadas en mi organización.

  5. En la lista de API, seleccione la API como edit-profile-service.

  6. Seleccione la opción Permisos delegados.

  7. En la lista de permisos, seleccione EditProfileService.ReadWrite.

  8. Seleccione el botón Agregar permisos.

  9. En la lista Permisos configurados, seleccione el permiso EditProfileService.ReadWrite y, a continuación, copie el URI completo del permiso para su uso posterior. El URI de permiso completo tiene un aspecto similar a api://{clientId}/{EditProfileService.ReadWrite}.

  10. Ha asignado los permisos *EditProfileService.ReadWrite correctamente a la aplicación web cliente. Sin embargo, dado que el inquilino es un inquilino externo, los propios usuarios del cliente no pueden dar su consentimiento a estos permisos. Como administrador del inquilino, debe dar su consentimiento a este permiso en nombre de todos los usuarios del inquilino:

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

Creación de directiva MFA de acceso condicional

La aplicación EditProfileService que registró anteriormente es el recurso que protege con MFA.

Para crear una directiva de acceso condicional (CA) de MFA, siga los pasos descritos en Incorporación de la autenticación multifactor a una aplicación. Use la siguiente configuración al crear la directiva:

  • Para el Nombre, use directiva MFA.
  • Para los recursos de destino, seleccione la aplicación EditProfileService que registró anteriormente, como edit-profile-service.

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

Ya ha clonado la aplicación de ejemplo de los requisitos previos, pero si aún no lo ha hecho, puede clonarla desde GitHub o descargarla como un .zip archivo.

Descargue el archivo zipo clone la aplicación web de ejemplo desde GitHub mediante el siguiente comando:

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

Configuración de la aplicación web de ejemplo

Este ejemplo de código contiene dos aplicaciones, la aplicación web cliente y la aplicación de API (aplicación EditProfileService). Debe actualizar estas aplicaciones para usar la configuración del inquilino externo. Para ello, siga estos pasos:

  1. En el editor de código, abra 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js el archivo y busque el marcador de posición:

    • Enter_the_Application_Id_Here y reemplácelo por el Id. de aplicación (cliente) de la aplicación web de cliente que registró anteriormente.
    • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.
    • Enter_the_Client_Secret_Here y sustitúyalo por el valor secreto de la aplicación web de cliente que copió anteriormente.
    • graph_end_point y reemplácelo por el punto de conexión de Microsoft Graph API, que es https://graph.microsoft.com/.
    • Add_your_protected_scope_here y reemplácelo por el ámbito de aplicación de API (la aplicación EditProfileService). El valor es similar a api://{clientId}/EditProfileService.ReadWrite. {clientId} es el valor de id. de aplicación (cliente) del EditProfileService que registró anteriormente.

  2. En el editor de código, abra 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js el archivo y busque el marcador de posición:

    • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directory (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.
    • Enter_the_Tenant_ID_Here y reemplácelo por Id. de inquilino. Si no tiene el identificador de inquilino, aprenda a leer los detalles del inquilino.
    • Enter_the_Edit_Profile_Service_Application_Id_Here y reemplácelo por es el valor de id. de aplicación (cliente) de la aplicación EditProfileService.
    • Enter_the_Client_Secret_Here y reemplácelo por el valor de secreto de cliente creado como parte de los requisitos previos.
    • graph_end_point y reemplácelo por el punto de conexión de Microsoft Graph API, que es https://graph.microsoft.com/.

Instalación de dependencias del proyecto y ejecución de la aplicación

Para probar la aplicación, instale las dependencias del proyecto para la aplicación cliente y la aplicación de servicio o API y, a continuación, ejecútelos.

  1. Para ejecutar la aplicación cliente, abra la ventana del terminal y ejecute los siguientes comandos:

    cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start

  2. Para ejecutar la aplicación de servicio de edición/API, cambie el directorio a la aplicación servicio de edición/API, 1-Authentication\7-edit-profile-with-mfa-express\Apiy ejecute los siguientes comandos:

    npm install
npm start

  3. Abra el explorador web y vaya a http://localhost:3000. Si experimenta errores de certificado SSL, cree un archivo .env y agregue la siguiente configuración:

    # Use this variable only in the development environment. 
# Remove the variable when you move the app to the production environment.
NODE_TLS_REJECT_UNAUTHORIZED='0'

  4. Seleccione el botón Iniciar sesión y, a continuación, inicie sesión.

  5. En la página de inicio de sesión, 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.

  6. Para actualizar el perfil, seleccione el vínculo Edición de perfiles. Verá una página similar a la siguiente captura de pantalla:

    Captura de pantalla del perfil de actualización de usuario.

  7. Para editar el perfil, seleccione el botón Editar perfil. Si aún no lo ha hecho, la aplicación le pide que complete un desafío de MFA.

  8. Realice cambios en cualquiera de los detalles del perfil y seleccione el botón Guardar.

Contenido relacionado