[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!');
    }
});

답변

또는 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"
  }
});