Exercice : Intégrer une application web Next.js avec Azure AD

25 minutes

Cet exercice vous guide tout au long du processus de configuration d’une application simple basée sur Next.js qui s’intègre à Microsoft Entra ID.

Dans cet exercice, vous allez :

Inscrire une application Microsoft Entra.
Implémenter une application Next.js simple, intégrée à Microsoft Entra.
Valider l’intégration Microsoft Entra de l’application Next.js.

Prérequis

Pour effectuer cet exercice, vous aurez besoin des éléments suivants :

Un abonnement Azure.
Un compte Microsoft ou un compte Microsoft Entra disposant du rôle Administrateur général pour le locataire Microsoft Entra qui est associé à l’abonnement Azure, et disposant du rôle Propriétaire ou Contributeur dans l’abonnement Azure.
Avoir terminé le premier et le deuxième exercice de ce module.
Un ordinateur sur lequel vous avez installé, ou vous pouvez installer Node.js et Git.

Notes

Pour plus d’informations sur l’installation de Node.js, consultez la rubrique Téléchargements de Node.js. Pour plus d’informations sur l’installation de Git, consultez la rubrique Téléchargements de Git. Installez les deux avant de commencer cet exercice.

Inscrire une application avec Microsoft Entra ID

Pour implémenter une application Next.js d’exemple utilisant l’authentification Microsoft Entra afin d’accéder à une base de données Azure Database pour PostgreSQL, vous devez auparavant créer un objet d’application Microsoft Entra et le principal de sécurité correspondant. Cela permet à l’application Next.js d’emprunter l’identité des utilisateurs Microsoft Entra lors de l’accès aux objets de base de données.

Si nécessaire, lancez un navigateur web, accédez au Portail Azure et connectez-vous pour accéder à l’abonnement Azure que vous utiliserez dans ce module.
Utilisez la zone de texte Rechercher des ressources, des services et des documents pour rechercher Microsoft Entra ID, puis, dans la liste des résultats, sélectionnez Microsoft Entra ID.
Dans le volet Microsoft Entra ID, dans la section Gérer du menu vertical, sélectionnez Inscriptions d’applications.
Dans le volet Inscriptions d’applications, sélectionnez + nouvelle inscription.
Dans le volet Inscrire une application, dans la zone de texte Nom, entrez cna-nextjs-app.
Dans la section Types de comptes pris en charge, vérifiez que l’option Comptes dans cet annuaire organisationnel uniquement (répertoire par défaut uniquement - locataire unique) est sélectionnée. Dans la section URI de redirection (facultatif), définissez l’entrée Application monopage (SPA) sur http://localhost:3000, puis sélectionnez Inscrire.

Remarque

Vous pouvez configurer la prise en charge de l’architecture multi-locataire pour vos applications Microsoft Entra inscrites. Toutefois, la couverture détaillée de cette prise en charge n’entre pas dans le cadre de ce module.

Notes

Une fois que vous avez déployé votre application, vous devez modifier la valeur de l’URI de redirection (facultatif) pour refléter son URL réelle.
Dans le volet cna-nextjs-app, passez en revue les paramètres de résultats et enregistrez les valeurs ID d’application (client) et les propriétés de l’ID de répertoire (locataire).
Sur le volet cna-nextjs-app, accédez à la section Gérer dans le menu vertical et sélectionnez Autorisations d’API.
Dans le volet cna-nextjs-app | Autorisations d’API, sélectionnez + Ajouter une autorisation. Dans le volet Demander une autorisation d’API, sélectionnez l’onglet API utilisées par mon organisation, dans la zone de recherche, entrez Azure OSSRDBMS Database, puis sélectionnez Azure OSSRDBMS Database dans la liste des résultats.
Dans le volet Demander une autorisation d’API, sélectionnez Autorisations déléguées, activez la case à cocher user_impersonation, puis sélectionnez Ajouter des autorisations.
Revenez dans le volet cna-nextjs-app | Autorisations d’API, sélectionnez Accorder le consentement de l’administrateur pour le répertoire par défaut et, quand vous êtes invité à confirmer, sélectionnez Oui.
Dans le volet cna-nextjs-app | Autorisations d’API, vérifiez que les autorisations ont bien été accordées.

Implémenter une application Next.js simple, intégrée à Microsoft Entra

Une fois l’application inscrite dans le locataire Microsoft Entra, vous pouvez poursuivre son implémentation. Pour simplifier votre travail, vous allez cloner un référentiel GitHub contenant un exemple de code Next.js et le personnaliser pour l’intégrer à votre locataire Microsoft Entra.

Sur votre ordinateur local, démarrez l’invite de commandes Node.js.

Notes

Veillez à l’exécuter à l’aide de l’installation locale de Node.js sur votre ordinateur.
Via l’invite de commandes Node.js, exécutez la commande suivante pour cloner le référentiel GitHub contenant l’exemple de code d’application Next.js que vous allez utiliser dans cet exercice :
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
Exécutez la commande suivante pour basculer vers le répertoire qui héberge le clone du référentiel GitHub :
```
cd ./mslearn-cloud-native-apps/m06u07
```

Utilisez votre éditeur de texte favori pour examiner le contenu du fichier ./src/App.jsx, qui récupère un jeton d’accès Microsoft Entra ID pour une application mono-page :

Remarque

L’exemple de code est basé sur le Didactici : connecter les utilisateurs et appelez l’API Microsoft Graph à partir d’une application monopage (SPA) React à l’aide du code d’authentification unique.

Le fichier ./src/App.jsx contient les éléments suivants :

import React, { useState } from "react";
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { loginRequest } from "./authConfig";
import { PageLayout } from "./components/PageLayout";
import { ProfileData } from "./components/ProfileData";
import { callMsGraph } from "./graph";
import Button from "react-bootstrap/Button";
import "./styles/App.css";

var accessToken = '';

/**
 * Renders information about the signed-in user or a button to retrieve data about the user
 */
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            accessToken = response.accessToken;
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        });
    }

    return (
        <>
            <h5 className="card-title">Welcome {accounts[0].name}</h5>
            {graphData ? 
                <ProfileData graphData={graphData} />
                :
                <Button variant="secondary" onClick={RequestProfileData}>Request Profile Information</Button>
            }
            <p>{accessToken}</p>
        </>
    );
};

/**
 * If a user is authenticated the ProfileContent component above is rendered. Otherwise, a message indicating a user is not authenticated is rendered.
 */
const MainContent = () => {    
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5 className="card-title">Please sign-in to review your profile information.</h5>
                </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <MainContent />
        </PageLayout>
    );
}

Utilisez votre éditeur de texte préféré pour examiner le contenu du fichier ./src/authConfig.js, qui stocke les informations requises pour identifier l’application Microsoft Entra cible que vous avez inscrite au cours de la tâche précédente de cet exercice.

Le fichier ./src/authConfig.js contient les éléments suivants :

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */
export const msalConfig = {
    auth: {
        clientId: "<client_ID>",
        authority: "https://login.microsoftonline.com/<tenant_ID>",
        redirectUri: "http://localhost:3000"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {	
        loggerOptions: {	
            loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }	
                switch (level) {		
                    case LogLevel.Error:		
                        console.error(message);		
                        return;		
                    case LogLevel.Info:		
                        console.info(message);		
                        return;		
                    case LogLevel.Verbose:		
                        console.debug(message);		
                        return;		
                    case LogLevel.Warning:		
                        console.warn(message);		
                        return;		
                }	
            }	
        }	
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://learn.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, review:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};

Dans l’éditeur de texte affichant le contenu du fichier ./src/authConfig.js, remplacez les espaces réservés <client_ID> et <tenant_ID> par leurs valeurs respectives, que vous avez identifiées au cours de la tâche précédente de cet exercice.
Dans l’éditeur de texte affichant le contenu du fichier ./src/authConfig.js, remplacez l’entrée scopes: ["User.Read"] par scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"].
Enregistrez les modifications et fermez le fichier.

Valider l’intégration Microsoft Entra de l’application Next.js

Vous êtes prêt à valider l’intégration de l’application dans Microsoft Entra. Vous pourriez la conteneuriser, mais pour des raisons de simplicité, vous allez l’exécuter localement sur votre ordinateur, au sein de l’environnement de développement Node.js. Cela vous permettra de valider rapidement ses fonctionnalités et de vérifier que sa conteneurisation est une option viable.

Via l’invite de commandes Node.js, exécutez la commande suivante pour installer les packages de dépendances de l’exemple d’application Next.js :
```
npm install
```
Notes

Attendez la fin du processus d’installation.
Via l’invite de commandes Node.js, exécutez la commande suivante pour générer l’application Next.js :
```
npm run-script build
```
Notes

Attendez la fin du processus de génération.
Via l’invite de commandes Node.js, exécutez la commande suivante pour démarrer l’application Next.js :
```
npm run-script start
```
Notes

Une fenêtre de navigateur s’ouvre automatiquement et affiche la page Bienvenue dans la bibliothèque d’authentification Microsoft pour le démarrage rapide de JavaScript – React.
Fermez la fenêtre du navigateur web qui affiche Bienvenue dans la bibliothèque d’authentification Microsoft pour le démarrage rapide de JavaScript – React, ouvrez une autre fenêtre de navigateur web en mode Incognito/InPrivate, puis accédez à l’URL http://localhost:3000.
Sur la page Bienvenue dans la bibliothèque d’authentification Microsoft pour le démarrage rapide de JavaScript – React, sélectionnez Se connecter, puis Se connecter à l’aide de la fenêtre contextuelle dans le menu déroulant.
Lorsque vous êtes invité à vous connecter, authentifiez-vous en utilisant les informations adatumuser1 userPrincipalName et le mot de passe Pa55w.rd1234.

Remarque

Vous avez créé ce compte d’utilisateur dans le premier exercice de ce module.
Sur la page Bienvenue dans la bibliothèque d’authentification Microsoft pour le démarrage rapide de JavaScript – React, sélectionnez Demander des informations de profil.

Remarque

Vérifiez que la sortie comprend l’adresse e-mail, l’ID et le jeton d’accès du compte d’utilisateur Microsoft Entra adatumuser1.
Ouvrez un autre onglet dans la même fenêtre de navigateur web et accédez à l’application web que vous avez déployée dans l’exercice précédent.

Notes

L’URL doit avoir le format suivant : https://<webapp_name>.azurewebsites.net/auth

Notes

Vérifiez que la page web résultante affiche les données d’inventaire du premier locataire.

Notes

Si la tentative initiale échoue, réessayez.
Fermez la fenêtre du navigateur web en mode Incognito/InPrivate.

Notes

À présent, vous allez répéter la même procédure en tant que contosouser1 et vérifier que vous pouvez également accéder aux données d’inventaire et afficher un ensemble d’enregistrements correspondant au deuxième locataire.
Ouvrez une autre fenêtre de navigateur web en mode Incognito/InPrivate, puis accédez à l’URL http://localhost:3000.
Sur la page Bienvenue dans la bibliothèque d’authentification Microsoft pour le démarrage rapide de JavaScript – React, sélectionnez Se connecter, puis Se connecter à l’aide de la fenêtre contextuelle dans le menu déroulant.
Lorsque vous êtes invité à vous connecter, authentifiez-vous en utilisant les informations contosouser1 userPrincipalName et le mot de passe Pa55w.rd1234.

Remarque

Vous avez créé ce compte d’utilisateur dans le premier exercice de ce module.

Notes

Si vous y êtes invité, acceptez la requête d’accès et modifiez le mot de passe du compte contosouser1.
Sur la page Bienvenue dans la bibliothèque d’authentification Microsoft pour le démarrage rapide de JavaScript – React, sélectionnez Demander des informations de profil.

Remarque

Vérifiez que la sortie comprend l’adresse e-mail, l’ID et le jeton d’accès du compte d’utilisateur Microsoft Entra contosouser1.
Ouvrez un autre onglet dans la même fenêtre de navigateur web et accédez à l’application web que vous avez déployée dans l’exercice précédent.

Notes

Vérifiez que la page web résultante affiche les données d’inventaire du deuxième locataire.

Résultats

Félicitations ! Vous avez terminé le troisième exercice de ce module. Dans cet exercice, vous avez implémenté une application Next.js intégrée à AD simple et vérifié sa fonctionnalité.

Nettoyer les ressources

Pour éviter des frais inutiles liés à l’utilisation des ressources Azure, supprimez les groupes de ressources postgresql-db-RG et cna-aadexpress-RG que vous avez créés lors du précédent l’exercice. Pour cela, accédez au volet de chaque groupe de ressources dans le Portail Azure, puis sélectionnez l’entrée Supprimer le groupe de ressources dans la barre d’outils. Dans la zone de texte TAPEZ LE NOM DU GROUPE DE RESSOURCES, entrez le nom du groupe de ressources, puis sélectionnez Supprimer.

Continuer