Аутентификация пользователя в Django Rest Framework + Angular.веб-приложение на JS


Я работаю на веб-приложение, где пользователи могут войти, чтобы увидеть их онлайн винный погреб.

У меня есть настройка моделей Django REST, а также внешний дизайн в Angular, но у меня возникли проблемы с объединением частей, и моя главная проблема заключается в аутентификации пользователя.

Я прочитал много сообщений здесь и различные учебники, но я не могу найти пошаговый метод для реализации аутентификации:

  • какой auth должен использоваться (токен, Сессия, Другие?)
  • как проверка подлинности на стороне сервера (это вид? метод в UserModel или UserManager?)
  • у меня есть пользовательская модель пользователя (используя электронную почту в качестве имени пользователя). Могу ли я использовать общий метод входа Django или мне нужно создать свой собственный?
  • как процесс проверки подлинности между сервером и клиентской стороне?

из того, что я понимаю, Angular делает запрос POST на url, где DRF проверяет это имя пользователя и пароль соответствует и возвращает токен или другое доказательство подлинности.

Я чувствую, что я близко, но мне нужно более общее представление о том, как это работает, чтобы собрать все воедино.

спасибо заранее

2 55

2 ответа:

Я думаю, есть много способов сделать это, позвольте мне объяснить, что я делаю, надеюсь, что это поможет. Это будет длинный пост. Я хотел бы услышать, как другие делают это, или лучшие способы реализации того же подхода. Вы также можете проверить мой проект семян на Github,Angular-Django-Seed.

Я использовать проверку подлинности с помощью маркера с http-auth-interceptor. Красота его подхода заключается в том, что всякий раз, когда запрос отправляется от вашего сайт без надлежащих учетных данных вы перенаправляетесь на экран входа в систему, но ваш запрос помещается в очередь для повторного запуска при завершении входа в систему.

вот директива входа, используемая с формой входа. Он отправляет в конечную точку маркера аутентификации Django, устанавливает 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();
          });
    });
  }
}

})

Я использую модуль .выполнить метод для установки проверить 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>

Проверьте django-rest-auth и угловой-django-Регистрация-auth также

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

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

мы попытались решить наиболее распространенные вещи, связанные с Django auth/registration, с точки зрения бэкэнда и угловой перспективы в этих двух библиотеках.

спасибо!