Inscrivez une application monopage dans Azure Active Directory B2C

  • Article

Pour 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 monopages (« SPA ») côté client. Les développeurs les écrivent à l’aide de JavaScript ou d’un framework d’application monopage, comme Angular, Vue ou 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 propose deux options qui permettent aux applications monopages d’effectuer la connexion des utilisateurs, et d’obtenir des jetons pour accéder aux services back-end 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 obtenir des jetons d’ID afin de représenter l’utilisateur authentifié et des jetons d’accès nécessaires pour appeler des API protégées. De plus, il retourne des jetons d’actualisation qui fournissent à votre application un accès à long terme à des ressources au nom d’utilisateurs sans nécessiter l’intervention de ces utilisateurs.

Il s’agit de l’approche recommandée. Le fait d’avoir des jetons d’actualisation à durée de vie limitée permet à votre application de s’adapter aux restrictions de confidentialité des cookies des navigateurs modernes, tels que Safari ITP.

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

Single-page applications-auth

Octroi de flux implicite

Certaines bibliothèques, comme MSAL.js 1.x, prennent uniquement en charge le flux d’octroi implicite. Ou votre application est implémentée 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. Contrairement au flux de code d’autorisation, le flux d’octroi implicite ne retourne pas de jeton d’actualisation.

Single-page applications-implicit

Ce flux d’authentification n’inclut pas de scénarios d’application utilisant des frameworks JavaScript multiplateformes, tels qu’Electron et React-Native. Ces scénarios demandent d’autres fonctionnalités pour interagir avec les plateformes natives.

Prérequis

  • 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 locataires, sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre locataire 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 Nouvelle inscription.

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

  6. Sous Types de comptes pris en charge, sélectionnez Comptes dans un fournisseur d’identité ou annuaire 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 de l’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. Par ailleurs, le point de terminaison d’URI de redirection reçoit le jeton d’accès ou le code d’autorisation quand une autorisation réussit. 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 dans ce guide, vous pouvez le définir sur https://jwt.ms, une application web Microsoft qui affiche le contenu décodé d’un jeton (le contenu du jeton ne quitte jamais votre navigateur). Pendant le développement d’une application, vous pouvez ajouter le point de terminaison sur lequel votre application écoute localement, comme 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 en cas d’utilisation de 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 comprend .../abc/response-oidc dans son chemin d’accès, ne spécifiez pas .../ABC/response-oidc dans l’URL de réponse. Étant donné que 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 Autorisations, activez la case à cocher Accorder le consentement administrateur aux autorisations openid et offline_access.

  9. Sélectionnez Inscription.

Activer le flux implicite

Si vous utilisez MSAL.js 1.3 ou une version antérieure avec le flux d’octroi implicite dans votre application monopage, ou si vous configurez l’application https://jwt.ms/ pour tester un flux d’utilisateur ou une stratégie personnalisée, vous devez activer le flux d’octroi implicite dans l’inscription de l’application :

  1. Dans le menu de gauche, sous Gérer, sélectionnez Authentification.

  2. 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).

  3. Sélectionnez Enregistrer.

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 avec PKCE.

Migrer à partir du flux implicite

Si vous avez une application qui se sert du flux implicite, nous vous recommandons de migrer pour utiliser le flux de code d’autorisation, à l’aide d’un framework qui le prend en charge comme MSAL.js 2.0.x.

Lorsque votre application monopage de production, représentées 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. Sélectionnez Enregistrer.

Il se peut que des applications utilisant le flux implicite continuent de fonctionner si vous laissez le flux implicite activé (coché).

Étapes suivantes

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