Démarrage rapide : connectez les utilisateurs dans une application monopage (SPA) et appelez l'API Microsoft Graph à l'aide de React

  • Article

Ce guide de démarrage rapide utilise un exemple d’application React monopage (SPA) pour vous montrer comment connecter des utiliser en utilisant le flux de code d’autorisation avec PKCE (Clé de preuve pour l’échange de code). L’exemple utilise la bibliothèque d’authentification Microsoft pour JavaScript pour gérer l’authentification.

Prérequis

Inscrire l’application et enregistrer les identificateurs

Pour terminer l’inscription, indiquez le nom de l’application, spécifiez les types de comptes pris en charge et ajoutez un URI de redirection. Une fois l’inscription terminée, le volet Vue d’ensemble de l’application affiche les identificateurs nécessaires dans le code source de l’application.

  1. Connectez-vous au centre d’administration Microsoft Entra.

  2. Si vous avez accès à plusieurs tenants, utilisez l’icône Paramètres dans le menu supérieur pour basculer vers le tenant dans lequel vous voulez inscrire l’application à partir du menu Répertoires + abonnements.

  3. Accédez à Identité>Applications>Inscriptions d’applications, puis sélectionnez Nouvelle inscription.

  4. Saisissez un nom pour l'application, par exemple identity-client-spa.

  5. Pour les Types de comptes pris en charge, sélectionnez Comptes dans cet annuaire organisationnel. Pour plus d’informations sur les différents types de comptes, sélectionnez l’option M’aider à choisir.

  6. Sélectionnez Inscrire.

    Capture d’écran illustrant la saisie d’un nom et la sélection d’un type de compte dans le centre d’administration Microsoft Entra.

  7. Le Vue d’ensemble de l’application s’affiche une fois l’inscription terminée. Enregistrez l’ID du répertoire (locataire) et l’ID d’application (client) à utiliser dans le code source de votre application.

    Capture d’écran illustrant les valeurs d’identificateurs sur la page Vue d’ensemble du centre d’administration Microsoft Entra.

    Remarque

    Il est possible de modifier les Types de comptes pris en charge. Pour cela, reportez-vous à Modifier les comptes pris en charge par une application.

Ajouter un URI de redirection de plateforme

Pour spécifier le type de votre application dans votre inscription d’application, suivez ces étapes :

  1. Sous Gérer, sélectionnez Authentification.
  2. Dans la page Configurations de plateforme, sélectionnez Ajouter une plateforme, puis l’option SPA.
  3. Pour les URI de redirection, entrez http://localhost:3000.
  4. Sélectionnez Configurer pour enregistrer vos modifications.

Cloner ou télécharger l’exemple d’application

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger sous la forme d’un fichier .zip.

  • Pour cloner l’exemple, ouvrez une invite de commandes, accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Téléchargez le fichier .zip. Extrayez-la dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères.

Configurer le projet

  1. Dans votre IDE, ouvrez le dossier de projet ms-identity-docs-code-javascript/react-spa contenant l’exemple.

  2. Ouvrez src/authConfig.js et mettez à jour les valeurs suivantes avec les informations enregistrées précédemment dans le centre d’administration.

    /*
 * 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: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        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;
                    default:
                        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://docs.microsoft.com/en-us/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, see:
 * 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",
};
    • clientId – Identificateur de l’application, également appelé client. Remplacez le texte entre guillemets par la valeur ID d’application (client) enregistrée précédemment.
    • authority : L’autorité est une URL indiquant un annuaire dont la bibliothèque d’authentification Microsoft peut demander des jetons. Remplacez Enter_the_Tenant_Info_Here par la valeur d’ID de répertoire (locataire) enregistrée précédemment.
    • redirectUri : URI de redirection de l’application. Si nécessaire, remplacez le texte entre guillemets par l’URI de redirection enregistré précédemment.

Exécuter l’application et se connecter

Exécutez le projet avec un serveur web en utilisant Node.js :

  1. Pour démarrer le serveur, exécutez les commandes suivantes dans le répertoire du projet :

    npm install
npm start

  2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:3000, et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

  3. Effectuez les étapes et entrez les informations nécessaires pour vous connecter avec votre compte Microsoft. Une adresse e-mail vous sera demandée afin qu’un code secret unique puisse vous être envoyé. Entrez le code lorsque vous y êtes invité.

  4. L’application demande l’autorisation de conserver l’accès aux données à laquelle vous lui avez donné accès, et de vous connecter et de lire votre profil. Cliquez sur Accepter. La capture d’écran suivante s’affiche, indiquant que vous êtes connecté à l’application et que vous avez accédé aux détails de votre profil à partir de l’API Microsoft Graph.

    Capture d’écran de l’application JavaScript montrant les résultats de l’appel d’API.

Se déconnecter de l’application

  1. Recherchez le lien Se déconnecter en haut à droite de la page et sélectionnez-le.
  2. Vous serez invité à choisir un compte à partir duquel vous souhaitez vous déconnecter. Sélectionnez le compte que vous avez utilisé pour vous connecter.

Un message s’affiche, indiquant que vous vous êtes déconnecté. Vous pouvez maintenant fermer la fenêtre du navigateur.

Contenu associé