web-dev-qa-db-fra.com

Comment réaliser un système d'authentification Safe (!) Dans une application angularjs?

Je suis nouveau avec angularjs ...

J'ai lu la documentation et complété le tutoriel; J'ai aussi essayé quelque chose d'autre par moi-même, et les choses commencent à avoir un sens pour moi.

Maintenant, je me demande comment faire un système d'authentification sûr .

La partie facile: pas de code, je vais décrire les opérations que mon code exécute:

J'ai un formulaire classique: nom d'utilisateur et mot de passe de saisie.

L'utilisateur remplit le formulaire et appuie sur ENTREE. 

Une demande ajax commence et la réponse est un JSON qui me dit quelque chose comme "ok je te connais" ou "je ne sais pas qui tu es".

Ce dont j'ai besoin maintenant, c'est de conserver le statut enregistré du visiteur (ou non enregistré) entre les différentes vues de mon application.

J'ai lu sur Internet que, pour atteindre cet objectif, une personne définit une variable ($ scope.isLogged = true), une autre personne utilise des cookies. mais les variables javascript et les cookies peuvent être facilement modifiés à l'aide de firebug, ou d'outils de développement similaires.

... et enfin la question:

Alors, avez-vous des suggestions pour réaliser un système d’authentification sûr dans une application angularjs?

javascriptsecurityauthenticationcookiesangularjs
57
Bruno

Vous ne pouvez rien autoriser dans angularjs, car l'utilisateur a le contrôle total de l'environnement d'exécution (à savoir le navigateur). Chaque contrôle, cas, si - tout ce que vous pouvez penser - peut être falsifié. Certaines bibliothèques javascript utilisent des clés asymétriques pour effectuer un cryptage local afin de stocker des données locales de manière assez sécurisée, mais elles ne correspondent pas à ce que vous recherchez.

Vous pouvez, et vous devriez, autoriser des choses sur le serveur - comme vous le feriez normalement dans une application ordinaire - en utilisant une session; aucun code spécial n'est nécessaire, les appels ajax utilisent des cookies de session ordinaires. L'application n'a pas besoin de savoir si elle est authentifiée ou non. Il suffit de vérifier ce que pense le serveur.

Du point de vue de votre application angularjs, être "connecté" ou "déconnecté" est simplement un indice pour l'utilisateur.

54
fdreger

Vous avez probablement trouvé une solution, mais actuellement, j'ai mis au point un schéma d'authentification que je mets en œuvre dans mon application Angular. 

Sur .run, l'application est enregistrée avec ActiveSession défini sur false . Il vérifie ensuite si le navigateur contient un cookie avec un jeton et un identifiant utilisateur.

Si OUI, vérifiez le jeton + ID utilisateur sur le serveur et met à jour le jeton sur le serveur et le serveur local (le jeton est une clé générée par le serveur unique pour chaque utilisateur).

Si NO affiche le formulaire de connexion, vérifiez les informations d’identité et si elles sont valides, une demande du serveur reçoit un nouveau jeton et enregistre localement.

Le jeton est utilisé pour établir une connexion persistante (souvenez-vous de moi pendant 3 semaines) ou lorsque l'utilisateur actualise la page du navigateur.

Je vous remercie

Authentication Scheme in Angular.js

47
Alexandru Rada

J'ai posé cette question il y a trois mois.

J'aimerais partager ce qui est devenu mon approche préférée lorsque j'ai à gérer l'authentification d'utilisateur dans une application Web construite sur AngularJS.

Bien sûr, la réponse de fdreger reste une excellente réponse!

Vous ne pouvez rien autoriser dans angularjs, car l’utilisateur a plein le contrôle de l'environnement d'exécution (à savoir le navigateur).

Du point de vue de votre application angularjs, être "connecté" ou "déconnecté" est simplement un indice graphique pour l'utilisateur.

Donc, brièvement, mon approche consiste à:

1) Lie à chaque itinéraire des informations supplémentaires sur l’itinéraire lui-même.

$routeProvider.when('/login', { 
    templateUrl: 'partials/login.html', controller: 'loginCtrl', isFree: true
});

2) Utilisez un service pour conserver les données relatives à chaque utilisateur et leur statut d'authentification.

services.factory('User', [function() {
    return {
        isLogged: false,
        username: ''
    };
}]);

3) Chaque fois que l'utilisateur tente d'accéder à un nouvel itinéraire, vérifiez s'il dispose de l'autorisation nécessaire pour y accéder.

$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){
    // prevRoute.isFree tell me if this route is available for all the users, or only for registered user.
    // User.isLogged tell me if the user is logged
})

J'ai aussi écrit sur cette approche (plus en détail) sur mon blog, authentification des utilisateurs avec angularjs .

18
Bruno

Tout d'abord, les données côté client peuvent toujours être manipulées ou altérées.

Tant que des identifiants de session valables ne sont pas facilement identifiables et que des mesures telles que l’association de jetons de session à l’adresse IP du client ne posent aucun problème.

En théorie, vous pouvez également chiffrer le cookie, à condition de le faire côté serveur.

Pour plus de détails sur la manière de chiffrer vos cookies, consultez la documentation de votre serveur (par exemple, http://expressjs.com/api.html#res.cookie pour Express.js).

4
geekonaut

Vous devez en savoir plus sur le côté serveur/base de données.

Les connexions utilisateur doivent être stockées quelque part - 99,9% du temps, il s'agit d'une base de données côté serveur. 

Idéalement, pour un système vraiment sécurisé, vous souhaitez un système d’appartenance backend (côté serveur) qui stocke la session dans une table de base de données associée à la table des membres contenant le mot de passe crypté, tout en fournissant une interface RESTful permettant de créer vos appels d’API à.

Un script que j'ai utilisé avec succès est Amember https://www.amember.com/ . C’est un moyen très rentable, bien qu’il existe de nombreux autres scripts, mais j’ai eu beaucoup de succès avec celui-ci. C’est aussi PHP pour que vous puissiez créer votre propre API. appels http angulaires très facilement.

Tous ces frameworks javascript sont excellents, mais l’effet est que maintenant, trop d’entre eux se concentrent trop sur le front de choses - apprenez aussi la base de données/le backend! :-)

0
webmaster_sean