Partager via

Tutoriel : Transmettre l’authentification de App Service via l’API back-end à Microsoft Graph

  • Article

Découvrez comment créer et configurer un service d’application back-end pour accepter les informations d’identification utilisateur d’une application front-end, puis échanger ces informations d’identification contre un service Azure en aval. Cela permet à un utilisateur de se connecter à un service App service front-end, de transmettre ses informations d’identification à un service d’application back-end, puis d’accéder à un service Azure avec la même identité.

Dans ce tutoriel, vous allez apprendre à :

  • Configurer l’application d’authentification back-end pour fournir un jeton étendu au service Azure en aval
  • Utilisez du code JavaScript pour échanger le jeton d’accès de l’utilisateur connecté contre un nouveau jeton pour le service en aval.
  • Utilisez du code JavaScript pour accéder au service en aval.

Prérequis

Avant de commencer ce tutoriel, suivez le précédent, Accéder à Microsoft Graph à partir d’une application JavaScript sécurisée en tant qu’utilisateur, mais ne supprimez pas les ressources à la fin du tutoriel. Ce tutoriel suppose que vous disposez des deux services d’application et de leurs applications d’authentification correspondantes.

Le tutoriel précédent utilisait Azure Cloud Shell comme interpréteur de commandes pour Azure CLI. Ce tutoriel poursuit cette utilisation.

Architecture

Le tutoriel montre comment transmettre les informations d’identification de l’utilisateur fournies par l’application front-end à l’application back-end, puis à un service Azure. Dans ce tutoriel, le service en aval est Microsoft Graph. Les informations d’identification de l’utilisateur sont utilisées pour obtenir son profil à partir de Microsoft Graph.

Architectural image of App Service connecting to App Service connecting to Microsoft Graph on behalf of a signed-in user.

Flux d’authentification pour qu’un utilisateur reçoive les informations Microsoft Graph dans cette architecture :

Tutoriel précédent abordé :

  1. Connectez l’utilisateur à un service d’application frontend configuré pour utiliser Active Directory comme fournisseur d’identité.
  2. Le service d’application frontend transmet le jeton de l’utilisateur au service d’application principal.
  3. L’application back-end est sécurisée pour permettre au serveur front-end d’effectuer une demande d’API. Le jeton d’accès de l’utilisateur a une audience pour l’API back-end et l’étendue de user_impersonation.
  4. L’inscription de l’application back-end a déjà le Microsoft Graph avec l’étendue User.Read. Cette valeur est ajoutée par défaut à toutes les inscriptions d’applications.
  5. À la fin du tutoriel précédent, un faux profil a été retourné à l’application front-end, car Graph n’était pas connecté.

Ce tutoriel étend l’architecture :

  1. Accordez le consentement administrateur afin de contourner l’écran de consentement de l’utilisateur pour l’application back-end.
  2. Modifiez le code de l’application pour convertir le jeton d’accès envoyé à partir de l’application front- end en jeton d’accès avec l’autorisation requise pour Microsoft Graph.
  3. Fournissez du code pour avoir un jeton d’échange d’application back-end pour le nouveau jeton avec l’étendue du service Azure en aval, comme Microsoft Graph.
  4. Fournissez du code pour que l’application back-end utilise un nouveau jeton pour accéder au service en aval en tant qu’utilisateur d’authentification actuel.
  5. Redéployez l’application back-end avec az webapp up.
  6. À la fin de ce tutoriel, un vrai profil est retourné vers l’application front-end, car Graph est connecté.

Ce tutoriel ne permet pas :

  • de modifier l’application frontend du tutoriel précédent.
  • de modifier l’autorisation d’étendue de l’application d’authentification back-end, car User.Read est ajouté par défaut à toutes les applications d’authentification.

Dans le tutoriel précédent, lorsque l’utilisateur se connectait à l’application frontend, une fenêtre contextuelle s’affichait pour demander le consentement de l’utilisateur.

Dans ce tutoriel, pour lire le profil utilisateur à partir de Microsoft Graph, l’application principale doit échanger le jeton d’accès de l’utilisateur connecté contre un nouveau jeton d’accès avec les autorisations requises pour Microsoft Graph. Étant donné que l’utilisateur n’est pas directement connecté à l’application back-end, il ne peut pas accéder à l’écran de consentement de manière interactive. Vous devez contourner ce problème en configurant l’inscription de l’application back-end dans Microsoft Entra ID pour accorder le consentement administrateur. Il s’agit d’une modification de paramètre généralement effectuée par un administrateur Active Directory.

  1. Ouvrez le Portail Azure et recherchez votre recherche pour l’App Service principal.

  2. Recherchez la section Paramètres –> Authentification.

  3. Sélectionnez le fournisseur d’identité pour accéder à l’application d’authentification.

  4. Dans l’application d’authentification, sélectionnez Gérer –> Autorisations de l’API.

  5. Sélectionnez Accorder le consentement de l’administrateur pour le répertoire par défaut.

    Screenshot of Azure portal authentication app with admin consent button highlighted.

  6. Dans la fenêtre contextuelle, sélectionnez Oui pour confirmer le consentement.

  7. Vérifiez que la colonne État indique Accordé pour le répertoire par défaut. Avec ce paramètre, l’application principale n’est plus nécessaire pour afficher un écran de consentement à l’utilisateur connecté et peut demander directement un jeton d’accès. L’utilisateur connecté a accès au paramètre d’étendue User.Read, car il s’agit de l’étendue par défaut avec laquelle l’inscription d’application est créée.

    Screenshot of Azure portal authentication app with admin consent granted in status column.

2. Installer les packages npm

Dans le tutoriel précédent, l’application back-end n’avait pas besoin de packages npm pour l’authentification, car la seule authentification a été fournie via une configuration du fournisseur d’identité dans le Portail Azure. Dans ce tutoriel, le jeton d’accès de l’utilisateur connecté pour l’API back-end doit être échangé contre un jeton d’accès avec Microsoft Graph dans son étendue. Cet échange est effectué avec deux bibliothèques, car il n’utilise plus l’authentification App Service, mais Microsoft Entra ID et MSAL.js directement.

  1. Ouvrez Azure Cloud Shell et accédez à l’application back-end de l’exemple de répertoire :

    cd js-e2e-web-app-easy-auth-app-to-app/backend

  2. Installez le package Azure MSAL npm :

    npm install @azure/msal-node

  3. Installez le package npm Microsoft Graph :

    npm install @microsoft/microsoft-graph-client

3. Ajouter du code pour échanger le jeton actuel contre le jeton Microsoft Graph

Le code source permettant d’effectuer cette étape vous est fourni. Utilisez les étapes suivantes pour l’inclure.

  1. Ouvrez le fichier ./src/server.js .

  2. Supprimez les marques de commentaire de la dépendance suivante en haut du fichier :

    import { getGraphProfile } from './with-graph/graph';

  3. Dans le même fichier, supprimez les marques de commentaire de la variable graphProfile :

    let graphProfile={};

  4. Dans le même fichier, supprimez les marques de commentaire getGraphProfile suivantes dans l’itinéraire get-profile pour obtenir le profil à partir de Microsoft Graph :

    // where did the profile come from
profileFromGraph=true;

// get the profile from Microsoft Graph
graphProfile = await getGraphProfile(accessToken);

// log the profile for debugging
console.log(`profile: ${JSON.stringify(graphProfile)}`);

  5. Enregistrez les modifications : CTRL + s.

  6. Redéployez l’application back-end :

    az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name>

4. Inspecter le code back-end pour échanger le jeton d’API back-end contre le jeton Microsoft Graph

Pour échanger le jeton d’audience de l’API back-end contre un jeton Microsoft Graph, l’application principale doit rechercher l’ID de locataire et l’utiliser dans le cadre de l’objet de configuration MSAL.js. Étant donné que l’application back-end est configurée avec Microsoft comme fournisseur d’identité, l’ID de locataire et plusieurs autres valeurs requises se trouvent déjà dans les paramètres de l’application App Service.

Le code suivant est déjà fourni pour vous dans l’exemple d’application. Vous devez comprendre pourquoi il est là et comment il fonctionne afin de pouvoir appliquer ce travail à d’autres applications qui requièrent cette fonctionnalité.

Inspecter le code pour obtenir l’ID de locataire

  1. Ouvrez le fichier ./backend/src/with-graph/auth.js .

  2. Passez en revue la fonction getTenantId().

    export function getTenantId() {

    const openIdIssuer = process.env.WEBSITE_AUTH_OPENID_ISSUER;
    const backendAppTenantId = openIdIssuer.replace(/https:\/\/sts\.windows\.net\/(.{1,36})\/v2\.0/gm, '$1');

    return backendAppTenantId;
}

  3. Cette fonction obtient l’ID de locataire actuel à partir de la variable d’environnement WEBSITE_AUTH_OPENID_ISSUER. L’ID est analysé hors de la variable avec une expression régulière.

Inspecter le code pour obtenir le jeton Graph à l’aide de MSAL.js

  1. Toujours dans le fichier ./backend/src/with-graph/auth.js, passez en revue la fonction getGraphToken().

  2. Générez l’objet de configuration MSAL.js, utilisez la configuration MSAL pour créer l’objet clientCredentialAuthority. Configurez la demande on-behalf-off. Utilisez ensuite acquireTokenOnBehalfOf pour échanger le jeton d’accès de l’API back-end contre un jeton d’accès Graph.

    // ./backend/src/auth.js
// Exchange current bearerToken for Graph API token
// Env vars were set by App Service
export async function getGraphToken(backEndAccessToken) {

    const config = {
        // MSAL configuration
        auth: {
            // the backend's authentication CLIENT ID 
            clientId: process.env.WEBSITE_AUTH_CLIENT_ID,
            // the backend's authentication CLIENT SECRET 
            clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET,
            // OAuth 2.0 authorization endpoint (v2)
            // should be: https://login.microsoftonline.com/BACKEND-TENANT-ID
            authority: `https://login.microsoftonline.com/${getTenantId()}`
        },
        // used for debugging
        system: {
            loggerOptions: {
                loggerCallback(loglevel, message, containsPii) {
                    console.log(message);
                },
                piiLoggingEnabled: true,
                logLevel: MSAL.LogLevel.Verbose,
            }
        }
    };

    const clientCredentialAuthority = new MSAL.ConfidentialClientApplication(config);

    const oboRequest = {
        oboAssertion: backEndAccessToken,
        // this scope must already exist on the backend authentication app registration 
        // and visible in resources.azure.com backend app auth config
        scopes: ["https://graph.microsoft.com/.default"]
    }

    // This example has App service validate token in runtime
    // from headers that can't be set externally

    // If you aren't using App service's authentication, 
    // you must validate your access token yourself
    // before calling this code
    try {
        const { accessToken } = await clientCredentialAuthority.acquireTokenOnBehalfOf(oboRequest);
        return accessToken;
    } catch (error) {
        console.log(`getGraphToken:error.type = ${error.type}  ${error.message}`);
    }
}

5. Inspecter le code back-end pour accéder à Microsoft Graph avec le nouveau jeton

Pour accéder à Microsoft Graph en tant qu’utilisateur connecté à l’application front-end, les modifications sont les suivantes :

  • Configuration de l’inscription de l’application Active Directory avec une autorisation d’API sur le service en aval, Microsoft Graph, avec l’étendue nécessaire de User.Read.
  • Accordez le consentement administrateur afin de contourner l’écran de consentement de l’utilisateur pour l’application back-end.
  • Modifiez le code de l’application pour convertir le jeton d’accès envoyé à partir de l’application front-end en jeton d’accès avec l’autorisation requise pour le service en aval, Microsoft Graph.

Maintenant que le code a le jeton approprié pour Microsoft Graph, utilisez-le pour créer un client sur Microsoft Graph, puis obtenir le profil de l’utilisateur.

  1. Ouvrez ./backend/src/graph.js.

  2. Dans la fonction getGraphProfile(), récupérez le jeton, puis le client authentifié à partir du jeton, puis obtenez le profil.

    // 
import graph from "@microsoft/microsoft-graph-client";
import { getGraphToken } from "./auth.js";

// Create client from token with Graph API scope
export function getAuthenticatedClient(accessToken) {
    const client = graph.Client.init({
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}
export async function getGraphProfile(accessToken) {
    // exchange current backend token for token with 
    // graph api scope
    const graphToken = await getGraphToken(accessToken);

    // use graph token to get Graph client
    const graphClient = getAuthenticatedClient(graphToken);

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

    return profile;
}

6. Tester vos modifications

  1. Utilisez le site web front-end dans un navigateur. L’URL se présente au format suivant : https://<front-end-app-name>.azurewebsites.net/ Vous devrez peut-être actualiser votre jeton s’il a expiré.

  2. Sélectionnez Get user's profile. Cela transmet votre authentification dans le jeton du porteur à l’application back-end.

  3. Le back-end répond avec le profil Microsoft Graph réel pour votre compte.

    Screenshot of web browser showing frontend application after successfully getting real profile from backend app.

7. Nettoyage

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources.

  1. Supprimez le groupe de ressources en exécutant la commande suivante dans Cloud Shell. L’exécution de cette commande peut prendre une minute.

    az group delete --name myAuthResourceGroup

  2. Utilisez l’ID client des applications d’authentification, que vous avez précédemment trouvé et noté dans les sections Enable authentication and authorization des applications back-end et front-end.

  3. Supprimez les inscriptions d’applications pour les applications front-end et back-end.

    # delete app - do this for both frontend and backend client ids
az ad app delete <client-id>

Forum aux questions

Je reçois une erreur 80049217. Qu’est-ce que ça signifie ?

L’erreur CompactToken parsing failed with error code: 80049217 indique que l’App service du back-end n’est pas autorisé à retourner le jeton Microsoft Graph. Cette erreur est due au fait que l’autorisation d’inscription de l’application User.Read est manquante.

Je reçois une erreur AADSTS65001. Qu’est-ce que ça signifie ?

L’erreur AADSTS65001: The user or administrator has not consented to use the application with ID \<backend-authentication-id>. Send an interactive authorization request for this user and resource indique que l’application d’authentification back-end n’a pas obtenu le consentement administrateur. Étant donné que l’erreur s’affiche dans le journal de l’application back-end, l’application front-end ne peut pas indiquer à l’utilisateur pourquoi il n’a pas vu son profil dans l’application front-end.

Comment faire se connecter à un autre service Azure en aval en tant qu’utilisateur ?

Ce tutoriel montre une application API authentifiée auprès de Microsoft Graph. Toutefois, les mêmes étapes générales peuvent être appliquées pour accéder à n’importe quel service Azure pour le compte de l’utilisateur.

  1. Aucune modification apportée à l’application front-end. Seules les modifications apportées à l’inscription de l’application d’authentification du back-end et au code source de l’application back-end.
  2. Échangez le jeton de l’utilisateur étendu à l’API back-end contre un jeton au service en aval auquel vous souhaitez accéder.
  3. Utilisez le jeton dans le Kit de développement logiciel (SDK) du service en aval pour créer le client.
  4. Utilisez le client en aval pour accéder aux fonctionnalités du service.

Étapes suivantes