ユーザーがログインしてオンラインワインセラーを表示できるwebappに取り組んでいます。
Django REST=モデルのセットアップと、Angular but I 'ピースをまとめるのに問題があり、主な問題はユーザー認証にあります。
ここで多くの投稿とさまざまなチュートリアルを読んでいますが、認証を実装するための段階的な方法を見つけることができないようです:
私が理解していることからAngular=はPOST URLでリクエストを行い、DRFはユーザー名とパスワードが一致することを確認し、トークンまたは他の認証証明を返します。
私は近くにいるように感じますが、これがどのように機能して作品をまとめるかについて、より一般的な見解が必要です。
前もって感謝します
これを行うには多くの方法があると思いますが、私が何をするのかを説明させてください。これは長い記事になるでしょう。他の人がどのようにこれを行うか、または同じアプローチを実装するより良い方法を聞きたいです。 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>
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パースペクティブを解決しようとしました。
ありがとう!