Authentification AngularJS simplifiée

AngularJS est l'un des frameworks JavaScript les plus populaires au monde pour la création d'applications monopages (SPA). Développé par Google, Angular réunit une foule d'outils qui facilitent l'interconnexion des différents éléments nécessaires à une SPA. Divers éléments, comme l'association de données bidirectionnelle, les requêtes HTTP, la création de modèles et le routage sont simplifiés par la bibliothèque centrale d'AngularJS et les bibliothèques tierces de la communauté.

Comme pour les autres frameworks SPA, Angular ne cible que le front-end, totalement indépendant de la partie serveur. Ce découplage, en plus de l'architecture côté client propre à Angular, permet au final une flexibilité largement améliorée, au fur et à mesure du développement des applications.

L'authentification AngularJS à partir de zéro pourrait vous valoir quelques migraines, mais vous pouvez vous les éviter. Continuez votre lecture pour comprendre comment Auth0 facilite l'ajout d'une authentification AngularJS.

Le fonctionnement des applications AngularJS est différent de celui des applications traditionnelles en aller-retour. Comme d'autres frameworks d'application monopage (SPA), les applis AngularJS s'appuient généralement sur des API de données accessibles avec des requêtes XHR du client au serveur.

L'intégration de l'authentification des utilisateurs dans des applis AngularJS est également différente. Les applications traditionnelles utilisent un mécanisme d'authentification par session qui conserve l'état d'authentification de l'utilisateur dans la mémoire du serveur. Mais cette approche n'est pas efficace pour les applis monopages.

Les jetons sont en fait une meilleure solution pour exécuter l'authentification AngularJS. Plusieurs types de jetons d'authentification peuvent être utilisés. Mais les jetons JSON Web Token constituent la meilleure solution.

JSON Web Token (JWT) est une norme ouverte (RFC 7519) qui définit une méthode compacte et autonome pour les transmissions sécurisées entre tiers d'informations encodées sous forme d'objet JSON. Cette préférence pour l'authentification JWT est justifiée par plusieurs raisons :

Compacité et autonomie : toutes les données nécessaires à l'authentification sont contenues dans le jeton. Grâce à son faible volume, il peut être transmis rapidement.

Signature numérique : les jetons sont vérifiés par comparaison avec une clé secrète sur le serveur. Ils sont aussi sécurisés, car le contenu des jetons JWT ne peut être altéré que si la clé secrète est connue.

Simplicité : Les jetons JWT présentent une conception simple et une faible charge. Comme ils apportent un moyen d'authentification sans état, ils peuvent être utilisés sur plusieurs serveurs et domaines sans problèmes CORS.

Avec Auth0, votre appli AngularJS n'a besoin de communiquer avec notre API que lorsque l'utilisateur se connecte. Tous les autres appels d'API arrivent directement sur votre serveur comme d'habitude.

À l'aide de notre widget Lock ou de votre propre écran de connexion personnalisée, vos utilisateurs envoient leurs données d'identification à notre API pour être authentifiés. Une fois la connexion réussie, un jeton JWT est renvoyé et enregistré dans le dossier de stockage local du navigateur.

auth.signin({}, function(profile, token) {
    // Success callback
    store.set('profile', profile);
    store.set('token', token);
    $location.path('/');
});

Les points terminaux de l'API que vous souhaitez sécuriser sont protégés par un middleware qui exige un jeton JWT valide dans les requêtes HTTP. Le jeton JWT de l'utilisateur est envoyé comme en-tête d'autorisation. Il sera vérifié par comparaison à votre clé secrète. Un jwtInterceptor est configuré pour envoyer le jeton JWT de l'utilisateur avec toutes les requêtes.

jwtInterceptorProvider.tokenGetter = ['store', function(store) {
    // Return the saved token
    return store.get('token');
}]; 

$httpProvider.interceptors.push('jwtInterceptor');

Notre widget Lock est une boîte de connexion intégrée, tout-en-un et magnifiquement conçue pour vos applis AngularJS. Il assure les inscriptions, les connexions et les réinitialisations de mot de passe, ainsi que d'autres fonctions prêtes à l'emploi. Les styles du widget sont faciles à personnaliser, selon votre marque. Vous pouvez aussi utiliser l'un de nos thèmes prédéfinis.

Angular 2 n'a pas encore été officiellement publié. Nous ne la recommandons donc pas pour une production immédiate. Mais vous pouvez toujours utiliser Auth0 dans vos applications Angular 2. Avec notre bibliothèque d'aide angular2-jwt, vous pouvez envoyer facilement des requêtes HTTP authentifiées à votre serveur et gérer le routage en fonction de l'état d'authentification de l'utilisateur.