[javascript] jQuery 및 Ajax와 함께 기본 인증 사용
브라우저를 통해 기본 인증을 만들려고하는데 실제로 갈 수는 없습니다.
이 스크립트가 없으면 브라우저 인증이 대신되지만 사용자가 인증하려고한다는 것을 브라우저에 알리고 싶습니다.
주소는 다음과 같아야합니다.
http://username:password@server.in.local/양식이 있습니다.
<form name="cookieform" id="login" method="post">
<input type="text" name="username" id="username" class="text"/>
<input type="password" name="password" id="password" class="text"/>
<input type="submit" name="sub" value="Submit" class="page"/>
</form>
그리고 스크립트 :
var username = $("input#username").val();
var password = $("input#password").val();
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = Base64.encode(tok);
return "Basic " + hash;
}
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
data: '{"username": "' + username + '", "password" : "' + password + '"}',
success: function (){
alert('Thanks for your comment!');
}
});
답변
jQuery의 beforeSend콜백을 사용 하여 인증 정보가있는 HTTP 헤더를 추가하십시오.
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},답변
일 년에 상황이 어떻게 변하는가. xhr.setRequestHeader현재 jQuery (1.7.2+) 대신 헤더 속성 외에도 $.ajax호출시 사용자 이름 및 비밀번호 속성이 포함됩니다 .
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
username: username,
password: password,
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});주석 및 기타 답변에서 편집 : 명확하게- (1.7 이전) 401 Unauthorized대신 응답 없이 사전에 인증을 보내 setRequestHeader려면 'headers':
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});답변
beforeSend 콜백 을 사용하여 다음과 같은 인증 정보가있는 HTTP 헤더를 추가하십시오.
var username = $("input#username").val();
var password = $("input#password").val();
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = btoa(tok);
return "Basic " + hash;
}
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
data: '{}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', make_base_auth(username, password));
},
success: function (){
alert('Thanks for your comment!');
}
});답변
답변
위의 예제는 약간 혼란스럽고 이것이 가장 좋은 방법 일 것입니다.
$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});Rico와 Yossi의 답변을 조합하여 위의 내용을 취했습니다.
답변
다른 사람들이 제안했듯이 Ajax 호출에서 직접 사용자 이름과 비밀번호를 설정할 수 있습니다.
$.ajax({
username: username,
password: password,
// ... other parameters.
});또는 자격 증명을 일반 텍스트로 저장하지 않으려면 headers 속성을 사용하십시오.
$.ajax({
headers: {"Authorization": "Basic xxxx"},
// ... other parameters.
});어느 쪽을 보내든지 서버는 정중해야합니다. Apache의 경우 .htaccess 파일은 다음과 같아야합니다.
<LimitExcept OPTIONS>
AuthUserFile /path/to/.htpasswd
AuthType Basic
AuthName "Whatever"
Require valid-user
</LimitExcept>
Header always set Access-Control-Allow-Headers Authorization
Header always set Access-Control-Allow-Credentials true
SetEnvIf Origin "^(.*?)$" origin_is=$0
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is설명:
일부 도메인 간 요청의 경우 브라우저는 인증 헤더가없는 프리 플라이트 OPTIONS 요청을 보냅니다 . 인증 지시문을프리 플라이트에 올바르게 응답 LimitExcept 태그 .
그런 다음 몇 가지 헤더를 보내 브라우저에 인증이 허용되었음을 알리고 Access-Control-Allow-Origin 은 사이트 간 요청에 대한 권한을 부여합니다.
경우에 따라 * 와일드 카드가 Access-Control-Allow-Origin의 값으로 작동하지 않는 경우 : 수신자의 정확한 도메인을 반환해야합니다. 이 값을 캡처하려면 SetEnvIf를 사용하십시오.
답변
사용 모든 ajax 요청에 대한 기본값을 설정할 수 jQuery ajaxSetup 함수를 .
$.ajaxSetup({
headers: {
'Authorization': "Basic XXXXX"
}
});