Thực hiện yêu cầu cơ bản xác thực HTTP POST bằng cách sử dụng Javascript

Question

Tôi muốn sử dụng JavaScript để thực hiện yêu cầu POST bằng phương thức "Ủy quyền: Cơ bản" chung. Máy chủ lưu trữ một ứng dụng C# OWIN và xác thực thành công nó sẽ cung cấp cho tôi một mã thông báo ở định dạng JSON.

Đây là Wireshark tương đương với những gì tôi muốn thực hiện bằng đồng bằng javascript:

POST /connect/token HTTP/1.1 
    Authorization: Basic c2lsaWNvbjpGNjIxRjQ3MC05NzMxLTRBMjUtODBFRi02N0E2RjdDNUY0Qjg= 
    Content-Type: application/x-www-form-urlencoded 
    Host: localhost:44333 
    Content-Length: 40 
    Expect: 100-continue 
    Connection: Keep-Alive 

    HTTP/1.1 100 Continue 

    grant_type=client_credentials&scope=api1HTTP/1.1 200 OK 
    Cache-Control: no-store, no-cache, max-age=0, private 
    Pragma: no-cache 
    Content-Length: 91 
    Content-Type: application/json; charset=utf-8 
    Server: Microsoft-HTTPAPI/2.0 
    Date: Fri, 17 Jul 2015 08:52:23 GMT 

    {"access_token":"c1cad8180e11deceb43bc1545c863695","expires_in":3600,"token_type":"Bearer"} 

là nó có thể làm như vậy? Nếu vậy, làm thế nào?

Answer 1

Đây là yêu cầu javascript:

var clientId = "MyApp"; 
var clientSecret = "MySecret"; 

var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret); 

var request = new XMLHttpRequest(); 
request.open('POST', oAuth.AuthorizationServer, true); 
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic); 
request.setRequestHeader('Accept', 'application/json'); 
request.send("username=John&password=Smith&grant_type=password"); 

request.onreadystatechange = function() { 
    if (request.readyState === 4) { 
     alert(request.responseText); 
    } 
}; 

và đây là phiên bản jQuery:

var clientId = "MyApp"; 
var clientSecret = "MySecret"; 

var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret); 

$.ajax({ 
    type: 'POST', 
    url: oAuth.AuthorizationServer, 
    data: { username: 'John', password: 'Smith', grant_type: 'password' }, 
    dataType: "json", 
    contentType: 'application/x-www-form-urlencoded; charset=utf-8', 
    xhrFields: { 
     withCredentials: true 
    }, 
    // crossDomain: true, 
    headers: { 
     'Authorization': 'Basic ' + authorizationBasic 
    }, 
    //beforeSend: function (xhr) { 
    //}, 
    success: function (result) { 
     var token = result; 
    }, 
    //complete: function (jqXHR, textStatus) { 
    //}, 
    error: function (req, status, error) { 
    alert(error); 
    } 
}); 

Trong cả hai tình huống tôi đã mã hóa các clientId và clientSecret trong một base64 chuỗi bằng cách sử dụng jquery plugin. Tôi khá chắc chắn bạn có thể tìm thấy một cái gì đó tương tự trong javascript đồng bằng.

Đây là một project nơi bạn có Owin Web Api đang chạy trong bảng điều khiển và dự án nơi bạn có thể kiểm tra yêu cầu của mình trong trang web bằng jQuery hoặc javascript vani thuần túy. Bạn có thể cần phải thay đổi các url cho các yêu cầu.