Compartir a través de

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

Aprenda a 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 llamar a Microsoft Graph para la aplicación web. Una manera segura de dar acceso a los datos a la aplicación web es usar una identidad administrada asignada por el sistema. Una identidad administrada de Microsoft Entra ID permite a App Service acceder a los recursos a través del control de acceso basado en roles, sin necesidad de credenciales de aplicación. Después de asignar una identidad administrada a la aplicación web, Azure se encarga de la creación y distribución de un certificado. No tiene que preocuparse de administrar secretos ni credenciales de aplicaciones.

En este tutorial, aprenderá a:

  • Crear una identidad administrada asignada por el sistema en una aplicación web.
  • Agregar permisos de Microsoft Graph API a una identidad administrada.
  • Llamar a Microsoft Graph desde una aplicación web mediante identidades administradas.

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

Requisitos previos

Habilitación de la identidad administrada en la aplicación

Si crea y publica la aplicación web mediante Visual Studio, habilitará la identidad administrada en la aplicación.

  1. En App Service, seleccione Identidad en el panel izquierdo y, a continuación, Asignado por el sistema.

  2. Compruebe que la opción Estado está establecida en Activo. Si no es así, seleccione Guardar y, a continuación, Sí para habilitar la identidad administrada asignada por el sistema. Una vez habilitada la identidad administrada, el estado se establece en Activo y el identificador del objeto está disponible.

  3. Tome nota del valor de Id. de objeto, ya que lo necesitará en el paso siguiente.

Captura de pantalla que muestra la identidad asignada por el sistema.

Concesión de acceso a Microsoft Graph

Al acceder a Microsoft Graph, la identidad administrada debe tener los permisos adecuados para la operación que desea realizar. Actualmente, no hay ninguna opción para asignar estos permisos mediante el Centro de administración de Microsoft Entra.

  1. Ejecute el siguiente script para agregar los permisos de Microsoft Graph API solicitados al objeto de la entidad de servicio de la identidad administrada.

    # Install the module.
# Install-Module Microsoft.Graph -Scope CurrentUser

# The tenant ID
$TenantId = "aaaabbbb-0000-cccc-1111-dddd2222eeee"

# The name of your web app, which has a managed identity.
$webAppName = "SecureWebApp-20201106120003" 
$resourceGroupName = "SecureWebApp-20201106120003ResourceGroup"

# The name of the app role that the managed identity should be assigned to.
$appRoleName = "User.Read.All"

# Get the web app's managed identity's object ID.
Connect-AzAccount -Tenant $TenantId
$managedIdentityObjectId = (Get-AzWebApp -ResourceGroupName $resourceGroupName -Name $webAppName).identity.principalid

Connect-MgGraph -TenantId $TenantId -Scopes 'Application.Read.All','AppRoleAssignment.ReadWrite.All'

# Get Microsoft Graph app's service principal and app role.
$serverApplicationName = "Microsoft Graph"
$serverServicePrincipal = (Get-MgServicePrincipal -Filter "DisplayName eq '$serverApplicationName'")
$serverServicePrincipalObjectId = $serverServicePrincipal.Id

$appRoleId = ($serverServicePrincipal.AppRoles | Where-Object {$_.Value -eq $appRoleName }).Id

# Assign the managed identity access to the app role.
New-MgServicePrincipalAppRoleAssignment `
    -ServicePrincipalId $managedIdentityObjectId `
    -PrincipalId $managedIdentityObjectId `
    -ResourceId $serverServicePrincipalObjectId `
    -AppRoleId $appRoleId

  2. Después de ejecutar el script, puede comprobar en el Centro de administración de Microsoft Entra que los permisos de API solicitados están asignados a la identidad administrada.

  3. Vaya a Aplicaciones y, a continuación, Aplicaciones empresariales. Este panel muestra todas las entidades de servicio del inquilino. Agregue un filtro para "Tipo de aplicación==Identidades administradas" y seleccione la entidad de servicio para la identidad administrada.

    Si sigue este tutorial, hay dos entidades de servicio con el mismo nombre para mostrar (SecureWebApp2020094113531, por ejemplo). La entidad de servicio que tiene una dirección URL de la página principal representa la aplicación web en su inquilino. La entidad de servicio que aparece en Identidades administradasno debe tener una dirección URL de página principal enumerada y el valor de Id. de objeto debe coincidir con el valor del identificador de objeto de la identidad administrada del paso anterior.

  4. Seleccione la entidad de servicio para la identidad administrada.

    Captura de pantalla que muestra la opción Todas las aplicaciones.

  5. En Información general, seleccione Permisos; verá los permisos agregados para Microsoft Graph.

    Captura de pantalla que muestra el panel Permisos.

Llamada a Microsoft Graph con 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.

La clase DefaultAzureCredential del paquete @azure/identity se usa para obtener una credencial de token que el código pueda usar para autorizar solicitudes dirigidas a Azure Storage. Cree una instancia de la clase DefaultAzureCredential, que usa la identidad administrada para capturar los tokens y asociarlos al cliente de servicio. En el ejemplo de código siguiente se obtiene la credencial de token autenticada y se usa para crear un objeto de cliente del servicio que, luego, obtiene los usuarios del grupo.

Nota:

El paquete @azure/identity no es necesario en la aplicación web para la autenticación o autorización básicas, ni para autenticar solicitudes con Microsoft Graph. Es posible llamar de forma segura a las API de bajada solo con el módulo de autenticación y autorización de App Service habilitado.

Sin embargo, este módulo está diseñado para escenarios de autenticación más básicos. Para escenarios más complejos (control de notificaciones personalizadas, por ejemplo), necesita el paquete @azure/identity. Hay un poco más de trabajo de configuración al principio, pero el paquete @azure/identity se puede ejecutar junto con el módulo de autenticación y autorización de App Service. Más adelante, cuando la aplicación web necesite trabajar con escenarios más complejos, puede deshabilitar el módulo de autenticación y autorización de App Service y @azure/identity ya formará parte de la aplicació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 @azure/identity @microsoft/microsoft-graph-client

Configuración de la informació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
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
}

Llamada a Microsoft Graph en nombre de la aplicación

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.

// graphController.js

const graphHelper = require('../utils/graphHelper');
const { DefaultAzureCredential } = require("@azure/identity");

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

    const defaultAzureCredential = new DefaultAzureCredential();
    
    try {
        // get app's access token scoped to Microsoft Graph
        const tokenResponse = await defaultAzureCredential.getToken("https://graph.microsoft.com/.default");

        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(tokenResponse.token);

        // return profiles of users in Graph
        const users = await graphClient
            .api('/users')
            .get();

        res.render('users', { user: req.session.user, users: users });   
    } 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 ya ha terminado con este tutorial y no necesita la aplicación web ni los recursos asociados, elimine los recursos que creó.

Eliminar el grupo de recursos

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

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.

Pasos siguientes

En este tutorial, ha aprendido a:

  • Crear una identidad administrada asignada por el sistema en una aplicación web.
  • Agregar permisos de Microsoft Graph API a una identidad administrada.
  • Llamar a Microsoft Graph desde una aplicación web mediante identidades administradas.

Aprenda a conectar una aplicación de .NET Core o aplicación de Node.js a una base de datos.