javascript شرح - استخدم المصادقة الأساسية مع jQuery و Ajax




use strict (9)

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

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

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

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

Answers

كما اقترح آخرون ، يمكنك تعيين اسم المستخدم وكلمة المرور مباشرة في مكالمة 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 لالتقاط هذه القيمة.


وفقا ل 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/

استخدم jQuery's beforeSend callback لإضافة عنوان HTTP مع معلومات المصادقة:

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

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

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

المرجع: beforeSend


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

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

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

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


هناك 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 
  },
});

الطريقة الثانية:

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

الطريقة الثالثة:

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

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

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

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

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

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


يمكنك التحقق من وجود عنصر أو عدم استخدام الطول في برنامج جافا سكريبت. إذا كان الطول أكبر من الصفر ، فسيكون العنصر موجودًا إذا كان الطول صفراً فلا يكون العنصر موجودًا

// These by Id
if( $('#elementid').length > 0){
  // Element is Present
}else{
  // Element is not Present
}

// These by Class
if( $('.elementClass').length > 0){
  // Element is Present
}else{
  // Element is not Present
}




javascript jquery ajax authentication