web-dev-qa-db-fra.com

Comment gérer l'authentification dans Angular JS application

J'implémente un système d'authentification dans mon angular js app.

Comment je le planifie ci-dessous:

  1. Obtenir des informations sur l'utilisateur (nom et passer du formulaire de connexion)
  2. Vérifiez si l'utilisateur existe ou non
  3. si le serveur existe, répondez avec un cookie de session et le frontend redirigera vers une certaine page.
  4. alors l'utilisateur fera une tâche qui générera une demande d'API
  5. La demande d'API doit contenir des informations de cookie envoyées à l'étape 3
  6. le serveur vérifie si le cookie a été généré ou non et si un cookie a été trouvé, puis répondez avec les résultats de la demande d'API. Et à mon service, je fais quelque chose comme
 MyApp.service ('myAuth', fonction ($ http, $ q) {
 This.authHeader = null; 
 This.checkAuth = function () {
 // faire un appel API et si le succès définit this.authHeader = réponse 
} 
 this.isAuthenticaed = function () {
 this.authHeader? return this.authHeder: return false ; 
}

Après avoir soumis le formulaire de connexion, j'appellerai checkAuth et récupérerai mon cookie de session sur mon serveur, comment ajouter les informations sur les cookies lors de l'appel suivant REST et aussi quand l'utilisateur naviguera dans l'application) après la connexion, je veux vérifier chaque fois qu'Authenticaed est vrai ou faux, dans Angularjs, quand il naviguera vers une autre page, est-ce qu'il se réinitialise après l'avoir défini dès le premier appel? Et mon approche 1-6 est-elle bonne ou avez-vous des Btw J'ai vérifié les entrées précédentes, mais ce ne sont pas ce que je veux savoir.

sessionauthenticationangularjscookies
18
arnold

Je ne suis pas sûr de votre backend, mais voici comment je le ferais

  • Créez une page de connexion distincte (URL dédiée non angular ou boîte de dialogue modale).
  • Si l'utilisateur n'est pas authentifié, redirigez vers cette page de connexion. Cela se fait par des redirections de serveur. Cette page peut utiliser ou non le framework angular, car il s'agit simplement d'envoyer un utilisateur\mot de passe au serveur.
  • Faites une POST (pas AJAX) à partir de la page de connexion et vérifiez sur le serveur).
  • Sur le serveur, définissez le cookie d'authentification. (Différents frameworks le font différemment. ASP.Net définit un cookie d'authentification de formulaire.)
  • Une fois que l'utilisateur est authentifié, redirigez l'utilisateur vers l'application angular angulaire et chargez tous ses composants).

Cela permet d'économiser tout code requis pour gérer l'authentification côté client dans Angular. Si l'utilisateur accède à cette page, il est authentifié et dispose du cookie.

Le comportement par défaut du navigateur consiste également à envoyer tous les cookies associés à un domaine à chaque demande, vous n'avez donc pas à vous inquiéter si angular envoie des cookies ou non.

35
Chandermani

J'utilise l'intercepteur http-auth. http://ngmodules.org/modules/http-auth-interceptor

Dans mon backend (asp.net mvc), je crée un service d'authentification simple et renvoie une erreur http 401 si l'utilisateur n'est pas authentifié. Ensuite, je gère l'erreur avec une vue de connexion sur le site SPA.

7
S3PP3L

Les idées avancées par les réponses précédentes fonctionneront, mais je pense qu'elles sont excessives. Vous n'avez besoin de rien de ce complexe.

comment ajouter les informations sur les cookies lors de l'appel suivant REST

Activez withCredentials par défaut dans $httpProvider ainsi:

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.withCredentials = true;
}]);

Ensuite, supprimez le caractère générique (si vous en aviez un) des en-têtes CORS et définissez allow-credentials, côté serveur. Dans mon cas, en utilisant Python + Flask + Flask-Restful , c'est super facile et ressemble à ceci:

import Flask
from flask_restful import Api
app = Flask(__name__)
api = Api(app)
api.decorators = [cors.crossdomain(Origin='http://localhost:8100', credentials=True)]

Désormais, les cookies seront définis et renvoyés automatiquement et de manière transparente par le navigateur. Voir ces discussions pour plus d'informations:

quand l'utilisateur naviguera dans l'application après la connexion, je veux vérifier à chaque fois que isAuthenticaed est vrai ou faux

Comme suggéré ci-dessus, demandez au serveur de renvoyer 401 si la session d'authentification expire ou est supprimée, et utilisez $httpInterceptor in Angular to catch this like so:

app.config(function($httpProvider) {
    var interceptor =
        function($q, $rootScope) {
            return {
                'response': function(response) {
                    return response;
                 },
                'responseError': function(rejection) {
                    if (rejection.status==401) {
                        // Modify this part to suit your needs.
                        // In my case I broadcast a message which is
                        // picked up elsewhere to show the login screen.
                        if (!rejection.config.url.endsWith('/login'))
                        {
                            $rootScope.$broadcast('auth:loginRequired');
                        }
                    }

                    return $q.reject(rejection)
                 }
            }
        };

    $httpProvider.interceptors.Push(interceptor);
});
4
Lane Rettig

(Divulgation: je suis l'un des développeurs de UserApp)

Vous pouvez utiliser le service tiers serApp pour cela, avec le module AngularJS .

Consultez le guide de démarrage , ou suivez le cours sur la Codecademy . Voici quelques exemples de son fonctionnement:

  • Formulaire de connexion avec 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>

    Les informations utilisateur sont accessibles via le service user: user.current.email

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

  • Formulaire d'inscription avec 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>

    ua-is-email Signifie que le nom d'utilisateur est le même que l'e-mail.

  • 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});

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

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

  • Lien de déconnexion:

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

  • Masquer les éléments qui ne devraient être visibles que lorsque vous êtes connecté:

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

Et pour vous authentifier auprès de vos services principaux, utilisez simplement user.token() pour obtenir le jeton de session et envoyez-le avec la demande AJAX. À l'arrière-plan, utilisez le - serApp API pour vérifier si le jeton est valide ou non.

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

1
Timothy E. Johansson