Le document traite de l'intégration d'OpenID Connect avec Azure AD et Angular 5, abordant des concepts comme la validation de JWT dans une Web API et les défis rencontrés. Il décrit les particularités d'AAD, les limites d'OpenID Connect et propose des solutions aux problèmes de compatibilité. Enfin, il fournit des références et ressources pour approfondir la compréhension des technologies évoquées.

1. Open Id Connect, Azure AD,
Angular 5 et Web API Core
Anthony Giretti
Tech Lead chez Nexus Innovations
http://anthonygiretti.com

2. Introduction
 Introduction d’Open ID Connect avec Azure AD
 Interfaçage avec un SPA (Angular 5)
 Validation d’un JWT dans une Web API (ASP.NET Core 2)
 Défis rencontrés
 Solutions aux limitations rencontrées

3. Open ID Connect
 OpenID Connect 1.0 est une couche d'identité au-dessus du protocole OAuth
2.0. Il permet aux clients de vérifier l'identité de l'utilisateur final en fonction de
l'authentification effectuée par un serveur d'autorisation, ainsi que d'obtenir des
informations de profil de base sur l'utilisateur final.
 OpenID Connect permet aux clients de tous types, y compris les clients Web,
mobiles et JavaScript, de demander et de recevoir des informations sur les
sessions authentifiées et les utilisateurs finaux.
 OpenID Connect effectue de nombreuses tâches identiques à celles d'OpenID
2.0, mais le fait d'une manière qui soit conviviale pour les API et utilisable par les
applications natives et mobiles.

4. Azure AD – Implicit workflow

5. Azure AD – Création d’une application

6. Azure AD – Création d’une application

7. Azure AD – Création d’une application

8. Azure AD – Autoriser les utilisateurs dans l’application

9. Azure AD – Activer l’Implicit flow

10. Azure AD – Ajouter les groupes dans les claims

11. Azure AD – Ajouter les rôles dans les claims

12. Azure AD – Déclarer le(s) Urls de réponse

13. Azure AD – Modifier la durée de vie d’un token
 Obligatoirement en Powershell, aucun UI de disponible pour ça

14. Azure AD – Modifier la durée de vie d’un token

15. Angular 5 - SetUp
 Installer une version « Angular » d’ADAL.JS (Microsoft)
 Adal-Angular5 (https://github.com/grumar/adal-angular5)
 Ne pas utiliser la fameuse librairie OIDC-CLIENT qui n’est pas totalement
compatible avec Azure AD
 Open ID Connect dans Azure AD n’est pas 100 % compliant avec Open ID Connect
 Impossible de rafraichir un Id_Token (Microsoft n’envoit pas d’access_token qui lui peut etre
rafraichit)
 D’autre issues comme la déconnection qui ne marche pas par example….

16. Angular 5 – Création d’un service d’authentification
 Configuration

17. Angular 5 – Création d’un service d’authentification
 Signin, SignOut, completeAuthentication et consommation du token

18. Angular 5 – Mécanisme d’authentification
 Créer une route de réponse pour réceptionner le token

19. Angular 5 – Mécanisme d’authentification
 Protéger ses routes avec un service garde Angular

20. Angular 5 – Interfaçage avec les API REST
 Comment utiliser le token lors des calls d’API REST

21. Angular 5 – Contournement à l’impossibilité de
rafraichir le token
 Attendre que le service de garde empêche d’accéder à une route et vous invite à
se réauthentifier
 Attendre d’attraper une 401 lors d’un call d’API
 Utiliser un compteur quand le token expire invitant à se réauthentifier

22. Angular 5 – Incompatibilité avec Angular 5.2.8
 Le token est devenu illisible depuis Angular 5.2.8 car les caractères spéciaux dans
l’url sont encodés
 Rester à Angular 5.2.7 ou inférieur
 Ou attendre un fix de la librairie Adal-angular5
 Ou le fixer vous-même 

23. Angular 5 – Incompatibilité avec Angular 5.2.8
 Avant:

24. Angular 5 – Incompatibilité avec Angular 5.2.8
 Après:

25. Angular 5 – Incompatibilité avec Angular 5.2.8
 Utilisation du hash par la librairie Adal-angular5
 Fix

26. WebAPI Core– SetUp
 Installation des packages requis

27. WebAPI Core– SetUp
 Configuration

28. WebAPI Core– Utilisation

29. Démo!

30. Conclusion
 OpenID Connect :
 Simple de consommer un JWT
 Simplicité d’intégration
 Basé sur le protocole OAuth 2.0
 Azure AD:
 Une solution Microsoft pour Open ID Connect avec AD
 Pas 100% compliant avec le protocole Open ID Connect (limitations)

31. Conclusion
 Angular 5
 Intégration facile
 ADAL.JS (et/ou autre version telle que Adal-Angular5)
 Récente incompatibilité avec Angular 5.2.8
 Web API
 Facile à configurer
 Facile de consommer et valider un JWT

32. Références et code source
 Blog
 http://anthonygiretti.com/2018/02/28/using-openidconnect-with-azure-ad-angular5-and-webapi-core-
introduction/
 GitHub
 https://github.com/AnthonyGiretti/Angular5-WebAPICore-OpenIdConnect-AzureAD
 Open ID Connect
 http://openid.net/connect/
 https://connect2id.com/learn/openid-connect
 Microsoft
 https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-authentication-
scenarios
 https://docs.microsoft.com/fr-fr/azure/active-directory/active-directory-configurable-token-lifetimes