Django Rest Framework + Angular.js 웹 앱의 사용자 인증
사용자가 온라인 와인 저장고를보기 위해 로그인 할 수있는 웹앱을 개발 중입니다.
Django REST 모델 설정과 Angular의 프론트 엔드 디자인이 있지만 조각을 모으는 데 문제가 있으며 주요 문제는 사용자 인증입니다.
여기에서 많은 게시물과 다양한 자습서를 읽었지만 인증을 구현하는 단계별 방법을 찾을 수없는 것 같습니다.
- 어떤 종류의 인증을 사용해야합니까 (토큰, 세션, 기타?)
- 서버 측에서 인증을 관리하는 방법 (뷰입니까? UserModel 또는 UserManager의 메소드입니까?)
- 사용자 지정 사용자 모델이 있습니다 (이메일을 사용자 이름으로 사용). 일반 Django 로그인 방법을 사용할 수 있습니까? 아니면 직접 생성해야합니까?
- 인증 프로세스는 서버와 클라이언트 사이에서 어떻게 관리됩니까?
내가 이해하는 바에서 Angular는 DRF가 사용자 이름과 비밀번호가 일치하는지 확인하고 토큰 또는 기타 인증 증명을 반환하는 URL에 POST 요청을합니다.
나는 가까이있는 것처럼 느껴지지만 이것이 어떻게 작동하는지에 대한 좀 더 일반적인 시각이 필요합니다.
미리 감사드립니다
이 작업을 수행하는 방법이 많이 있다고 생각합니다. 제가하는 일에 대해 설명하겠습니다. 도움이 되길 바랍니다. 이것은 긴 게시물이 될 것입니다. 나는 다른 사람들이 이것을 어떻게하는지 또는 동일한 접근 방식을 구현하는 더 나은 방법을 듣고 싶습니다. Github, Angular-Django-Seed 에서 내 시드 프로젝트를 확인할 수도 있습니다 .
Witold Szczerba의 http-auth-interceptor 와 함께 토큰 인증을 사용합니다 . 그의 접근 방식의 장점은 적절한 자격 증명없이 사이트에서 요청이 전송 될 때마다 로그인 화면으로 리디렉션되지만 로그인이 완료되면 요청이 다시 실행되도록 대기한다는 것입니다.
다음은 로그인 양식과 함께 사용되는 로그인 지시문입니다. Django의 인증 토큰 끝점에 게시하고, 응답 토큰으로 쿠키를 설정하고, 토큰으로 기본 헤더를 설정하여 모든 요청이 인증되도록하고, 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 메서드를 사용하여 사용자가 사이트를 방문 할 때 쿠키 확인을 설정하고 쿠키가 설정되어 있으면 기본 권한을 설정합니다.
.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 인증 / 등록 관련 문제를 해결하려고 노력했습니다.
감사!
'Programing' 카테고리의 다른 글
| jackson.codehaus.org jar 다운로드 (0) | 2020.12.13 |
|---|---|
| R markdown, knitr, pandoc, beamer를 사용한 플롯 크기 및 해상도 (0) | 2020.12.13 |
| Kubernetes를 Docker Compose처럼 사용할 수 있습니까? (0) | 2020.12.13 |
| Linux 디렉토리 권한은 쓰기를 읽고 삭제하지는 않습니다. (0) | 2020.12.13 |
| 자바 스크립트 디자인 패턴 (0) | 2020.12.13 |