ใช้การรับรองความถูกต้องเบื้องต้นกับ 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!');
    }
});

ใช้การbeforeSendเรียกกลับของ jQuery เพื่อเพิ่มส่วนหัว HTTP ด้วยข้อมูลการตรวจสอบความถูกต้อง:

beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},

สิ่งต่าง ๆ เปลี่ยนแปลงในหนึ่งปี นอกเหนือจากแอตทริบิวต์ส่วนหัวแทนที่xhr.setRequestHeaderjQuery ปัจจุบัน (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!'); 
  }
});

ใช้beforeSend callbackเพื่อเพิ่มส่วนหัว 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: {"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.
});

หรือใช้คุณสมบัติส่วนหัวหากคุณไม่ต้องการเก็บข้อมูลประจำตัวของคุณเป็นข้อความธรรมดา:

$.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 preflight ที่ไม่มีส่วนหัวการตรวจสอบสิทธิ์ของคุณ ตัดคำสั่งการตรวจสอบสิทธิ์ของคุณภายในแท็กLimitExceptเพื่อตอบสนองอย่างเหมาะสมกับ preflight

จากนั้นส่งส่วนหัวเล็กน้อยเพื่อบอกเบราว์เซอร์ว่าได้รับอนุญาตให้ตรวจสอบความถูกต้องและ Access-Control-Allow-Originเพื่อให้สิทธิ์สำหรับคำขอข้ามไซต์

ในบางกรณี* wildcard ไม่ทำงานเป็นค่าสำหรับ Access-Control-Allow-Origin: คุณต้องส่งคืนโดเมนที่ถูกต้องของ callee ใช้ SetEnvIf เพื่อจับภาพค่านี้

ใช้ฟังก์ชันjQuery ajaxSetupที่สามารถตั้งค่าเริ่มต้นสำหรับการร้องขอ ajax ทั้งหมด

$.ajaxSetup({
  headers: {
    'Authorization': "Basic XXXXX"
  }
});

JSONPไม่ทำงานกับการพิสูจน์ตัวตนพื้นฐานดังนั้น jQuery ก่อนการโทรกลับจะไม่ทำงานกับ JSONP / สคริปต์

ฉันจัดการเพื่อแก้ไขข้อ จำกัด นี้โดยการเพิ่มผู้ใช้และรหัสผ่านลงในคำขอ (เช่นผู้ใช้: 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 ด้วย

ฉันค้นหาวิธีแก้ปัญหาเพื่อรับข้อมูลโดย jQuery จากเซิร์ฟเวอร์ที่อยู่หลัง nginx และถูก จำกัด โดย 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/