web-dev-qa-db-ja.com

Django Rest Framework + Angular.js Webアプリでのユーザー認証

ユーザーがログインしてオンラインワインセラーを表示できるwebappに取り組んでいます。

Django REST=モデルのセットアップと、Angular but I 'ピースをまとめるのに問題があり、主な問題はユーザー認証にあります。

ここで多くの投稿とさまざまなチュートリアルを読んでいますが、認証を実装するための段階的な方法を見つけることができないようです：

  • 使用する認証の種類（トークン、セッション、その他？）
  • 認証はサーバー側でどのように管理されますか（ビューですか？UserModelまたはUserManagerのメソッドですか？）
  • カスタムユーザーモデルがあります（ユーザー名として電子メールを使用）。一般的なDjangoログインメソッドを使用できますか、独自のログインメソッドを作成する必要がありますか？
  • サーバーとクライアント側の間で認証プロセスはどのように管理されますか？

私が理解していることからAngular=はPOST URLでリクエストを行い、DRFはユーザー名とパスワードが一致することを確認し、トークンまたは他の認証証明を返します。

私は近くにいるように感じますが、これがどのように機能して作品をまとめるかについて、より一般的な見解が必要です。

前もって感謝します

pythondjangoangularjsauthenticationdjango-rest-framework
58
bpipat

これを行うには多くの方法があると思いますが、私が何をするのかを説明させてください。これは長い記事になるでしょう。他の人がどのようにこれを行うか、または同じアプローチを実装するより良い方法を聞きたいです。 Githubでシードプロジェクト Angular-Django-Seed を確認することもできます。

Witold Szczerbaの 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メソッドを使用して、ユーザーがサイトにアクセスしたときに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>
49
Zack Argyle

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関連の事柄と、これら2つのライブラリのangularパースペクティブを解決しようとしました。

ありがとう！

16
chachra