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!');
}
});
또는 1.5에 도입 된 headers 속성을 사용하십시오.
headers: {"Authorization": "Basic xxxx"}
참조 : jQuery Ajax API
위의 예제는 약간 혼란스럽고 이것이 가장 좋은 방법 일 것입니다.
$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});
Rico와 Yossi의 답변을 조합하여 위의 내용을 취했습니다.
btoa의 기능을 Base64로는 문자열을 암호화한다.
다른 사람들이 제안했듯이 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"
}
});
JSONP 는 기본 인증에서 작동하지 않으므로 jQuery beforeSend 콜백은 JSONP / Script에서 작동하지 않습니다.
요청에 사용자와 비밀번호를 추가하여이 제한을 해결했습니다 (예 : user : pw@domain.tld). URL을 통한 인증이 지원되지 않는 Internet Explorer를 제외한 거의 모든 브라우저에서 작동합니다 (호출이 단순히 실행되지 않음).
http://support.microsoft.com/kb/834489를 참조 하십시오 .
SharkAlley의 답변에 따르면 nginx에서도 작동합니다.
nginx 뒤의 서버에서 jQuery로 데이터를 가져오고 Base Auth로 제한하는 솔루션을 찾고있었습니다. 이것은 나를 위해 작동합니다 :
server {
server_name example.com;
location / {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization";
# Not necessary
# add_header Access-Control-Allow-Credentials "true";
# add_header Content-Length 0;
# add_header Content-Type text/plain;
return 200;
}
auth_basic "Restricted";
auth_basic_user_file /var/.htpasswd;
proxy_pass http://127.0.0.1:8100;
}
}
그리고 JavaScript 코드는 다음과 같습니다.
var auth = btoa('username:password');
$.ajax({
type: 'GET',
url: 'http://example.com',
headers: {
"Authorization": "Basic " + auth
},
success : function(data) {
},
});
내가 찾은 기사 :
- 이 주제의 답변
- http://enable-cors.org/server_nginx.html
- http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/
아래와 같이 3 가지 방법으로이를 달성 할 수 있습니다.
방법 1 :
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
headers: {
"Authorization": "Basic " + btoa(uName+":"+passwrd);
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
방법 2 :
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', "Basic " + btoa(uName+":"+passwrd));
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
방법 3 :
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
username:uName,
password:passwrd,
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
참고 URL : https://stackoverflow.com/questions/5507234/use-basic-authentication-with-jquery-and-ajax
'Programing' 카테고리의 다른 글
| @Transactional Spring-격리, 전파 (0) | 2020.02.22 |
|---|---|
| SQL Server Express 2012에 대한 원격 연결 사용 (0) | 2020.02.22 |
| 주어진 문자열의 모든 순열 생성 (0) | 2020.02.22 |
| C ++에서 문자열을 어떻게 토큰 화합니까? (0) | 2020.02.22 |
| HttpClient의 인증 헤더 설정 (0) | 2020.02.22 |