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의 콜백을 사용하여 인증 정보가 포함된 HTTP 헤더를 추가합니다.
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},
1년 동안 상황이 어떻게 변하는지.대신 헤더 애트리뷰트에 더해서xhr.setRequestHeader, current 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!');
}
});
댓글 및 기타 답변에서 편집:알기 쉽게 하기 위해 - 먼저 인증을 전송하기 위해401 Unauthorized응답(대신뢰setRequestHeader(-1.7 이전) 사용'headers':
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
다음과 같은 인증 정보를 포함한 HTTP 헤더를 추가하려면 beforeSend 콜백을 사용합니다.
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: {"Authorization": "Basic xxxx"}
레퍼런스: jQuery Ajax API
위의 예는 다소 혼란스러우며, 이것이 가장 좋은 방법입니다.
$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});
저는 Rico와 Yossi의 답변을 조합하여 위의 내용을 취합했습니다.
다른 사용자가 제안했듯이 Ajax 콜에서 사용자 이름과 비밀번호를 직접 설정할 수 있습니다.
$.ajax({
username: username,
password: password,
// ... other parameters.
});
또는 자격 증명을 일반 텍스트로 저장하지 않으려면 헤더 속성을 사용합니다.
$.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를 사용하여 이 값을 캡처합니다.
jQuery ajaxSetup 함수를 사용하면 모든 Ajax 요구에 대한 기본값을 설정할 수 있습니다.
$.ajaxSetup({
headers: {
'Authorization': "Basic XXXXX"
}
});
이를 실현하는 방법은 다음과 같이 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
},
});
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/
Apache와 함께 실제 JQuery Ajax 인증을 시작하기 전에 필요한 IIS를 보여 드리겠습니다.
예를 들어 /secure/* 경로가 있는 경우.web.config를 생성하여 접근을 금지해야 합니다.응용 프로그램을 전송하기 전에만 /secure 경로의 it 페이지에 액세스할 수 있어야 합니다.
<?xml version="1.0"?>
<configuration>
<system.web>
<!-- Anonymous users are denied access to this folder (and its subfolders) -->
<authorization>
<deny users="?" />
</authorization>
</system.web>
</configuration>
<security>
<authentication>
<anonymousAuthentication enabled="false" />
<basicAuthentication enabled="true" />
</authentication>
</security>
언급URL : https://stackoverflow.com/questions/5507234/use-basic-authentication-with-jquery-and-ajax
'programing' 카테고리의 다른 글
| Java 8의 java.time API에서의 모킹 타임 (0) | 2022.10.31 |
|---|---|
| JavaScript 배열에서 임의 값 가져오기 (0) | 2022.10.31 |
| mysql 날짜 업데이트(슬래시 포함) (0) | 2022.10.31 |
| 유형 오류 가져오기: Vue GoogleMapApiLoader를 사용할 때 순환 구조를 JSON으로 변환하는 중 (0) | 2022.10.21 |
| MySQL 열 ENUM 값 변경 (0) | 2022.10.21 |