Partage via

Migrer une application monopage JavaScript de l’octroi implicite vers le flux de code d’autorisation

  • Article

La bibliothèque d’authentification Microsoft pour JavaScript (MSAL.js) v2.0 offre une prise en charge du flux de code d’autorisation avec PKCE et CORS pour les applications monopages sur la plateforme d’identités Microsoft. Effectuez les étapes décrites dans les sections ci-dessous pour migrer votre application MSAL.js 1.x utilisant l’octroi implicite vers MSAL.js 2.0+ (nommé 2.x dans la suite de cet article) et le flux de code d’authentification.

MSAL.js 2.x offre une amélioration par rapport à MSAL.js 1.x en prenant en charge le flux de code d’autorisation dans le navigateur au lieu du flux d’octroi implicite. MSAL.js 2.x ne prend PAS en charge le flux implicite.

Étapes de la migration

Pour mettre à jour votre application vers MSAL.js 2.x et le flux de code d’authentification, trois étapes principales sont nécessaires :

  1. Basculer vos URI de redirection d’inscription d’application de la plateforme web vers la plateforme Application monopage
  2. Mettre à jour votre code de MSAL.js 1.x vers la version 2.x
  3. Désactiver l’octroi implicite dans votre inscription d’application quand toutes les applications qui partagent l’inscription ont été mises à jour vers MSAL.js 2.x et le flux de code d’authentification

Les sections suivantes décrivent en détail chaque étape.

Basculer les URI de redirection vers la plateforme SPA

Conseil

Les étapes décrites dans cet article peuvent varier légèrement en fonction du portail de départ.

Si vous souhaitez continuer à utiliser votre inscription d’application existante pour vos applications, utilisez le centre d’administration Microsoft Entra pour mettre à jour les URI de redirection de l’inscription vers la plateforme SPA. Cela active le flux de code d’autorisation avec prise en charge de PKCE et CORS pour les applications qui utilisent l’inscription (vous devez quand même mettre à jour le code de votre application vers MSAL.js v2.x).

Effectuez ces étapes pour les inscriptions d’applications qui sont actuellement configurées avec des URI de redirection de plateforme web :

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

  2. Accédez à Identité>Applications>Inscriptions d’applications, sélectionnez votre application, puis sélectionnez Authentification.

  3. Dans la vignette de plateforme web sous URI de redirection, sélectionnez la bannière d’avertissement indiquant que vous devez migrer vos URI.

    Implicit flow warning banner on web app tile in Azure portal

  4. Sélectionnez uniquement les URI de redirection dont les applications utiliseront MSAL.js 2.x, puis sélectionnez Configurer.

    Select redirect URI pane in SPA pane in Azure portal

Ces URI de redirection doivent maintenant apparaître dans la vignette de plateforme Application monopage, indiquant que la prise en charge de CORS avec le flux de code d’autorisation et PKCE est activée pour ces URI.

Single-page application tile in app registration in Azure portal

Vous pouvez également créer une inscription d’application au lieu de mettre à jour les URI de redirection dans votre inscription existante.

Mettre à jour votre code vers MSAL.js 2.x

Dans MSAL 1.x, vous avez créé une instance d’application en initialisant un UserAgentApplication comme suit :

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

Dans MSAL 2.x, vous devez à la place initialiser une [PublicClientApplication][msal-js-publicclientapplication] :

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

Pour obtenir une vue d’ensemble complète de l’ajout de MSAL 2.x à votre application, consultez Tutoriel : Connecter les utilisateurs et appeler l’API Microsoft Graph à partir d’une application monopage (SPA) JavaScript à l’aide du flux de code d’authentification.

Pour connaître les modifications supplémentaires que vous devrez peut-être apporter à votre code, consultez le guide de migration sur GitHub.

Désactiver les paramètres d’octroi implicite

Une fois que vous avez mis à jour toutes vos applications de production qui utilisent cette inscription d’application et son ID client vers MSAL 2.x et le flux de code d’autorisation, vous devez désactiver les paramètres d’octroi implicite sous le menu Authentification dans l’inscription d’application.

Quand vous désactivez les paramètres d’octroi implicite dans l’inscription d’application, le flux implicite est désactivé pour toutes les applications utilisant l’inscription et son ID client.

Ne désactivez pas le flux d’octroi implicite avant d’avoir mis à jour toutes vos applications vers MSAL.js 2.x et la [PublicClientApplication][msal-js-publicclientapplication].

Étapes suivantes