python - create - Autenticación de usuario en la aplicación web Django Rest Framework+Angular.js

django rest framework social auth

Question

Estoy trabajando en una aplicación web donde los usuarios pueden iniciar sesión para ver su bodega en línea.

Tengo la configuración de los modelos Django REST, así como el diseño del front-end en Angular, pero tengo problemas para juntar las piezas y mi principal problema es la autenticación del usuario.

He leído muchas publicaciones aquí y varios tutoriales, pero parece que no puedo encontrar un método paso a paso para implementar la autenticación:

• ¿Qué tipo de auth se debe utilizar (Token, Session, Other?)
• ¿Cómo se gestiona la autenticación en el lado del servidor (es un método de vista? A en el UserModel o UserManager?)
• Tengo un modelo de usuario personalizado (usando el correo electrónico como nombre de usuario). ¿Puedo usar el método de inicio de sesión genérico de Django o necesito crear el mío propio?
• ¿Cómo se gestiona el proceso de autenticación entre el servidor y el lado del cliente?

Por lo que entiendo, Angular realiza una solicitud POST en una url donde DRF verifica que el nombre de usuario y la contraseña coincidan y devuelve un token u otra prueba de autenticación.

Siento que estoy cerca, pero necesito una visión más general de cómo funciona esto para unir las piezas.

Gracias por adelantado

Answer 1

Echa un vistazo a django-rest-auth y angular-django-registration-auth también

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

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

Hemos intentado resolver las cuestiones más comunes relacionadas con la autenticación / registro de Django desde una perspectiva backend y angular en estas dos bibliotecas.

¡Gracias!

Answer 2

Me imagino que hay muchas maneras de hacerlo, permítanme explicar lo que hago, espero que sea útil. Esta va a ser una publicación larga. Me encantaría escuchar cómo otros hacen esto, o mejores formas de implementar el mismo enfoque. También puedes consultar mi proyecto inicial en Github, Angular-Django-Seed .

Utilizo la autenticación de token con el http-auth-interceptor Witold Szczerba. La belleza de este enfoque es que cada vez que se envía una solicitud desde su sitio sin las credenciales adecuadas, se le redirige a la pantalla de inicio de sesión, pero su solicitud se pone en cola para que se vuelva a disparar cuando se complete la sesión.

Aquí hay una directiva de inicio de sesión utilizada con el formulario de inicio de sesión. Se publica en el extremo de token de autenticación de Django, establece una cookie con el token de respuesta, establece el encabezado predeterminado con el token para que todas las solicitudes se autentiquen y activa el evento de inicio de sesión 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();
          });
    });
  }
}

})

Utilizo el método .run del módulo para establecer la verificación de la cookie cuando un usuario llega al sitio. Si tienen el conjunto de cookies, establezco la autorización predeterminada.

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

Aquí está mi directiva de interceptor que maneja las transmisiones de authService. Si se requiere iniciar sesión, oculto todo y muestro el formulario de inicio de sesión. De lo contrario, oculte el formulario de inicio de sesión y muestre todo lo demás.

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

Para usarlo, todo mi html era básicamente así.

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

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