javascript - use strict شرح




استخدم المصادقة الأساسية مع jQuery و Ajax (7)

أحاول إنشاء مصادقة أساسية من خلال المتصفح ، ولكن لا يمكنني الوصول إلى هناك.

إذا لم يكن هذا النص البرمجي هنا ، فستستولي مصادقة المتصفح ، لكنني أرغب في إعلام المتصفح بأن المستخدم على وشك إجراء المصادقة.

يجب أن يكون العنوان شيئًا مثل:

http://username:[email protected]/

لدي شكل:

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

أو استخدم ببساطة خاصية الرؤوس التي تم إدخالها في 1.5:

headers: {"Authorization": "Basic xxxx"}

المرجع: beforeSend


استخدم 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!'); 
    }
});

استخدم وظيفة jQuery ajaxSetup ، التي يمكنها إعداد القيم الافتراضية لجميع طلبات ajax.

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

الأمثلة المذكورة أعلاه مربكة بعض الشيء ، وربما تكون هذه هي الطريقة الأفضل:

$.ajaxSetup({
  headers: {
    'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
  }
});

أخذت ما ورد أعلاه من مزيج من إجابة ريكو ويوسي.

btoa الدالة btoa Base64 إلى سلسلة.


كيف تتغير الامور في السنة. بالإضافة إلى سمة الرأس في مكان xhr.setRequestHeader ، jQuery الحالي (1.7.2+) يتضمن سمة اسم المستخدم وكلمة المرور مع استدعاء $.ajax .

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  async: false,
  username: username,
  password: password,
  data: '{ "comment" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});

EDIT من التعليقات والإجابات الأخرى: ليكون واضحا - من أجل إرسال المصادقة بشكل استباقي دون 401 Unauthorized استجابة 401 Unauthorized ، بدلا من setRequestHeader (قبل -1.7) استخدام 'headers' :

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  async: false,
  headers: {
    "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
  },
  data: '{ "comment" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});

لا يعمل JSONP مع المصادقة الأساسية حتى لا يعمل jQuery beforeSend callback مع JSONP / Script.

تمكنت من العمل حول هذا القيد عن طريق إضافة المستخدم وكلمة المرور إلى الطلب (على سبيل المثال المستخدم: [email protected]). يعمل هذا إلى حد كبير مع أي متصفح باستثناء Internet Explorer حيث لا يتم دعم المصادقة عبر عناوين URL (لن يتم تنفيذ المكالمة ببساطة).

انظر http://support.microsoft.com/kb/834489 .


وفقا ل SharkAlley الإجابة أنها تعمل مع nginx أيضا.

كنت ابحث عن حل للحصول على البيانات عن طريق jQuery من خادم وراء nginx ومقيدة من قبل قاعدة 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;
    }
}

وجافا سكريبت هو:

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/




authentication