Inscrire une application à page unique dans Azure Active Directory B2C

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Avant que vos applications puissent interagir avec Azure Active Directory B2C (Azure AD B2C), elles doivent être inscrites dans un locataire que vous gérez. Ce guide vous montre comment inscrire une application monopage (« SPA ») à l’aide du Portail Azure.

Vue d’ensemble des options d’authentification

De nombreuses applications web modernes sont créées en tant qu’applications monopage côté client (« SPAs »). Les développeurs les écrivent à l’aide de JavaScript ou d’une infrastructure SPA telle que Angular, Vue et React. Ces applications s’exécutent sur un navigateur web et présentent des caractéristiques d’authentification différentes de celles des applications web classiques côté serveur.

Azure AD B2C fournit deux options pour permettre aux applications monopage de connecter des utilisateurs et d’obtenir des jetons pour accéder aux services principaux ou aux API web :

Flux de code d’autorisation (avec PKCE)

Le flux de code d’autorisation OAuth 2.0 (avec PKCE) permet à l’application d’échanger un code d’autorisation pour les jetons d’ID afin de représenter l’utilisateur authentifié et les jetons d’accès nécessaires pour appeler des API protégées. En outre, il retourne des jetons d’actualisation qui fournissent un accès à long terme aux ressources pour le compte des utilisateurs sans nécessiter d’interaction avec ces utilisateurs.

Il s’agit de l’approche recommandée . L’utilisation de jetons d’actualisation à durée de vie limitée aide votre application à s’adapter aux limitations de confidentialité des cookies de navigateur modernes, telles que Safari ITP.

Pour tirer parti de ce flux, votre application peut utiliser une bibliothèque d’authentification qui la prend en charge, comme MSAL.js.

Octroi de flux implicite

Certaines bibliothèques, comme MSAL.js 1.x, prennent uniquement en charge le flux d’octroi implicite ou vos applications sont implémentées pour utiliser le flux implicite. Dans ces cas, Azure AD B2C prend en charge le flux implicite OAuth 2.0. Le flux d’octroi implicite permet à l’application d’obtenir des jetons d’ID et d’accès à partir du point de terminaison d’autorisation. Contrairement au flux de code d’autorisation, le flux d’octroi implicite ne retourne pas de jeton d’actualisation.

Ce flux d’authentification n’inclut pas de scénarios d’application qui utilisent des infrastructures JavaScript multiplateformes telles que Electron et React-Native. Ces scénarios nécessitent d’autres fonctionnalités d’interaction avec les plateformes natives.

Conditions préalables

• Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

• Si vous n’avez pas de locataire Azure AD B2C, créez-en un maintenant. Vous pouvez utiliser un locataire Azure AD B2C existant.

Inscrire l’application SPA

1. Connectez-vous au portail Azure.

2. Si vous avez accès à plusieurs tenants (locataires), sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant Azure AD B2C à partir du menu Annuaires + abonnements.

3. Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.

4. Sélectionnez Inscriptions d'applications, puis sélectionnez Nouvelle inscription.

5. Entrez un nom pour l’application. Par exemple, spaapp1.

6. Sous Types de comptes pris en charge, sélectionnez Comptes dans n’importe quel fournisseur d’identité ou répertoire organisationnel (pour authentifier les utilisateurs avec des flux d’utilisateurs)

7. Sous URI de redirection, sélectionnez Application monopage (SPA), puis entrez https://jwt.ms dans la zone de texte URL.

   L’URI de redirection est le point de terminaison vers lequel le serveur d’autorisation (Azure AD B2C, dans ce cas) envoie l’utilisateur une fois son interaction avec l’utilisateur terminée. En outre, le point de terminaison de l’URI de redirection reçoit le jeton d’accès ou le code d’autorisation lors de l’autorisation réussie. Dans une application de production, il s’agit généralement d’un point de terminaison accessible publiquement dans lequel votre application s’exécute, comme https://contoso.com/auth-response. À des fins de test comme ce guide, vous pouvez le définir sur https://jwt.ms, une application web appartenant à Microsoft qui affiche le contenu décodé d’un jeton (le contenu du jeton ne quitte jamais votre navigateur). Pendant le développement d’applications, vous pouvez ajouter le point de terminaison où votre application écoute localement, par exemple http://localhost:5000. Vous pouvez ajouter des URI de redirection à vos applications inscrites à tout moment et les modifier.

   Les restrictions suivantes s’appliquent aux URI de redirection :

   • L’URL de réponse doit commencer par le schéma https, sauf si vous utilisez localhost.
   • L’URL de réponse respecte la casse. Sa casse doit correspondre à celle du chemin d’URL de votre application en cours d’exécution. Par exemple, si votre application inclut dans le cadre de son chemin d’accès .../abc/response-oidc, ne spécifiez .../ABC/response-oidc pas dans l’URL de réponse. Comme le navigateur web considère que les chemins respectent la casse, les cookies associés à .../abc/response-oidc peuvent être exclus s’ils sont redirigés vers l’URL .../ABC/response-oidc qui ne correspond pas à la casse.

8. Sous Permissions, cochez la case Accorder le consentement de l’administrateur aux autorisations openid et offline_access.

9. Sélectionnez Inscrire.

Activer le flux d’octroi implicite

Vous pouvez activer le flux d’octroi implicite pour deux raisons, lorsque vous utilisez MSAL.js version 1.3 ou antérieure ou lorsque vous utilisez une inscription d’application pour tester un flux utilisateur à des fins de test.

Procédez comme suit pour activer le flux d’octroi implicite pour votre application :

1. Sélectionnez l’inscription d’application que vous avez créée.

2. Sous Gérer, sélectionnez Authentification.

3. Sous Flux d’octroi implicite et hybrides, activez les cases à cocher Jetons d’accès (utilisés pour les flux implicites) et Jetons d’ID (utilisés pour les flux implicites et hybrides).

4. Cliquez sur Enregistrer.

Remarque

Si votre application utilise MSAL.js 2.0 ou version ultérieure, n’activez pas l’octroi de flux implicite, car MSAL.js 2.0+ prend en charge le flux de code d’autorisation OAuth 2.0 (avec PKCE). Si vous activez l’octroi implicite pour tester un flux utilisateur, veillez à désactiver les paramètres de flux d’octroi implicite avant de déployer votre application en production.

Migrer à partir du flux d’octroi implicite

Si vous avez une application existante qui utilise le flux implicite, nous vous recommandons de migrer pour utiliser le flux de code d’autorisation avec PKCE à l’aide d’une infrastructure qui la prend en charge, telle queMSAL.js 2.0+.

Lorsque votre application monopage de production, représentée par une inscription d’application commence à utiliser le flux de code d’autorisation, désactivez les paramètres du flux d’octroi implicite comme suit :

1. Dans le menu de gauche, sous Gérer, sélectionnez Authentification.
2. Sous Octroi implicite, décochez les deux cases Jetons d’accès et Jetons d’ID.
3. Cliquez sur Enregistrer.

Les applications utilisant le flux implicite peuvent continuer à fonctionner si vous laissez le flux implicite activé (activé).

Étapes suivantes

Découvrez comment créer des flux utilisateur dans Azure Active Directory B2C.