I want to use JavaScript to perform a POST request using the common "Authorization: Basic" method. The server hosts an OWIN C# App and on successful authentication it should give me a token in JSON format.
This is the wireshark equivalent of what I want to accomplish using plain 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"}
is it possible to do so? If so, how?
To send an HTTP POST request, we need to first create the object by calling new XMLHttpRequest() and then use the open() and send() methods of XMLHttpRequest. To receive notifications when the status of a request has changed, we need to subscribe to the onreadystatechange event.
Authentication JavaScript is nothing but JavaScript using the client ID to obtain Google ID token through Google Auth 2.0 server and then sending this generated token in request calls. Then the endpoint framework use client ID for authenticating the token ID that the JavaScript application has sent.
To send basic auth credentials with Curl, use the "-u login: password" command-line option. Curl automatically converts the login: password pair into a Base64-encoded string and adds the "Authorization: Basic [token]" header to the request.
This is the javascript request:
var clientId = "MyApp";
var clientSecret = "MySecret";
// var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret);
var authorizationBasic = window.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);
}
};
and this is the jQuery version:
var clientId = "MyApp";
var clientSecret = "MySecret";
// var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret);
var authorizationBasic = window.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);
}
});
In both situation I've encoded the clientId
and the clientSecret
in a string base64 using a jquery plugin. I am pretty sure you can find something similar in plain javascript.
This is a project where you have a Owin Web Api running in a console and a project where you can test your request in a web page using jQuery or the plain vanilla javascript. You might need to change the urls for the requests.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With