Comment atteindre un Coffre-fort (!) système d'authentification dans une application angularjs?

Vous ne pouvez pas autoriser quoi que ce soit dans angularjs, parce que l'utilisateur a le plein contrôle de l'environnement d'exécution (à savoir, le navigateur). Chaque case, cas, si tout ce que vous pouvez penser - peut être altéré. Il y a des bibliothèques javascript qui utilisent des clés asymétriques pour effectuer le chiffrement local pour stocker les données locales à peu près en sécurité, mais ils ne sont pas ce que vous cherchez, vraiment.

Vous le pouvez, et vous devez autoriser des choses sur le serveur - le standard de la façon dont vous le feriez dans une application ordinaire - à l'aide de session; aucun code spécial n'est nécessaire, les appels ajax utilisation ordinaire des cookies de session. L'Application n'a pas besoin de savoir si c'est authentifié ou non. Il a seulement besoin de vérifier que le serveur pense.

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

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

Je voudrais partager ce qui est devenu mon préféré approche lorsque j'ai à traiter avec authentification de l'utilisateur dans une application web construit sur AngularJS.

Bien sûr fdreger la réponse est encore une grande réponse!

Vous ne pouvez pas autoriser quoi que ce soit dans angularjs, parce que l'utilisateur a l'entière
le contrôle de l'environnement d'exécution (à savoir, le navigateur).

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

Brièvement ma démarche consiste à:

1) Lier à chaque itinéraire des informations supplémentaires sur la route elle-même.

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

2) Utiliser un service de mantain 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 essaie d'accéder à une nouvelle route, vérifier s'ils ont l'octroi de l'accès.

$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 également écrit au sujet de cette approche (plus en détail) sur mon blog, les utilisateurs de l'authentification avec angularjs.

Vous avez besoin d'apprendre sur le côté serveur /base de données de la fin de celui-ci.

Les connexions de l'utilisateur doivent être stockés quelque part - à 99,9% du temps, c'est dans un de côté de serveur de base de données.

Idéalement pour un système sécurisé, vous voulez un back-end (serveur) le système d'adhésion, qui stocke la session dans une table de base de données qui est liée à la table membre qui détient le mot de passe crypté, mais fournit également une interface RESTful où vous pouvez construire vos appels d'api.

Un Script que j'ai utilisé avec succès beaucoup de choses ont été Amember https://www.amember.com/. C'est vraiment un moyen efficace d'aller bien qu'il existe beaucoup d'autres script, j'ai eu beaucoup de succès avec celui-ci.. C'est aussi le PHP ainsi, vous pouvez construire votre construire une API pour votre angulaire http appels très facilement.

Tous ces frameworks javascript sont grands, mais l'effet est que maintenant, trop nombreux sont trop mettre l'accent sur le front-end de choses à apprendre la base de données /backend ainsi! 🙂