Tutorial: Acceso a Microsoft Graph desde una aplicación javaScript protegida como usuario

Obtenga información sobre cómo acceder a Microsoft Graph desde una aplicación web que se ejecuta en Azure App Service.

Diagrama que muestra el acceso a Microsoft Graph.

Quiere agregar acceso a Microsoft Graph desde la aplicación web y realizar alguna acción como usuario que ha iniciado sesión. En esta sección se describe cómo conceder permisos delegados a la aplicación web y obtener la información de perfil del usuario que ha iniciado sesión de Microsoft Entra ID.

En este tutorial, aprenderá a:

  • Conceder permisos delegados a una aplicación web
  • Llame a Microsoft Graph desde una aplicación web para un usuario que haya iniciado sesión.

Si no tiene una cuenta de Azure, cree una cuenta free antes de comenzar.

Requisitos previos

  • Una aplicación web que se ejecuta en Azure App Service que tiene habilitado el módulo de autenticación y autorización del servicio >.

Concesión de acceso de front-end para llamar a Microsoft Graph

Ahora que ha habilitado la autenticación y autorización en la aplicación web, la aplicación web se registra con el Plataforma de identidad de Microsoft y está respaldada por una aplicación de Microsoft Entra. En este paso, se conceden a la aplicación web permisos para acceder a Microsoft Graph para el usuario. (Técnicamente, concede a la aplicación web Microsoft Entra permisos para acceder a la aplicación Microsoft Graph Microsoft Entra para el usuario).

  1. En el Centro de administración Microsoft Entra, seleccione Entra ID.

  2. Seleccione Registros de aplicaciones>Aplicaciones propias>Ver todas las aplicaciones de este directorio. Seleccione el nombre de la aplicación web y, después, Permisos de API.

  3. Seleccione Agregar un permiso y seleccione Microsoft API y Microsoft Graph.

  4. Seleccione Permisos delegados y, después, User.Read en la lista. Seleccione Agregar permisos.

Configuración de App Service para devolver un token de acceso que se pueda usar

La aplicación web ahora tiene los permisos necesarios para acceder a Microsoft Graph como usuario que ha iniciado sesión. En este paso, configurará la autenticación y autorización de App Service para proporcionarle un token de acceso utilizable para acceder a Microsoft Graph. Para este paso, debe agregar el ámbito User.Read para el servicio de bajada (Microsoft Graph): https://graph.microsoft.com/User.Read.

Importante

Si no configura App Service para devolver un token de acceso utilizable, recibirá un error CompactToken parsing failed with error code: 80049217 al llamar a las APIs de Microsoft Graph en su código.

Vaya a Azure Explorador de recursos y use el árbol de recursos, busque la aplicación web. La dirección URL del recurso debe ser similar a https://management.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.

El Azure Explorador de recursos ahora se abre con la aplicación web seleccionada en el árbol de recursos.

  1. En la parte superior de la página, seleccione Edit para habilitar la edición de los recursos de Azure.

  2. En el explorador izquierdo, explore en profundidad hasta config>authsettingsV2.

  3. En la vista authsettingsV2, seleccione Editar.

  4. Busque la sección login (iniciar sesión) de identityProviders->azureActiveDirectory y agregue la siguiente configuración de loginParameters: "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ].

    "identityProviders": {
    "azureActiveDirectory": {
      "enabled": true,
      "login": {
        "loginParameters":[
          "response_type=code id_token",
          "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
        ]
      }
    }
  }
},

  5. Seleccione PUT para guardar la configuración. Puede que esta configuración tarde varios minutos en surtir efecto. La aplicación web ahora está configurada para acceder a Microsoft Graph con un token de acceso adecuado. Si no lo hace, Microsoft Graph devuelve un error que indica que el formato del token compacto es incorrecto.

Llamar a Microsoft Graph desde Node.js

La aplicación web ahora tiene los permisos necesarios y también agrega el identificador de cliente de Microsoft Graph a los parámetros de inicio de sesión.

Instalación de los paquetes de biblioteca cliente

Instale los paquetes @azure/identity y el @microsoft/microsoft-graph-client en el proyecto con npm.

npm install @microsoft/microsoft-graph-client

Configuración de la información de autenticación

Cree un objeto para contener la configuración de autenticación:

// partial code in app.js
const appSettings = {
    appCredentials: {
        clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
        tenantId: "common", // Enter the tenant info here,
        clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
    },
    authRoutes: {
        redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
        error: "/error", // enter the relative path to error handling route
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
    protectedResources: {
        graphAPI: {
            endpoint: "https://graph.microsoft.com/v1.0/me", // resource endpoint
            scopes: ["User.Read"] // resource scopes
        },
    },
}

Llamar a Microsoft Graph en nombre del usuario

El código siguiente muestra cómo llamar a Microsoft Graph controlador como aplicación y obtener información de usuario.

// controllers/graphController.js

// get the name of the app service instance from environment variables
const appServiceName = process.env.WEBSITE_SITE_NAME;

const graphHelper = require('../utils/graphHelper');

exports.getProfilePage = async(req, res, next) => {

    try {
        // get user's access token scoped to Microsoft Graph from session
        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

        // return user's profile
        const profile = await graphClient
            .api('/me')
            .get();

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

El código anterior se basa en la siguiente función getAuthenticatedClient para devolver el cliente de Microsoft Graph.

// utils/graphHelper.js

const graph = require('@microsoft/microsoft-graph-client');

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}

Limpieza de recursos

Si ha completado todos los pasos de este tutorial de varias partes, ha creado un App Service, un plan de hospedaje de App Service y una cuenta de almacenamiento en un grupo de recursos. También ha creado un registro de una aplicación en Microsoft Entra ID. Si ha elegido la configuración externa, es posible que haya creado un nuevo inquilino externo. Cuando ya no lo necesite, elimine estos recursos y el registro de aplicaciones para que no continúe acumulando gastos.

En este tutorial, aprenderá a:

  • Elimine los recursos de Azure creados mientras sigue el tutorial.

Eliminar el grupo de recursos

En el portal de Azure, seleccione Grupos de recursos en el menú del portal y seleccione el grupo de recursos que contiene su App Service y el plan de App Service.

Seleccione Eliminar grupo de recursos para eliminar el grupo de recursos y todos los recursos.

Captura de pantalla que muestra la eliminación del grupo de recursos.

Este comando puede tardar varios minutos en ejecutarse.

Eliminación del registro de aplicaciones

En el Centro de administración Microsoft Entra, seleccione Registros de aplicaciones. A continuación, seleccione la aplicación que ha creado. Captura de pantalla que muestra la selección del registro de aplicaciones.

En la información general del registro de aplicaciones, seleccione Eliminar. Captura de pantalla que muestra la eliminación del registro de aplicaciones.

Eliminación del inquilino externo

Si ha creado un nuevo inquilino externo, puede eliminarlo. En el Centro de administración Microsoft Entra, vaya a Entra ID>Información general>Administrar inquilinos.

Seleccione el inquilino que desee eliminar y, a continuación, seleccione Eliminar.

Es posible que tenga que completar las acciones necesarias para poder eliminar el inquilino. Por ejemplo, es posible que tenga que eliminar todos los flujos de usuario y los registros de aplicaciones en el inquilino.

Si está listo para eliminar el inquilino, seleccione Eliminar.

Pasos siguientes

En este tutorial, ha aprendido a:

  • Conceder permisos delegados a una aplicación web
  • Llame a Microsoft Graph desde una aplicación web para un usuario que haya iniciado sesión.

El servicio de aplicaciones accede a Microsoft Graph como una aplicación

  • Last updated on