search

aram87 / SecuringWebApiUsingApiKey

A tutorial about implementing API Key Authentication in ASP.NET Core Web API project
http://codingsonata.com/secure-asp-net-core-web-api-using-api-key-authentication/
GNU General Public License v3.0
38 stars 23 forks source link

Call Api from javascript #1

Open mtugnoli opened 3 years ago

mtugnoli commented 3 years ago

Is it possible to call WeatherForecast Api by javascript from Ajax ? how is the token used ?

I try this, but seem not run..

$.ajax({ type: 'GET', url: "http://localhost:4321/WeatherForecast", contentType: "application/json; charset=utf-8", dataType: "JSON", beforeSend: function (xhr) { xhr.setRequestHeader('ApiKey', 'hL4bA4nB4yI0vI0fC8fH7eT6'); },
success: function (result) { alert(JSON.stringify(result));

},
error: function (xhr, status, error) {
    alert(error);
}

});

aram87 commented 3 years ago

Hello,

Definitely, you can call the API using JavaScript.

Since you are using $.ajax, then are you sure jQuery is properly referenced in your page? Also did you try to test the API separately? Like through postman? did it work fine?

Your code looks fine to me but am not sure what is happening wrong.

If you are using jQuery version 1.5+, you can instead use the 'headers' property, like the below:

$.ajax({ type: 'GET', url: "http://localhost:4321/WeatherForecast", contentType: "application/json; charset=utf-8", dataType: "JSON", headers: { 'ApiKey': 'hL4bA4nB4yI0vI0fC8fH7eT6' }, success: function (result) { alert(JSON.stringify(result)); }, error: function (xhr, status, error) { alert(error); } });

Try this out and let me know if it works. If it didn't work, please share what error are you getting?

Regards,

mtugnoli commented 3 years ago

no, it doesn't work! i tried with postman and it works fine, on ApiKeyMiddleware.cs I can debug Headers.Keys, and is apiKey is found

_>? context.Request.Headers.Keys {string[9]}

[1]: "Accept-Encoding"
[2]: "Cache-Control"
[3]: "Connection"
[4]: "Cookie"
[5]: "Host"
[6]: "User-Agent"
[7]: "ApiKey"
[8]: "Postman-Token"

_

I call from my .html page... apikey is not found

_>? context.Request.Headers.Keys {string[12]}

[1]: "Accept-Encoding"
[2]: "Accept-Language"
[3]: "Connection"
[4]: "Host"
[5]: "User-Agent"
[6]: "Access-Control-Request-Method"
[7]: "Access-Control-Request-Headers"
[8]: "Origin"
[9]: "Sec-Fetch-Dest"
[10]: "Sec-Fetch-Mode"
[11]: "Sec-Fetch-Site"

_

mtugnoli commented 3 years ago

But in network tab of firefox key seem sent !

err

mtugnoli commented 3 years ago

This is my html source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="aspNetHidden">
</div>
<div id="maindiv">
<button id="btnSend" type="button">TEST</button>
</div>

<script type="text/javascript">
$(document).ready(function () {
$("#btnSend").click( function()
{
SendSpedizione();
}
);

}); 

function SendSpedizione() {     
$.ajax({
type: 'GET',
url: "http://localhost:4321/WeatherForecast",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
headers: {
'ApiKey': 'hL4bA4nB4yI0vI0fC8fH7eT6'
},
success: function (result) {
alert(JSON.stringify(result));
},
error: function (xhr, status, error) {
alert(error);
}
});
}           
</script>
</body>
</html>