ASP.NET Web API login page

Leave a Comment
we will discuss implementing login page for ASP.NET Web API.

We want to design a login page that looks as shown below

asp net web api user login

If we provide invalid username and password the error should be displayed as shown below
asp net web api user authentication

Add a new HTML page to the EmployeeService project. Name it Login.html. Copy and paste the following HTML & jQuery code.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
<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">
                    <tr class="success">
                        <th colspan="2">
                            Existing User Login
                            <a href="Register.html" class="btn btn-success pull-right">
                            <input type="text" id="txtUsername" placeholder="Username" />
                            <input type="password" id="txtPassword"
                                   placeholder="Password" />
                    <tr class="success">
                        <td colspan="2">
                            <input id="btnLogin" class="btn btn-success" type="button"
                                   value="Login" />
            <!--Bootstrap alert to display error message if the login fails-->
            <div id="divError" class="alert alert-danger collapse">
                <a id="linkClose" href="#" class="close">&times;</a>
                <div id="divErrorText"></div>

    <script src="Scripts/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $('#linkClose').click(function () {

            $('#btnLogin').click(function () {
                    // 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) {

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)
3. To retrieve an item from the browser session storage use getItem() method
     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.

    <tr class="success">
        <th colspan="2">
            New User Registration
            <a href="Login.html" class="btn btn-success pull-right">Login</a>

In our next post we will discuss implementing the Data.html page which retrieves data by calling the EmployeesController using the bearer token.


Post a Comment

Note: only a member of this blog may post a comment.