L’ « authentification facile » dans Azure

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:

• Modern Authentication : concepts et défis de l’authentification moderne dans les applications
• Application, Service Principal & Consentement
• Flow “authorization code” : applications web et OBO

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

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 » :

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.

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

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.

Sélectionnez l’App Registration de votre UI :

Et choisissez « user_impersonation » :

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

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 :

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 !