we will discuss implementing login page for ASP.NET Web API.
We want to design a login page that looks as shown below
If we provide invalid username and password the error should be displayed as shown below
Add a new HTML page to the EmployeeService project. Name it Login.html. Copy and paste the following HTML & jQuery code.
Please note :
1. sessionStorage data is lost when the browser window is closed.
2. To store an item in the browser session storage use setItem() method
Example : sessionStorage.setItem("accessToken", response.access_token)
Example : sessionStorage.getItem("accessToken")
4. To remove an item from the browser session storage use removeItem() method
Example : sessionStorage.removeItem('accessToken')
On the Register.html page, we do not have Login button, which takes us to the Login page if the user is already registered. So please include Login button just below "New User Registration" text in the <th> element on Register.html page as shown below.
In our next post we will discuss implementing the Data.html page which retrieves data by calling the EmployeesController using the bearer token.
We want to design a login page that looks as shown below
If we provide invalid username and password the error should be displayed as shown below
Add a new HTML page to the EmployeeService project. Name it Login.html. Copy and paste the following HTML & jQuery code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding-top:20px">
<div class="col-md-10 col-md-offset-1">
<div class="well">
<!--Table to capture username and password-->
<table class="table table-bordered">
<thead>
<tr class="success">
<th colspan="2">
Existing User Login
<a href="Register.html" class="btn btn-success pull-right">
Register
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Usename</td>
<td>
<input type="text" id="txtUsername" placeholder="Username" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" id="txtPassword"
placeholder="Password" />
</td>
</tr>
<tr class="success">
<td colspan="2">
<input id="btnLogin" class="btn btn-success" type="button"
value="Login" />
</td>
</tr>
</tbody>
</table>
<!--Bootstrap alert to display error message if the login fails-->
<div id="divError" class="alert alert-danger collapse">
<a id="linkClose" href="#" class="close">×</a>
<div id="divErrorText"></div>
</div>
</div>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#linkClose').click(function () {
$('#divError').hide('fade');
});
$('#btnLogin').click(function () {
$.ajax({
// Post username, password & the grant type to /token
url: '/token',
method: 'POST',
contentType: 'application/json',
data: {
username: $('#txtUsername').val(),
password: $('#txtPassword').val(),
grant_type: 'password'
},
// When the request completes successfully, save the
// access token in the browser session storage and
// redirect the user to Data.html page. We do not have
// this page yet. So please add it to the
// EmployeeService project before running it
success: function (response) {
sessionStorage.setItem("accessToken", response.access_token);
window.location.href = "Data.html";
},
// Display errors if any in the Bootstrap alert <div>
error: function (jqXHR) {
$('#divErrorText').text(jqXHR.responseText);
$('#divError').show('fade');
}
});
});
});
</script>
</body>
</html>
Please note :
1. sessionStorage data is lost when the browser window is closed.
2. To store an item in the browser session storage use setItem() method
Example : sessionStorage.setItem("accessToken", response.access_token)
Example : sessionStorage.getItem("accessToken")
4. To remove an item from the browser session storage use removeItem() method
Example : sessionStorage.removeItem('accessToken')
On the Register.html page, we do not have Login button, which takes us to the Login page if the user is already registered. So please include Login button just below "New User Registration" text in the <th> element on Register.html page as shown below.
<thead>
<tr class="success">
<th colspan="2">
New User Registration
<a href="Login.html" class="btn btn-success pull-right">Login</a>
</th>
</tr>
</thead>
In our next post we will discuss implementing the Data.html page which retrieves data by calling the EmployeesController using the bearer token.
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.