AngularJs + Django RESTful : 세션 기반 인증

Question

현재 웹 사이트를 대체 할 앵귤러 웹 응용 프로그램을 개발 중입니다. 현재 웹 사이트는 세션 기반 인증을 사용합니다. 현재로서는 가져 오기 또는 게시 요청으로 호스팅 된 API에 액세스 할 수 없습니다.

파이썬 간단한 서버를 사용하여 로컬 컴퓨터에서 각도 응용 프로그램을 개발하고 있지만 API는 온라인으로 호스팅됩니다.

필자는 도움없이 API를 변경할 수 없기 때문에 각도가 완전히 수정 된 것을 선호합니다 (이전에 상사가 작성했으며 현재 프로덕션 버전에서 사용됨). 로그인 페이지가 없으므로 헤더와 요청에 인증 정보를 제공하려고합니다.

내 각형 응용 프로그램은 django와 관계없이 작성되었습니다. ,

app.factory('Test', ['$resource', function($resource) { 
    return $resource('https://www.phonywebsite.org/en/api/test/') 
}; 

내가 지속적으로 301을 얻을 :

app.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
    $httpProvider.defaults.headers.common = {'username': btoa('myUsername'), 'password': btoa('myPassword') 
}; 
}]); 

그리고 내 서비스 : 난 그냥 지금까지 내가 헤더를 설정하기 위해 다음과 같은 노력하고있어 장고 백엔드에게

에 액세스하려면 400 및 403 오류. 최근에는 대부분 301 오류가 있었고 api에서 응답이 없습니다. CORS 정책 오류가 발생하지 않고 API에 접근하려고 임시 수정으로 CORS 크롬 확장 허용을 사용하고 있습니다.

내 질문에

1. 어떻게 크롬 확장 기능을 사용하지 않고 CORS 오류를 해결할 수 있습니까?

2. 세션 기반 인증을 사용하는 장고 백엔드에 내 인증을 제공하려면 어떻게해야 csrf 쿠키가 헤더에 있는지 확인해야합니다.

Answer 1

첫 번째 질문에 답하려면 cors 확장 프로그램을 사용하는 것이 임시 해결책이며 클라이언트가 사용하지 않을 수도 있으므로 사용하지 않아야합니다. CORS를 처리하려면 크로스 사이트 API 호출의 작동 방식을 이해해야합니다. 짧은 CORS에서는 AJAX 요청이 동일한 원점 제한을 우회하는 메커니즘입니다. 이러한 상황을 처리하려면 백엔드를 업데이트하고 추가해야합니다.

CORS_ORIGIN_ALLOW_ALL = True 
CORS_ALLOW_CREDENTIALS = True 

이것을 추가하면 settings.py은 CORS 문제를 중단해야합니다.

두 번째 질문에 답하기 위해 angle은 이미 CSRF에 대한 지원을 제공하므로 전투 절반이 이미 승리했습니다. 필요한 것은 csrf 토큰을 받아들이 기위한 모듈에 패치를 추가하는 것입니다 (이 이름은 약간 다른 각도입니다). 이미이 일을뿐만 아니라 그것의 좋은 일을했을 :

var app = angular.module('app', ['...']); 

app.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
}]); 

는 이것이 할 것입니다 것은 확인입니다 당신이 할 때마다 $ HTTP하여 CSRF 토큰뿐만 아니라 설정 호출합니다.

학습 기회로 ng 쿠키를 사용해 볼 수도 있습니다. 이것을 설명하기 위해 더 자세히 설명하기 위해, 전화를 걸 때마다 쿠키와 함께 번들로 요청하므로 request.COOKIES에서 쉽게 액세스 할 수 있습니다.당신은 분명이 수정을 할 수 있지만이 당신이 일반적으로 요점을 이해하도록하기 위해 $에 http 사용량을 보여줍니다 생각

app.factory('APIService', function ($http) { 
    return $http({url: 'https://www.phonywebsite.org/en/api/test/', 
       method: 'GET'}) 
} 

:

당신은, 당신은뿐만 아니라 당신의 API를 호출하는 방법을 변경하려면 뭔가가 필요 .

여기에 응용 프로그램 주위에 인증을 더 추가하거나 (django auth를 자신의 사용자 정의 인증으로 바꿀 수는 있지만) 사용 사례에 따라 달라질 수 있습니다.

희망이 도움이됩니다.