we will discuss how to pass basic authentication credentials to the Web API service using jQuery AJAX.
Depending on the credentials provided the web api service should authenticate and return the correct results. If female username and password are used only female employees should be returned. If male username and password are used only male employees should be returned.
If invalid username and password are used the service should return 401 Unauthorized message.
HTML and jQuery code used in the demo. Copy and paste the following code in HtmlPage1.html in ClientApplication project.
Depending on the credentials provided the web api service should authenticate and return the correct results. If female username and password are used only female employees should be returned. If male username and password are used only male employees should be returned.
If invalid username and password are used the service should return 401 Unauthorized message.
HTML and jQuery code used in the demo. Copy and paste the following code in HtmlPage1.html in ClientApplication project.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var ulEmployees = $('#ulEmployees');
$('#btn').click(function () {
// Get the username & password from textboxes
var username = $('#txtUsername').val();
var password = $('#txtPassword').val();
$.ajax({
type: 'GET',
// Make sure to change the port number to
// where you have the employee service
// running on your local machine
url: 'http://localhost:35171/api/Employees',
dataType: 'json',
// Specify the authentication header
// btoa() method encodes a string to Base64
headers: {
'Authorization': 'Basic ' + btoa(username + ':' + password)
},
success: function (data) {
ulEmployees.empty();
$.each(data, function (index, val) {
var fullName = val.FirstName + ' ' + val.LastName;
ulEmployees.append('<li>' + fullName + ' (' + val.Gender + ')</li>')
});
},
complete: function (jqXHR) {
if (jqXHR.status == '401') {
ulEmployees.empty();
ulEmployees.append('<li style="color:red">'
+ jqXHR.status + ' : ' + jqXHR.statusText + '</li>')
}
}
});
});
$('#btnClear').click(function () {
ulEmployees.empty();
});
});
</script>
</head>
<body>
Username : <input type="text" id="txtUsername" />
Password : <input type="password" id="txtPassword" />
<br /><br />
<input id="btn" type="button" value="Authenticate and Get Employees" />
<input id="btnClear" type="button" value="Clear" />
<ul id="ulEmployees"></ul>
</body>
</html>
.png)
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.