首页 文章

Django Rest Framework Angular.js Web应用程序中的用户身份验证

提问于
浏览 次
56

我正在开发一个webapp，用户可以登录以查看他们的在线酒窖 .

我有Django REST模型设置，以及Angular中的前端设计，但我无法将各个部分组合在一起，我的主要问题是用户身份验证 .

我在这里阅读了很多帖子和各种教程，但我似乎无法找到一步步实现身份验证的方法：

  • 应该使用什么样的身份验证（令牌，会话，其他？）

  • 如何在服务器端管理身份验证（它是一个视图？UserModel或UserManager中的方法？）

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

  • 如何在服务器端和客户端之间管理身份验证过程？

根据我的理解，Angular在URL上发出POST请求，其中DRF验证用户名和密码是否匹配并返回令牌或其他身份证明 .

我觉得我很接近，但我需要更全面地了解这是如何将各个部分组合在一起的 .

提前致谢

python django angularjs authentication django-rest-framework

2 回答

  • 16

    查看django-rest-auth和angular-django-registration-auth

    https://github.com/Tivix/angular-django-registration-auth

    https://github.com/Tivix/django-rest-auth

    我们试图从这两个库中的后端和角度角度解决最常见的Django auth / registration相关事物 .

    谢谢！

    回复于
  • 49

    我想有很多方法可以做到这一点，让我解释一下我做了什么，希望它有所帮助 . 这将是一个很长的帖子 . 我很想知道其他人如何做到这一点，或者更好的方法来实现相同的方法 . 您还可以在Github上查看我的种子项目，Angular-Django-Seed .

    我使用Witold Szczerba的http-auth-interceptor进行令牌认证 . 他的方法之一是，无论何时在没有适当凭据的情况下从您的站点发送请求，您都会被重定向到登录屏幕，但您的请求将排队等待在登录完成时重新启动 .

    这是一个与登录表单一起使用的登录指令 . 它发布到Django的身份验证令牌 endpoints ，使用响应令牌设置cookie，使用令牌设置默认头，以便对所有请求进行身份验证，并触发http-auth-interceptor登录事件 .

    .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();
          });
    });
  }
}

    }）

    我使用模块.run方法设置用户访问网站时检查cookie，如果他们有cookie设置我设置了默认授权 .

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

    这是我的拦截器指令，它处理authService广播 . 如果需要登录，我会隐藏所有内容并显示登录表单 . 否则隐藏登录表单并显示其他所有内容 .

    .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基本上都是这样的 .

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

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

相关问题