AngularJS: exemple de base pour utiliser l'authentification dans une Application D'une Page
je suis nouveau AngularJS et traversé leur tutoriel et obtenu une sensation pour elle.
j'ai un backend prêt pour mon projet où chacun des endpoints REST doit être authentifié.
ce que je veux faire
A.) Je veux avoir une page unique pour mon projet http://myproject.com .
b) Une fois qu'un utilisateur accède à L'URL dans le navigateur, basé sur si l'utilisateur est connecté ou non, il est présenté avec une page d'accueil/vue ou page de connexion/vue sous la même url http://myproject.com .
C.) si un utilisateur n'est pas connecté, il remplit le formulaire et le serveur configure un USER_TOKEN en session, de sorte que toutes les autres requêtes aux endpoints seront authentifiées sur la base de USER_TOKEN
Mes Confusions
A.) Comment puis-je gérer L'authentification côté client à L'aide D'AngularJS? J'ai vu ici et ici , mais n'a pas de comprendre comment les utiliser
b) Comment puis-je présenter différentes vues à l'utilisateur en fonction de si l'utilisateur est connecté ou non sous la même url http://myproject.com
j'utilise angular.js pour la première fois et vraiment obtenir confus quant à la façon de démarrer. Tous les conseils et / ou ressources sont très appréciés.
6 réponses
j'ai créé un GitHub repo résumant cet article essentiellement: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
je vais essayer de l'expliquer aussi bien que possible, j'espère aider certains d'entre vous:
(1) app.js: création des constantes d'authentification sur la définition de l'application
var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
all : '*',
admin : 'admin',
editor : 'editor',
guest : 'guest'
}).constant('AUTH_EVENTS', {
loginSuccess : 'auth-login-success',
loginFailed : 'auth-login-failed',
logoutSuccess : 'auth-logout-success',
sessionTimeout : 'auth-session-timeout',
notAuthenticated : 'auth-not-authenticated',
notAuthorized : 'auth-not-authorized'
})
(2) Service de Demenagement: Toutes les fonctions suivantes sont mises en œuvre dans auth.js service. Le $service http est utilisé pour communiquer avec le serveur pour que les procédures d'authentification. Contient également des fonctions sur l'autorisation, c'est si l'utilisateur est autorisé à effectuer une certaine action.
angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS',
function($http, $rootScope, $window, Session, AUTH_EVENTS) {
authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]
return authService;
} ]);
(3) Session: Un singleton pour garder les données de l'utilisateur. La mise en œuvre ici dépend de vous.
angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {
this.create = function(user) {
this.user = user;
this.userRole = user.userRole;
};
this.destroy = function() {
this.user = null;
this.userRole = null;
};
return this;
});
(4) contrôleur Parent: considérez ceci comme la fonction "principale" de votre application, tous les contrôleurs héritent de ce contrôleur, et c'est l'épine dorsale de l'authentification de cette application.
<body ng-controller="ParentController">
[...]
</body>
(5) Contrôle d'accès: pour refuser l'accès sur certaines routes 2 étapes doivent être mis en œuvre:
a) Ajouter les données des rôles autorisés pour accéder à chaque route, sur le service $stateProvider d'ui router comme peut être vu ci-dessous (même peut fonctionner pour ngRoute).
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b) sur $rootScope.$on ('$stateChangeStart') ajoute la fonction pour empêcher la modification d'état si l'utilisateur n'est pas autorisé.
$rootScope.$on('$stateChangeStart', function (event, next) {
var authorizedRoles = next.data.authorizedRoles;
if (!Auth.isAuthorized(authorizedRoles)) {
event.preventDefault();
if (Auth.isAuthenticated()) {
// user is not allowed
$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
} else {
// user is not logged in
$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
}
}
});
(6) Auth intercepteur: Ceci est mis en œuvre, mais ne peut pas être vérifiée sur le champ d'application de ce code. Après chaque requête $ http, cet intercepteur vérifie le code de statut, Si l'une des requêtes ci-dessous est retournée, alors il diffuse un événement pour forcer l'utilisateur à se connecter à nouveau.
angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
return {
responseError : function(response) {
$rootScope.$broadcast({
401 : AUTH_EVENTS.notAuthenticated,
403 : AUTH_EVENTS.notAuthorized,
419 : AUTH_EVENTS.sessionTimeout,
440 : AUTH_EVENTS.sessionTimeout
}[response.status], response);
return $q.reject(response);
}
};
} ]);
P.S. un bug avec les données de formulaire autofill comme indiqué sur le 1er article peut être facilement évité en ajoutant la directive qui est incluse dans les directives.js.
P.S. 2 ce code peut être facilement modifié par l'utilisateur, pour permettre différents itinéraires pour être vu, ou afficher du contenu qui n'était pas destiné à être affiché. La logique doit être implémentée côté serveur, c'est juste une façon de montrer les choses correctement sur votre ng-app.
j'aime l'approche et l'a mise en œuvre sur le côté serveur, sans faire d'authentification chose sur le front-end
Ma "technique" sur ma dernière application est.. le client ne se soucie pas Auth. Chaque chose simple dans l'application nécessite un login d'abord, de sorte que le le serveur sert juste toujours une page de connexion à moins qu'un utilisateur existant ne soit détecté dans la session. Si la session.l'utilisateur est trouvé, le serveur vient de envoie index.HTML. Bam: - o
cherche le commentaire de "Andrew Joslin".
j'ai répondu à une question similaire ici: authentification AngularJS + API RESTful
j'ai écrit un module AngularJS pour UserApp qui prend en charge les routes protégées/publiques, le réacheminement sur la connexion/déconnexion, les battements de cœur pour les vérifications de statut, stocke le token de session dans un cookie, événements, etc.
vous pouvez soit:
- modifiez le module et attachez-le à votre propre API, ou
- utilisez le module avec UserApp (une API de gestion des utilisateurs basée sur le cloud)
https://github.com/userapp-io/userapp-angular
si vous utilisez UserApp, vous n'aurez pas à écrire de code côté serveur pour les trucs utilisateurs (plus que valider un token). Suivre le cours Codecademy pour l'essayer.
voici quelques exemples de comment cela fonctionne:
-
comment spécifier les routes qui doivent être publiques, et quelle route qui est le formulaire de connexion:
$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true}); $routeProvider.when('/home', {templateUrl: 'partials/home.html'});la route
.otherwise()doit être définie à l'endroit où vous voulez que vos utilisateurs soient redirigés après la connexion. Exemple:$routeProvider.otherwise({redirectTo: '/home'}); -
formulaire de Connexion avec la gestion d'erreur:
<form ua-login ua-error="error-msg"> <input name="login" placeholder="Username"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Log in</button> <p id="error-msg"></p> </form> -
formulaire D'inscription avec traitement des erreurs:
<form ua-signup ua-error="error-msg"> <input name="first_name" placeholder="Your name"><br> <input name="login" ua-is-email placeholder="Email"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Create account</button> <p id="error-msg"></p> </form> -
Journal de lien:
<a href="#" ua-logout>Log Out</a>(termine la session et redirige vers la route de connexion)
-
l'Accès des propriétés de l'utilisateur:
Les propriétés de L'utilisateursont accessibles en utilisant le service
user, E. g:user.current.emailou dans le modèle:
<span>{{ user.email }}</span> -
Masquer les éléments qui ne devraient être visibles qu'une fois connectés:
<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div> -
afficher un élément basé sur les permissions:
<div ua-has-permission="admin">You are an admin</div>
et pour vous authentifier à vos services d'arrière-plan, utilisez simplement user.token() pour obtenir le jeton de session et l'envoyer avec la requête AJAX. À la fin, utilisez le API UserApp (si vous utilisez UserApp) pour vérifier si le token est valide ou non.
Si vous avez besoin d'aide, faites le moi savoir!
dans angularjs vous pouvez créer la partie UI, service, Directives et toute la partie d'angularjs qui représentent L'UI. C'est une belle technologie sur laquelle travailler.
Car n'importe qui de nouveau dans cette technologie, et pour authentifier l'Utilisateur", alors je suggère de le faire avec la puissance de c# web api. pour cela, vous pouvez utiliser le protocole OAuth spécification qui vous aidera à construire un solide mécanisme de sécurité pour authentifier l'utilisateur. une fois que vous construisez le WebApi avec OAuth vous devez appelez cette api pour token:
var _login = function (loginData) {
var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
var deferred = $q.defer();
$http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
_authentication.isAuth = true;
_authentication.userName = loginData.userName;
deferred.resolve(response);
}).error(function (err, status) {
_logOut();
deferred.reject(err);
});
return deferred.promise;
};
et une fois que vous obtenez le token alors vous demandez les ressources d'angularjs avec l'aide de Token et d'accéder à la ressource qui a maintenu en sécurité dans L'Api web avec spécification de OAuth.
s'il vous Plaît regarder dans les dessous de l'article pour plus d'aide:-
je pense que chaque réponse JSON devrait contenir une propriété (par exemple {authenticated: false}) et le client doit la tester à chaque fois: si false, alors le contrôleur/service angulaire" redirigera " vers la page de connexion.
et que se passe-t-il si l'utilisateur attrape de JSON et change le bool en True?
je pense que vous ne devriez jamais compter sur le côté client pour faire ce genre de choses. Si l'utilisateur n'est pas authentifié, le serveur devrait simplement rediriger vers une page de connexion / erreur.
var _login = function (loginData) {
var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
var deferred = $q.defer();
$http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
_authentication.isAuth = true;
_authentication.userName = loginData.userName;
deferred.resolve(response);
}).error(function (err, status) {
_logOut();
deferred.reject(err);
});
return deferred.promise;
};