100 votes

AngularJS : Exemple de base pour utiliser l’authentification unique Page application

Je suis nouveau sur AngularJS et traversé leur tutoriel et obtenu une sensation pour elle.

J'ai un backend pour mon projet de prêt où chaque de la REST des points de terminaison doit être authentifié.

Ce que je veux faire
un.) Je veux avoir une seule page pour mon projet http://myproject.com.
b.) Une fois qu'un utilisateur accède à l'URL dans le navigateur, en fonction de si l'utilisateur est connecté ou non, il est présenté avec une page d'accueil/vue ou de la page de connexion/point de vue sous la même url http://myproject.com.
c.) si un utilisateur n'est pas connecté, il remplit le formulaire et le serveur établit une USER_TOKEN en séance, de sorte que toutes les autres demandes aux points de terminaison d'authentification basée sur USER_TOKEN

Mon Confusions
un.) Comment puis-je gérer l'authentification côté client en utilisant AngularJS? J'ai vu ici et ici , mais ne comprends pas comment les utiliser
b.) Comment puis-je présenter différents points de vue de l'utilisateur si l'utilisateur est connecté ou pas sous la même url http://myproject.com

Je suis à l'aide de angular.js pour la première fois et vraiment obtenir confus quant à la façon de démarrer. Des conseils et/ou les ressources sont très appréciés.

48voto

J'ai créé un dépôt github pour résumer cet article en gros: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

ng-login dépôt Github

Plunker

Je vais essayer de l'expliquer aussi bien que possible, j'espère aider certains d'entre vous:

(1) app.js: Création de l'authentification des constantes sur l'application de la définition

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 d'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 de Parent: Considérer cela comme de la "main" en fonction de votre demande, tous les contrôleurs, qui 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: À refuser l'accès à certaines routes, 2 étapes de mise en œuvre:

a) Ajouter des données de l'rôles autorisés à accéder à chaque itinéraire, sur l'interface utilisateur du routeur $stateProvider service comme on peut le voir ci-dessous (même peut travailler 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.$('$stateChangeStart') ajout de la fonction pour empêcher la modification de l'é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 {d
        // 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, l'intercepteur vérifie le code d'état, si l'un des ci-dessous est retourné, puis il diffuse un événement de force 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 du formulaire de saisie automatique comme indiqué sur l'article 1er peut être facilement évité en ajoutant la directive qui est inclus dans directives.js.

P. S. 2 Ce code peut facilement être modifié par l'utilisateur, afin de permettre à des voies différentes pour être vu, ou afficher du contenu qui n'était pas destiné à être affiché. La logique DOIT être mis en œuvre côté serveur, c'est juste une façon de montrer les choses correctement sur votre ng-app.

30voto

Ajay Beniwal Points 7637

S'il vous plaît jeter un oeil à l'article ci-dessous

http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/

25voto

daydreamer Points 7928

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 unique dans l'application nécessite une connexion de la première, de sorte que le serveur sert toujours une page de connexion, sauf si un utilisateur existant est détecté dans la session. Si la session.l'utilisateur est trouvé, le serveur vient de envoie index.html. Bam :-o

Regardez pour le commentaire de "Andy Joslin".

https://groups.google.com/forum/?fromgroups=#!searchin/angular/authentication/angular/POXLTi_JUgg/VwStpoWCPUQJ

18voto

Michael Calkins Points 3927

J'ai fait une rapide screencast sur ce sujet. Vous emmène à travers le concept de comment mettre en œuvre une authentification système dans votre SPA et de le connecter à votre API. https://www.youtube.com/watch?v=ZHMVP5aLAPM

Un autre exemple: http://michaeljcalkins.tumblr.com/post/72571791490/how-to-authenticate-with-angularjs

14voto

J'ai répondu à une question similaire ici: AngularJS Authentification + API RESTful


J'ai écrit un AngularJS module pour UserApp qui prend en charge la protection de voies publiques, le changement d'itinéraire sur la connexion/déconnexion, les battements de cœur pour les vérifications d'état, magasins du jeton de session dans un cookie, des événements, etc.

Vous pouvez soit:

  1. Modifier le module et de le joindre à votre propre API, ou
  2. L'utilisation du module avec UserApp (basée dans le cloud, l'utilisateur de l'API de gestion)

https://github.com/userapp-io/userapp-angular

Si vous utilisez UserApp, vous n'aurez pas à écrire tout le code côté serveur pour l'utilisateur trucs (plus que la validation d'un jeton). Prendre le cours sur Codecademy pour l'essayer.

Voici quelques exemples de la façon dont il fonctionne:

  • Comment spécifier les routes qui doivent être publiques, et la 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'});
    

    L' .otherwise() route doit être fixé à l'endroit où vous souhaitez que vos utilisateurs seront redirigés après la connexion. Exemple:

    $routeProvider.otherwise({redirectTo: '/home'});

  • Formulaire de connexion avec la gestion des erreurs:

    <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 la gestion 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>
    
  • Déconnecter le lien:

    <a href="#" ua-logout>Log Out</a>

    (Fin de la session et redirige le login de la route)

  • L'accès des propriétés de l'utilisateur:

    Propriétés de l'utilisateur sont accessibles à l'aide de l' user service e.g: user.current.email

    Ou dans le modèle: <span>{{ user.email }}</span>

  • Masquer les éléments qui ne devrait être visible lorsque vous êtes connecté:

    <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

  • Afficher un élément basé sur les autorisations:

    <div ua-has-permission="admin">You are an admin</div>

Et pour s'authentifier auprès de vos services, il suffit d'utiliser user.token() pour obtenir le jeton de session et l'envoyer avec la requête AJAX. À la fin, utilisez le UserApp API (si vous utilisez UserApp) pour vérifier si le jeton est valide ou pas.

Si vous avez besoin d'aide, faites le moi savoir!

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X