Tutorial: Acceso a Microsoft Graph desde una aplicación JavaScript protegida como el usuario
Aprenda a acceder a Microsoft Graph desde una aplicación web que se ejecuta en Azure App Service.
Quiere agregar acceso a Microsoft Graph desde la aplicación web y realizar alguna acción como el usuario que ha iniciado sesión. En esta sección se describe cómo conceder permisos delegados a la aplicación web y cómo obtener la información de perfil del usuario con la sesión iniciada desde Microsoft Entra ID.
En este tutorial, aprenderá a:
- Conceder permisos delegados a una aplicación web
- Llamar a Microsoft Graph desde una aplicación web para el usuario que ha iniciado sesión
Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.
Requisitos previos
- Una aplicación web que se ejecuta en Azure App Service que tiene el módulo de autenticación y autorización de App Service habilitado.
Concesión de acceso de front-end para llamar a Microsoft Graph
Ahora que ha habilitado la autenticación y la autorización en la aplicación web, esta se registra con la plataforma de identidad de Microsoft y se respalda mediante una aplicación de Microsoft Entra ID. En este paso, concederá a la aplicación web permisos para acceder a Microsoft Graph para el usuario (técnicamente, asignará a la aplicación de Microsoft Entra de la aplicación web los permisos para acceder a Microsoft Graph de Microsoft Entra para el usuario).
En el centro de administración de Microsoft Entra, seleccione Aplicaciones.
Seleccione Registros de aplicaciones>Aplicaciones propias>View all applications in this directory (Ver todas las aplicaciones de este directorio). Seleccione el nombre de la aplicación web y, después, Permisos de API.
Seleccione Agregar un permiso; después, seleccione las API de Microsoft y Microsoft Graph.
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 ya tiene los permisos necesarios para acceder a Microsoft Graph como usuario con la sesión iniciada. En este paso, configurará la autenticación y autorización de App Service para proporcionarle un token de acceso que se pueda usar 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 que devuelva un token de acceso utilizable, recibirá un error CompactToken parsing failed with error code: 80049217 al llamar a Microsoft Graph API en el código.
Vaya a Azure Resource Explorer y, mediante el árbol de recursos, busque la aplicación web. La dirección URL del recurso debe ser similar a https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.
Se abre ahora Azure Resource Explorer con la aplicación web seleccionada en el árbol de recursos.
En la parte superior de la página, seleccione Read/Write (Lectura/escritura) para permitir la edición de los recursos de Azure.
En el explorador izquierdo, explore en profundidad hasta config>authsettingsV2.
En la vista authsettingsV2, seleccione Editar.
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" ] } } } },Seleccione PUT para guardar la configuración. Puede que esta configuración tarde varios minutos en surtir efecto. La aplicación web ya 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 no es correcto.
Llamada a Microsoft Graph desde Node.js
La aplicación web dispone ahora de 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 @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
},
},
}
Llamada a Microsoft Graph en nombre del usuario
En el código siguiente se muestra cómo llamar al controlador de Microsoft Graph como la aplicación y cómo obtener información del 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 plan de hospedaje de App Service, App Service y una cuenta de almacenamiento en un grupo de recursos. También ha creado un registro de 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:
- Eliminar los recursos de Azure creados mientras seguía el tutorial.
Eliminar el grupo de recursos
En Azure Portal, seleccione Grupos de recursos en el menú del portal y seleccione el grupo de recursos que contiene el plan de App Service y App Service.
Seleccione Eliminar grupo de recursos para eliminar el grupo de recursos y todos los recursos.
Este comando puede tardar varios minutos en ejecutarse.
Eliminación del registro de aplicaciones
En el Centro de administración de Microsoft Entra, seleccione Aplicaciones>Registros de aplicaciones. A continuación, seleccione la aplicación que ha creado.
En la información general del registro de aplicaciones, seleccione Eliminar.
Eliminación del inquilino externo
Si ha creado un nuevo inquilino externo, puede eliminarlo. En el Centro de administración Microsoft Entra, vaya a Identidad>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
- Llamar a Microsoft Graph desde una aplicación web para el usuario que ha iniciado sesión