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). 이것은 Internet Explorer를 제외한 거의 모든 브라우저에서 작동합니다.URL을 통한 인증이 지원되지 않는 (호출이 단순히 실행되지 않음).

http://support.microsoft.com/kb/834489를 참조 하십시오 .

아래와 같이 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 
  },
});

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) {
    },
});

내가 찾은 기사 :

1. 이 주제의 답변
2. http://enable-cors.org/server_nginx.html
3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/