Configurer l’authentification dans un exemple d’application web Python à l’aide d’Azure AD B2C

  • Article

Cet article utilise un exemple d’application web Python pour illustrer comment ajouter une authentification Azure Active Directory B2C (Azure AD B2C) à vos applications web.

Vue d’ensemble

OpenID Connect (OIDC) est un protocole d’authentification basé sur OAuth 2.0. Vous pouvez utiliser OIDC pour connecter de façon sécurisée des utilisateurs à une application. Cet échantillon d’application web utilise le package d’identité pour Python pour simplifier l’ajout de la prise en charge de l’authentification et de l’autorisation pour les applications web Python.

Le flux de connexion implique les étapes suivantes :

  1. L’utilisateur accède à l’application web et sélectionne Connexion.
  2. L’application lance une requête d’authentification et redirige les utilisateurs vers Azure AD B2C.
  3. Les utilisateurs s’inscrivent ou se connectent, réinitialisent le mot de passe ou se connectent à l’aide d’un compte social.
  4. Une fois la connexion établie, Azure AD B2C renvoie un jeton d’ID à l’application.
  5. L’application échange le code d’autorisation avec un jeton d’ID, valide le jeton d’ID, lit les revendications, puis renvoie une page sécurisée aux utilisateurs.

Prérequis

Étape 1 : Configurer votre flux d’utilisateurs

Lorsqu’un utilisateur tente de se connecter à votre application, l’application lance une requête d’authentification auprès du point de terminaison d’autorisation via un flux d’utilisateur. Le flux d’utilisateur définit et contrôle l’expérience de l’utilisateur. Une fois que l’utilisateur a terminé le flux d’utilisateur, Azure AD B2C génère un jeton, puis redirige l’utilisateur vers votre application.

Si vous ne l’avez pas déjà fait, créez un flux d’utilisateur ou une stratégie personnalisée. Répétez les étapes pour créer trois flux utilisateur distincts comme suit :

  • Un flux d’utilisateur Inscription et connexion combiné, par exemple susi. Ce flux utilisateur prend également en charge l’expérience Mot de passe oublié.
  • Un flux utilisateur Modification de profil, tel que edit_profile.
  • Un flux utilisateur Réinitialisation du mot de passe, tel que reset_password.

Azure AD B2C ajoute B2C_1_ devant le nom du flux utilisateur. Par exemple, susi devient B2C_1_susi.

Étape 2 : Inscrire une application web

Pour permettre à votre application de se connecter avec Azure AD B2C, inscrivez votre application dans le répertoire Azure AD B2C. L’inscription de votre application établit une relation de confiance entre l’application et Azure AD B2C.

Pendant l’inscription de l’application, vous spécifiez l’URI de redirection. L’URI de redirection est le point de terminaison vers lequel les utilisateurs sont redirigés par Azure AD B2C après s’être authentifié avec Azure AD B2C. Le processus d’inscription de l’application génère un ID d’application, également appelé ID client, qui identifie votre application de façon unique. Une fois votre application inscrite, Azure AD B2C utilise à la fois l’ID d’application et l’URI de redirection pour créer des demandes d’authentification.

Étape 2.1 : Inscrire l’application

Pour créer l’inscription d’application web, procédez comme suit :

  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. Sous Nom, entrez un nom pour l’application (par exemple, webapp1).

  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 Web, puis entrez http://localhost:5000/getAToken dans la zone d’URL.

  8. Sous Autorisations, cochez la case Accorder le consentement administrateur aux autorisations openid et offline access.

  9. Sélectionnez Inscription.

  10. Sélectionnez Vue d’ensemble.

  11. Enregistrez l’ID d’application (client) que vous utiliserez ultérieurement pour configurer l'application web.

    Screenshot of the web app Overview page for recording your web app I D.

Étape 2.2 : Créer une clé secrète client d’application web

Créez une clé secrète client pour l’application web inscrite. L’application Web utilise la clé secrète client pour prouver son identité lorsqu’elle demande des jetons.

  1. Sous Gérer, sélectionnez Certificats et secrets.
  2. Sélectionnez Nouveau secret client.
  3. Entrez une description pour la clé secrète client dans la zone Description (par exemple, clientsecret1).
  4. Sous Expire, sélectionnez une durée pendant laquelle le secret est valide, puis sélectionnez Ajouter.
  5. Enregistrez la Valeur du secret. Vous utiliserez cette valeur pour la configuration dans une étape ultérieure.

Étape 3 : Obtenir l’exemple d’application web

Téléchargez un fichier zip ou clonez l’exemple d’application web à partir de GitHub.

git clone https://github.com/Azure-Samples/ms-identity-python-webapp.git

Extrayez l’exemple de fichier dans un dossier où la longueur totale du chemin d’accès est égale ou inférieure à 260 caractères.

Étape 4 : Configurer l’exemple d’application web

Dans le répertoire racine du projet, procédez comme suit :

  1. Créez un fichier .env dans le dossier racine du projet en utilisant .env.sample comme guide.

    FLASK_DEBUG=True
B2C_TENANT_NAME=<tenant name>
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
EDITPROFILE_USER_FLOW=B2C_1_profile_editing
RESETPASSWORD_USER_FLOW=B2C_1_reset_password
    Clé Valeur
    B2C_TENANT_NAME La première partie du nom de locataire Azure AD B2C (par exemple contoso).
    CLIENT_ID L’ID d’application de l’API web de l’étape 2.1.
    CLIENT_SECRET La valeur de clé secrète client que vous avez créée à l’étape 2.2.
    *_USER_FLOW Flux d’utilisateurs créés à l’étape 1.

    Les variables d’environnement sont référencées dans app_config.py et conservées dans un fichier .env distinct pour les préserver du contrôle de code source. Le fichier .gitignore fourni empêche l’enregistrement du fichier .env.

Étape 5 : Exécuter l’exemple d’application web

  1. Dans votre console ou terminal, basculez sur le répertoire contenant l’exemple. Par exemple :

    cd ms-identity-python-webapp

  2. Installez les packages requis à partir de PyPi et exécutez l’application web sur votre ordinateur local en exécutant les commandes suivantes :

    python -m pip install -r requirements.txt
python -m flask run --host localhost --port 5000

    La fenêtre de console affiche le numéro de port de l’application s’exécutant localement :

     * Debug mode: on
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Running on `http://localhost:5000/` (Press CTRL+C to quit)

  3. Pour voir l’application web en cours d’exécution sur votre ordinateur local, accédez à l’adresse http://localhost:5000.

  4. Sélectionnez Connexion.

    Screenshot showing the sign-in flow.

  5. Terminez le processus d’inscription ou de connexion.

  6. Une fois l’authentification réussie, votre nom d’affichage s’affiche, comme illustré ici :

    Screenshot showing the web app token's display name claim.

Étape 6 : Appeler une API Web

Pour permettre à votre application de se connecter avec Azure AD B2C et d’appeler une API web, vous devez inscrire deux applications dans le répertoire d’Azure AD B2C.

  • L’inscription de l’application web (Python) que vous avez déjà créée à l’étape 2. L’inscription de l’application lui permet de se connecter avec Azure AD B2C. Le processus d’inscription de l’application génère un ID d’application, également appelé ID client, qui identifie votre application de façon unique. Par exemple, l’ID d’application : 1.

  • L’inscription de l’API web permet à votre application d’appeler une API web protégée. Elle expose les autorisations de l’API web (étendues). Le processus d’inscription de l’application génère un ID d’application, qui sert à identifier de manière unique votre API web (par exemple ID d’application : 2). Accordez à votre application (ID d’application : 1) des autorisations sur les étendues de l’API web (ID d’application : 2).

Les inscriptions et l’architecture des applications sont décrites dans les diagrammes suivants :

Diagram describing a web app with web API, registrations, and tokens.

Une fois l’authentification terminée, les utilisateurs interagissent avec l’application, qui appelle une API web protégée. L’API web utilise l’authentification par jeton du porteur. Le jeton du porteur est le jeton d’accès obtenu par l’application auprès d’Azure AD B2C. L’application transmet le jeton dans l’en-tête d’autorisation de la requête HTTPS.

Authorization: Bearer <access token>

Si l’étendue du jeton d’accès ne correspond pas aux étendues de l’API web, la bibliothèque d’authentification obtient un nouveau jeton d’accès avec les étendues appropriées.

Étape 6.1 : Inscrire l’application API web

Pour créer l’inscription d’application API web (ID d’application : 2), suivez les étapes suivantes :

  1. Connectez-vous au portail Azure.

  2. Veillez à bien utiliser l’annuaire qui contient votre locataire Azure AD B2C. Sélectionnez l’icône Répertoires + abonnements dans la barre d’outils du portail.

  3. Sur la page Paramètres du portail | Répertoires + abonnements, recherchez votre répertoire AD B2C Azure dans la liste Nom de répertoire, puis sélectionnez Basculer.

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

  5. Sélectionnez Inscriptions d’applications, puis Nouvelle inscription.

  6. Dans le champ Nom, entrez un nom pour l’application (par exemple my-api1). Laissez les valeurs par défaut pour l'URI de redirection et les Types de comptes pris en charge.

  7. Sélectionnez Inscription.

  8. Une fois l’inscription de l’application terminée, sélectionnez Vue d’ensemble.

  9. Enregistrez l’ID d’application (client) que vous utiliserez ultérieurement pour configurer l’application web.

    Screenshot that demonstrates how to get a web A P I application I D.

Étape 6.2 : Configurer des étendues

  1. Sélectionnez l’application my-api1 que vous avez créée (ID d’application : 2) pour ouvrir sa page Vue d’ensemble.

  2. Sous Gérer, sélectionnez Exposer une API.

  3. A côté d’URI d’ID d’application, sélectionnez le lien Définir. Remplacez la valeur par défaut (GUID) par un nom unique (par exemple, tasks-api), puis sélectionnez Enregistrer.

    Lorsque votre application web demande un jeton d’accès pour l’API web, elle doit ajouter cet URI en tant que préfixe de chaque étendue que vous définissez pour l’API.

  4. Sous Étendues définies par cette API, sélectionnez Ajouter une étendue.

  5. Pour créer une étendue qui définit l’accès en lecture à l’API :

    1. Pour Nom de l’étendue, entrez tâches.lecture.
    2. Pour Nom d’affichage du consentement administrateur, entrez Accès en lecture à l’API de tâches.
    3. Pour Description du consentement administrateur, entrez Autorise l’accès en lecture à l’API de tâches.

  6. Sélectionnez Ajouter une étendue.

  7. Sélectionnez Ajouter une étendue, puis ajoutez une étendue qui définit l’accès en écriture à l’API :

    1. Pour Nom de l’étendue, entrez tâches.écriture.
    2. Pour Nom d’affichage du consentement administrateur, entrez Accès en écriture à l’API de tâches.
    3. Pour Description du consentement administrateur, entrez Autorise l’accès en écriture à l’API de tâches.

  8. Sélectionnez Ajouter une étendue.

Étape 6.3 : Accorder les autorisations de l’application web

Pour accorder des autorisations à votre application (ID d’application : 1), procédez comme suit :

  1. Sélectionnez Inscriptions d’applications, puis l’application que vous avez créée (ID d’application : 1).

  2. Sous Gérer, sélectionnez Autorisations de l’API.

  3. Sous Autorisations configurées, sélectionnez Ajouter une autorisation.

  4. Sélectionnez l’onglet Mes API.

  5. Sélectionnez l’API (ID d’application : 2) à laquelle l’application web doit être autorisée à accéder. Par exemple, saisissez my-api1.

  6. Sous Autorisation, développez tâches, puis sélectionnez les étendues que vous avez définies auparavant (par exemple, tasks.read et tasks.write).

  7. Sélectionnez Ajouter des autorisations.

  8. Sélectionnez Accorder le consentement de l’administrateur pour <nom de votre locataire>.

  9. Sélectionnez Oui.

  10. Sélectionnez Actualiser, puis vérifiez que la mention Accordé pour ... apparaît sous État pour les deux étendues.

  11. Dans la liste Autorisations configurées, sélectionnez votre étendue, puis copiez le nom complet de celle-ci.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Étape 6.4 : Configurer votre API web

Cet exemple permet d’acquérir un jeton d’accès avec les étendues appropriées et que l’application web peut utiliser pour une API web. Cet échantillon lui-même n’agit pas en tant qu’API web. Vous devez à la place utiliser une API web existante ou en créer une nouvelle. Pour obtenir un tutoriel sur la création d’une API web dans votre locataire B2C, veuillez consulter la rubrique Activer l’authentification dans votre propre API web à l’aide d’Azure AD B2C.

Étape 6.5 : Configurer l’exemple d’application avec l’API web

Ouvrez le fichier app_config.py. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C. Mettez à jour les propriétés suivantes des paramètres de l’application :

Clé Valeur
ENDPOINT URI de votre API web (par exemple https://localhost:6000/hello).
SCOPE Étendues d’API web que vous avez créées (par exemple, ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"]).

Étape 6.6 : Exécuter l’exemple d’application

  1. Dans votre console ou terminal, basculez sur le répertoire contenant l’exemple.

  2. Si l’application n’est pas encore en cours d’exécution, redémarrez-la à l’aide de la commande de l’étape 5.

  3. Sélectionnez Appeler une API en aval.

    Screenshot showing how to call a web API.

Étape 7 : Déployer votre application

Dans une application de production, l’URI de redirection de l’inscription d’application est généralement un point de terminaison accessible publiquement dans lequel votre application s’exécute, comme https://contoso.com/getAToken.

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 redirection doit commencer par le schéma https.
  • L’URL de redirection respecte la casse. Sa casse doit correspondre à celle du chemin d’URL de votre application en cours d’exécution.

Étapes suivantes