Partager via

Configurer l’authentification dans une application web statique Azure à l’aide d’Azure AD B2C

  • Article

Cet article explique comment ajouter une fonctionnalité d’authentification Azure Active Directory B2C (Azure AD B2C) à une application web statique Azure. Pour plus d’informations, consultez Authentification personnalisée dans Azure Static Web Apps.

Vue d’ensemble

OpenID Connect (OIDC) est un protocole d’authentification basé sur OAuth 2.0. Utilisez le protocole OIDC pour connecter en toute sécurité des utilisateurs à une application web statique Azure. Le flux de connexion implique les étapes suivantes :

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

Lorsque le jeton d’accès a expiré ou que la session de l’application est invalidée, l’application web statique Azure lance une nouvelle demande d’authentification et redirige les utilisateurs vers Azure AD B2C. Si la session d’authentification unique d’Azure AD B2C est active, Azure AD B2C émet un jeton d’accès sans inviter les utilisateurs à se reconnecter. Si la session Azure AD B2C expire ou devient non valide, les utilisateurs sont invités à se connecter à nouveau.

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’application que vous inscrivez établit une relation de confiance entre l’application et Azure AD B2C.

Pendant l’inscription de l’application, vous spécifiez un 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. Vous créez également une clé secrète client, que votre application utilise pour acquérir les jetons en toute sécurité.

Étape 2.1 : Inscrire l’application

Pour inscrire votre application, 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, Mon application web statique Azure).

  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 https://<YOUR_SITE>/.auth/login/aadb2c/callback dans la zone d’URL. Remplacez <YOUR_SITE> par le nom de votre application web statique Azure. Par exemple : https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c/callback. Si vous avez configuré les domaines personnalisés d’une application web statique Azure, utilisez le domaine personnalisé dans l’URI de redirection. Par exemple : https://www.example.com/.auth/login/aadb2c/callback

  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 application I D.

Étape 2.2 : Créer une clé secrète client

  1. Dans la page Azure AD B2C – Inscriptions d’applications, sélectionnez l’application que vous avez créée, par exemple, Mon application web statique Azure.
  2. Dans le menu de gauche, sous Gérer, sélectionnez Certificats et secrets.
  3. Sélectionnez Nouveau secret client.
  4. Entrez une description pour la clé secrète client dans la zone Description. Par exemple, clientsecret1.
  5. Sous Expire, sélectionnez une durée pendant laquelle le secret est valide, puis sélectionnez Ajouter.
  6. Enregistrez la valeur du secret en prévision d’une utilisation dans le code de votre application cliente. Cette valeur secrète ne sera plus jamais affichée lorsque vous aurez quitté cette page. Vous utiliserez cette valeur comme secret d’application dans le code de votre application.

Étape 3 : Configurer l’application statique Azure

Une fois l’application inscrite auprès d’Azure AD B2C, créez les secrets d’application suivants dans les paramètres de l’application de l’application web statique Azure. Vous pouvez configurer les paramètres d’application via le Portail Azure ou avec l’interface de ligne de commande Azure. Pour plus d’informations, consultez Configurer les paramètres d’application pour Azure Static Web Apps.

Ajoutez les clés suivantes aux paramètres d’application :

Nom du paramètre Valeur
AADB2C_PROVIDER_CLIENT_ID ID (client) d’application web de l’étape 2.1.
AADB2C_PROVIDER_CLIENT_SECRET Clé secrète (client) d’application web de l’étape 2.2.

Important

Les secrets d’application sont des informations d’identification de sécurité sensibles. Ne partagez ce secret avec personne, ne le distribuez pas dans une application cliente et ne l’archivez pas dans le contrôle de code source.

3.1 Ajouter un fournisseur d’identité OpenID Connect

Une fois que vous avez ajouté l’ID et le secret d’application, suivez les étapes suivantes pour ajouter Azure AD B2C en tant que fournisseur d’identité OpenId Connect.

  1. Ajoutez une section auth du fichier config avec un bloc de configuration pour les fournisseurs OIDC et la définition de votre fournisseur.

    {
  "auth": {
    "identityProviders": {
      "customOpenIdConnectProviders": {
        "aadb2c": {
          "registration": {
            "clientIdSettingName": "AADB2C_PROVIDER_CLIENT_ID",
            "clientCredential": {
              "clientSecretSettingName": "AADB2C_PROVIDER_CLIENT_SECRET"
            },
            "openIdConnectConfiguration": {
              "wellKnownOpenIdConfiguration": "https://<TENANT_NAME>.b2clogin.com/<TENANT_NAME>.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
            }
          },
          "login": {
            "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
            "scopes": [],
            "loginParameterNames": []
          }
        }
      }
    }
  }
}

  2. Remplacez <TENANT_NAME> par la première partie de votre nom de locataire Azure AD B2C (par exemple, https://contoso.b2clogin.com/contoso.onmicrosoft.com).

  3. Remplacez <POLICY_NAME> par les flux d’utilisateur ou la stratégie personnalisée que vous avez créée à l’étape 1.

Étape 4 : Vérifier l’application web statique Azure

  1. Accédez à /.auth/login/aadb2c. Le /.auth/login pointe vers le point de terminaison de connexion de l’application statique Azure. Le aadb2c fait référence à votre fournisseur d’identité OpenID Connect. L’URL suivante illustre un point de terminaison de connexion d’application statique Azure : https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c.

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

  3. Dans le débogueur de votre navigateur, exécutez le code JavaScript suivant dans la console. Le code JavaScript présente des informations sur l’utilisateur de connexion.

    async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

await getUserInfo();

Conseil

Si vous ne pouvez pas exécuter le code JavaScript ci-dessus dans votre navigateur, accédez à l’URL suivante https://<app-name>.azurewebsites.net/.auth/me. Remplacez <app-name> par votre application web Azure.

Étapes suivantes