Démarrage rapide : Configurer la connexion pour une application monopage à l’aide d’Azure Active Directory B2C

Azure Active Directory B2C (Azure AD B2C) assure la gestion des identités de cloud pour préserver la protection de votre application, de votre entreprise et de vos clients. Azure AD B2C permet à vos applications de s’authentifier auprès de comptes des réseaux sociaux et de comptes d’entreprise à l’aide de protocoles standard ouverts.

Dans ce démarrage rapide, vous utilisez un exemple d’application monopage pour vous connecter à l’aide d’un fournisseur d’identité sociale et appeler une API web protégée par Azure AD B2C.

Prérequis

• Visual Studio Code

• Node.JS

• Compte de réseau social Facebook, Google ou Microsoft

• Exemple de code de GitHub : ms-identity-b2c-javascript-spa :

  Vous pouvez télécharger l’archive zip ou cloner le dépôt.

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

Exécution de l'application

1. Démarrez le serveur en exécutant les commandes suivantes à partir de l’invite de commandes Node.js :

   npm install
   npm update
   npm start
   

   Le serveur démarré par server.js affiche le port sur lequel il est à l’écoute :

   Listening on port 6420...
   

2. Accédez à l’URL de l’application. Par exemple : http://localhost:6420.

Connectez-vous à l’aide de votre compte

1. Sélectionnez Se connecter pour démarrer le parcours utilisateur.

2. Azure AD B2C présente la page de connexion d’une entreprise fictive appelée « Fabrikam » pour l’exemple d’application web. Pour vous inscrire au moyen d’un fournisseur d’identité sociale, sélectionnez le bouton en regard du fournisseur d’identité que vous souhaitez utiliser.

   

   Vous vous authentifiez (vous connectez) avec les informations d’identification de votre compte de réseau social et autorisez l’application à lire les informations de votre compte de réseau social. En accordant l’accès, l’application peut extraire des informations de profil du compte de réseau social, telles que votre nom et votre ville.

3. Terminez le processus de connexion pour le fournisseur d’identité.

Accéder à une ressource d’API protégée

Cliquez sur Call API (Appeler une API) pour que votre nom d’affichage soit retourné par l’API web sous forme d’un objet JSON.

L’exemple d’application monopage inclut un jeton d’accès dans la requête envoyée à la ressource de l’API web protégée.

Étapes suivantes

• Commencer à créer votre propre locataire Azure Active Directory B2C dans le portail Azure