Ajax API調用Base64身份驗證

Question

我試圖讓基本API調用正常工作，但API提供程序不提供任何開發人員支持。他們要求每個呼叫都發送一個base64基本認證頭。當我使用他們的在線API測試工具時，我的密鑰是有效的，但我無法在我自己的代碼或JSFiddle.net中使用它。我甚至試圖複製從我的代碼中的測試實用程序返回的「身份驗證：基本....」值，並且這不起作用。

我看了很多在Stackoverflow中的例子，我用其他API沒有問題的類似代碼。 base64基本身份驗證對我來說是新的，當我在IE中運行代碼時，調試器會提示我找不到的語法錯誤。如果發生錯誤，我期待401錯誤。

對錯誤的任何想法或其他調試方法？

$(document).ready(function() { 
    var mySecret = "somevalue"; 
    var myClientId = "somevalue"; 
    $.ajax({ 
     url: "https://www.udemy.com/api-2.0/courses/", 
     type: 'GET', 
     dataType: "json", 
     contentType: "text/plain", 
     beforeSend: function (xhr) { 
      xhr.setRequestHeader("Authorization", "Basic " + btoa(myClientId+":"+ mySecret)); 
     }, 
     success: function(data) { 
      alert("hi"); 
     } 
    }); 
}); 

Answer 1

什麼你可能已經來到這裏是CORS或Cross Origin Resource Sharing問題。它可以防止網站任意提出要求。它的原因很複雜，但它確保您的安全！雖然，這是一個主要的痛苦。

打開方便的花花公子Chrome Dev Tools，看看網絡請求實際發生了什麼。由於同源策略（COR），它絕對不能在JSFiddle中工作。

您可以在瀏覽器中獲取JSON，因爲這不是跨站點請求。查看哪些頭文件來回發送，並查看您的Udemy API門戶網站是否有方法爲Allow-Origin頭設置可接受的Origin。你的IP地址可能是你在本地工作。

Answer 2

通常情況下，Ajax與相同的域一起工作。爲了實現跨域嘗試CORSCORS URL

Answer 3

您可以編碼這樣的：

var header = {"Authorization": "Basic " + btoa(username + ":" + password)}; 

頭加入這樣的Ajax調用：

$.ajax({ 
    url: "https://www.udemy.com/api-2.0/courses/", 
    type: 'GET', 
    dataType: "json", 
    contentType: "text/plain", 
    header, 
    success: function(data) { 
     alert("hi"); 
    } 
}); 

這反正對我的作品。建議您也需要CORS。

Answer 4

您似乎需要手動設置請求標頭與base64身份驗證數據。

的說明在這裏：http://coderseye.com/2007/how-to-do-http-basic-auth-in-ajax.html

首先，您需要採取以下代碼從這裏：http://www.webtoolkit.info/javascript-base64.html做base64編碼

/** 
* 
* Base64 encode/decode 
* http://www.webtoolkit.info/ 
* 
**/ 

var Base64 = { 

    // private property 
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/=", 

    // public method for encoding 
    encode : function (input) { 
     var output = ""; 
     var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
     var i = 0; 

     input = Base64._utf8_encode(input); 

     while (i < input.length) { 

      chr1 = input.charCodeAt(i++); 
      chr2 = input.charCodeAt(i++); 
      chr3 = input.charCodeAt(i++); 

      enc1 = chr1 >> 2; 
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
      enc4 = chr3 & 63; 

      if (isNaN(chr2)) { 
       enc3 = enc4 = 64; 
      } else if (isNaN(chr3)) { 
       enc4 = 64; 
      } 

      output = output + 
      this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + 
      this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4); 

     } 

     return output; 
    }, 

    // public method for decoding 
    decode : function (input) { 
     var output = ""; 
     var chr1, chr2, chr3; 
     var enc1, enc2, enc3, enc4; 
     var i = 0; 

     input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 

     while (i < input.length) { 

      enc1 = this._keyStr.indexOf(input.charAt(i++)); 
      enc2 = this._keyStr.indexOf(input.charAt(i++)); 
      enc3 = this._keyStr.indexOf(input.charAt(i++)); 
      enc4 = this._keyStr.indexOf(input.charAt(i++)); 

      chr1 = (enc1 << 2) | (enc2 >> 4); 
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
      chr3 = ((enc3 & 3) << 6) | enc4; 

      output = output + String.fromCharCode(chr1); 

      if (enc3 != 64) { 
       output = output + String.fromCharCode(chr2); 
      } 
      if (enc4 != 64) { 
       output = output + String.fromCharCode(chr3); 
      } 

     } 

     output = Base64._utf8_decode(output); 

     return output; 

    }, 

    // private method for UTF-8 encoding 
    _utf8_encode : function (string) { 
     string = string.replace(/\r\n/g,"\n"); 
     var utftext = ""; 

     for (var n = 0; n < string.length; n++) { 

      var c = string.charCodeAt(n); 

      if (c < 128) { 
       utftext += String.fromCharCode(c); 
      } 
      else if((c > 127) && (c < 2048)) { 
       utftext += String.fromCharCode((c >> 6) | 192); 
       utftext += String.fromCharCode((c & 63) | 128); 
      } 
      else { 
       utftext += String.fromCharCode((c >> 12) | 224); 
       utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
       utftext += String.fromCharCode((c & 63) | 128); 
      } 

     } 

     return utftext; 
    }, 

    // private method for UTF-8 decoding 
    _utf8_decode : function (utftext) { 
     var string = ""; 
     var i = 0; 
     var c = c1 = c2 = 0; 

     while (i < utftext.length) { 

      c = utftext.charCodeAt(i); 

      if (c < 128) { 
       string += String.fromCharCode(c); 
       i++; 
      } 
      else if((c > 191) && (c < 224)) { 
       c2 = utftext.charCodeAt(i+1); 
       string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
       i += 2; 
      } 
      else { 
       c2 = utftext.charCodeAt(i+1); 
       c3 = utftext.charCodeAt(i+2); 
       string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
       i += 3; 
      } 

     } 

     return string; 
    } 

} 

然後你需要的代碼來構建AUTH數據，這只是一個base64的用戶和密碼：

function make_base_auth(user, password) { 
    var tok = user + ':' + password; 
    var hash = Base64.encode(tok); 
    return "Basic " + hash; 
} 

然後你只需提出請求前添加使用jQuery頭：

var service_url = "https://www.udemy.com/api-2.0/courses/" 
$.ajax({ 
    type: "GET", 
    url: service_url, 
    dataType: "xml", 
    data: "ParamId=" + FormId.value, 
    processData: false, 
    beforeSend : function(req) { 
     req.setRequestHeader('Authorization', 
       make_base_auth ('myClientId', 'mySecret')); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
     ajaxError(XMLHttpRequest, textStatus, errorThrown); 
    }, 
    success: function(xml) { DoSomething(xml); } 
});