在Django的REST框架+ Angular.js Web应用程序用户认证 [英] User Authentication in Django Rest Framework + Angular.js web app

问题描述

我工作的web应用程序，用户可以登录到网上看到自己的酒窖。

I'm working on a webapp where users can login to see their online wine cellar.

我已经得到了Django的REST模式设置，以及在角前端的设计，但我无法把拼在一起，我的主要问题是对用户身份验证。

I've got the Django REST models setup, as well as the front-end design in Angular but I'm having trouble putting the pieces together and my main issue is for user authentication.

我读过关于这里的许多职位和各种教程，但我似乎无法找到一个循序渐进的方法来实现认证：

I've read many posts on here and various tutorials but I can't seem to find a step by step method to implement authentication:

• 应该用什么样的权威性（令牌，会议，其他？）


• 在服务器端（它是一个看法？在的usermodel的UserManager或方法？）是如何验证管理


• 我有一个自定义用户模型（使用电子邮件作为用户名）。我可以使用通用的Django的登录方法还是需要创建自己的？


• 是如何认证处理的服务器和客户端之间的管理？

从我的理解角度使得在哪里DRF验证用户名和密码匹配的URL的POST请求，并返回一个令牌或其它验证证明。

From what I understand Angular makes a POST request on a url where DRF verifies that username and password match and returns a token or other auth proof.

我觉得我很接近，但我需要的是如何工作把拼凑一个更加普遍的看法。

I feel like I'm close but I need a more general view of how this works to put the pieces together.

在此先感谢

推荐答案

我想有很多方法可以做到这一点，让我解释一下我做什么，希望这是很有帮助的。这将是一个长期的职位。我很想听听别人怎么做，或者更好地执行同样的方法途径。您还可以看看我的种子工程在Github上，<一个href=\"https://github.com/zackargyle/angularjs-django-rest-framework-seed\">Angular-Django-Seed.

I imagine there are a lot of ways to do this, let me explain what I do, hopefully it is helpful. This is going to be a long post. I would love to hear how others do this, or better ways of implementing the same approach. You can also check out my seed project on Github, Angular-Django-Seed.

我用令牌认证与维托尔德Szczerba的 HTTP-AUTH拦截。他的做法的好处是，每当一个请求是从您的网站发送没有适当的凭据，您将被重定向到登录界面，但你的请求排队在登录完成重新发射。

I use token authentication with Witold Szczerba's http-auth-interceptor. The beauty of his approach is that whenever a request is sent from your site without proper credentials, you are redirected to the login screen, but your request is queued to be re-fired on login complete.

下面是登录表单使用的登录指令。它发布到Django的身份验证令牌端点，设置与响应令牌的cookie，设置与令牌，以便所有的请求将被认证的默认标题，并触发HTTP-AUTH拦截登录事件。

Here is a login directive used with the login form. It posts to Django's auth token endpoint, sets a cookie with the response token, sets the default header with the token so all requests will be authenticated, and fires the http-auth-interceptor login event.

.directive('login', function ($http, $cookieStore, authService) {
return {
  restrict: 'A',
  link: function (scope, elem, attrs) {

    elem.bind('submit', function () {
      var user_data = {
            "username": scope.username,
            "password": scope.password,
      };

      $http.post(constants.serverAddress + "api-token-auth", user_data, {"Authorization": ""})
          .success(function(response) {
              $cookieStore.put('djangotoken', response.token);
              $http.defaults.headers.common['Authorization'] = 'Token ' + response.token;
              authService.loginConfirmed();
          });
    });
  }
}

}）

我使用该模块。运行方法设置检查的cookie当用户来到现场，如果他们有Cookie集我设置的默认权限。

I use the module .run method to set check for the cookie when a user comes to the site, if they have the cookie set I set the default authorization.

.run(function($rootScope) {
  $rootScope.$broadcast('event:initial-auth');
})

下面是我的拦截指令处理该authService广播。如果需要登录，我隐藏一切，显示登录表单。否则隐藏的登录表单，并显示一切。

Here is my interceptor directive that handles the authService broadcasts. If login is required, I hide everything and show the login form. Otherwise hide the login form and show everything else.

.directive('authApplication', function ($cookieStore, $http) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {

          var login = elem.find('#login-holder');
          var main = elem.find('#main');

          scope.$on('event:auth-loginRequired', function () {
            main.hide();
            login.slideDown('fast');
          });

          scope.$on('event:auth-loginConfirmed', function () {
            main.show();
            login.slideUp('fast');
          });

          scope.$on('event:initial-auth', function () {
             if ($cookieStore.get('djangotoken')) {
               $http.defaults.headers.common['Authorization'] = 'Token ' + $cookieStore.get('djangotoken');
             }
             else {
               login.slideDown('fast');
               main.hide();
             }
          });
        }
     }
  })

要使用它我所有的HTML基本上是这样的。

To use it all my html was basically like this.

<body auth-application>
  <div id="login-holder">
    ... login form
  </div>

  <div id="main">
    ... ng-view, or the bulk of your html
  </div>

这篇关于在Django的REST框架+ Angular.js Web应用程序用户认证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！