Accueil > L’ « authentification facile » dans Azure
Geoffrey Mohaer
19 avril 2022
Read this post in English

L’ « authentification facile » dans Azure

Azure authenfication facile

Pour sécuriser l’accès à vos applications, vous serez sûrement amenés à devoir authentifier vos utilisateurs.

Il existe déjà depuis un certain temps la possibilité de configurer l’authentification de son application directement depuis le portail Azure via différents fournisseurs d’identité comme Microsoft, Facebook, Twitter, Google, compatibles OpenID Connect et, dans un futur proche, Apple.

Pour mieux comprendre comment tout ceci fonctionne je vous invite à consulter cette série d’articles rédigés par les experts Cellenza:

 

Malheureusement la documentation n’est pas facile à trouver et plutôt incomplète.

Nous vous proposons aujourd’hui de décrire comment mettre en place de l’authentification Azure AD dans une application Front.

 

Configuration de l’authentification de votre Application Service

 

Pour mettre en place une authentification Azure AD, vous aurez besoin d’une souscription Azure.

Tout d’abord, vous devrez créer votre « App Service » dans lequel vous hébergerez votre application.

Voici les  informations que nous utiliserons pour notre exemple :

  • App service name : gmo-web-ui
  • Resource groupe name : rg-app-services

 

Microsoft dashboard authentification

 

Une fois votre App Service créé, créez une App Registration dans votre Azure AD.

Voici les informations que nous utiliserons pour notre cas pratique :

  • Display name : gmo-web-ui
  • Supported account types : Single tenant

 

Conservez le Client ID (2) et un secret (1) que vous aurez généré pour cet « App Service ».

Définissez une « Redirect URI » (3) pour votre application : dans notre exemple, nous prendrons : https://gmo-web-ui.azurewebsites.net/.auth/login/gmooidc/callback

Au niveau de l’App Service, cliquez sur « Authentication » puis « Add identity provider » :

Microsoft Add identity provider

 

Voici les informations renseignées pour notre exemple :

  • Identity provider : OpenID Connect
  • OpenID provider name : gmooidc
  • Metadata entry : Document URL
  • Metadata URL : https://login.microsoftonline.com/{TenantID}/v2.0/.well-known/openid-configuration

Je vous invite à consulter la documentation Microsoft décrivant les différentes valeurs possibles.

 

Microsoft Azure authentication dashboard

 

Désormais, si vous tentez d’accéder à votre application, vous devriez être invité à vous authentifier.

 

Utilisation de l’authentification avec une API

 

Dans la réalité, vous aurez sûrement besoin de vous authentifier auprès d’une API. Pour cela, il sera nécessaire de créer pour cette API une App Registration dans votre Azure AD.

Prenons les informations suivantes pour notre cas pratique :

  • Display name : gmo-web-api
  • Supported account types : Single tenant

Microsoft authentification API

 

Il faut ensuite ajouter une API permission appelée « user_impersonation » : cette permission permettra à l’application d’accéder à l’identité de l’utilisateur connecté et pourra utiliser cette identité pour ses appels à l’API.

 

Microsoft API authentification dashboard

Sélectionnez l’App Registration de votre UI :

Microsoft API request permisison

 

Et choisissez « user_impersonation » :

Microsoft API user impersonation

 

Et enfin, ajoutez le scope de cette API : il permet à l’application FrontEnd d’être autorisée auprès de l’API.

Dashboard API microsoft

API microsoft authentification add a scope

 

Une fois les ressources créées et configurées, il reste à définir le scope et les informations requises pour votre application.

Il vous faudra ouvrir une console Azure Cloud Shell ou PowerShell avec l’Azure CLI installée, et exécuter cette commande :

Ces scopes vont permettre :

  • offline_access : avoir la possibilité de rafraichir le token de l’utilisateur lorsqu’il a expiré ;
  • openid : identifier l’utilisateur ;
  • email : récupérer l’email de l’utilisateur ;
  • api://{API_ClientId}/user_impersonation : être authentifié avec l’identité de l’utilisateur auprès de l’API.

 

Authentification côté code

 

Afin d’être authentifié auprès de votre API, il est nécessaire d’ajouter à vos appels votre token d’authentification, via le header « Authorization ».

Exemple : « Authorization » : « bearer eyqsd53qsd4[…] »

Pour récupérer le token d’authentification, il suffit de faire un GET sur la route « /.auth/me ».

On obtient une réponse de ce type :

 

Le token correspond à la propriété « access_token ». Il a une durée de vie limitée, c’est pourquoi il est conseillé d’ajouter un handler permettant de gérer les cas d’expiration du token : l’API vous retournera alors une erreur 401.
Pour rafraichir ce token, il suffit de faire un GET sur la route « /.auth/refresh » puis de récupérer à nouveau le token via GET « /.auth/me ».

Voici le code d’une application basique en Reactjs permettant ceci :

Exemple application authentification Azure Microsoft

https://github.com/Mohye77/AppServiceEasyAuthReact

 

Ce tutoriel vous a été utile ? Vous souhaitez en savoir plus sur l’authentification dans Azure ? N’hésitez pas à laisser un message en commentaire ou à contacter nos experts !

 

Formation AZ 104 Microsoft

 

Nos autres articles
Commentaires
Laisser un commentaire

Restez au courant des dernières actualités !
Le meilleur de l’actualité sur le Cloud, le DevOps, l’IT directement dans votre boîte mail.