Web api bearer token example

Suggested Videos
Part 22 - Using asp.net identity with Web API
Part 23 - Using fiddler to test ASP.NET Web API token based authentication
Part 24 - ASP.NET Web API login page

In this video we will discuss how to use bearer token for authentication and retrieving data from the server. This is continuation to Part 24. Please watch Part 24 from ASP.NET Web API tutorial before proceeding.

We want to implement a page that retrieves employee data from the server. If the user is not authenticated, he should be automatically redirected to the login page. The user should be able to get to the data page, only if he is logged in.
asp.net web api bearer token authentication

(追記) (追記ここまで)

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

(追記) (追記ここまで)

<!DOCTYPEhtml>
<html>
<head>
<title></title>
<metacharset="utf-8"/>
<linkhref="Content/bootstrap.min.css"rel="stylesheet"/>
</head>
<bodystyle="padding-top:20px">
<divclass="col-md-10 col-md-offset-1">
<divclass="well">
<inputid="btnLoadEmployees"class="btn btn-success"
type="button"value="Load Employees"/>
</div>
<divid="divData"class="well hidden">
<tableclass="table table-bordered"id="tblData">
<thead>
<trclass="success">
<td>ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Gender</td>
<td>Salary</td>
</tr>
</thead>
<tbodyid="tblBody"></tbody>
</table>
</div>
<divclass="modal fade"tabindex="-1"id="errorModal"
data-keyboard="false"data-backdrop="static">
<divclass="modal-dialog modal-sm">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal">
&times;
</button>
<h4class="modal-title">Session Expired</h4>
</div>
<divclass="modal-body">
<form>
<h2class="modal-title">Close this message to login again</h2>
</form>
</div>
<divclass="modal-footer">
<buttontype="button"class="btn btn-danger"
data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<divid="divError"class="alert alert-danger collapse">
<aid="linkClose"href="#"class="close">&times;</a>
<divid="divErrorText"></div>
</div>
</div>

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

<scripttype="text/javascript">
$(document).ready(function () {
if (sessionStorage.getItem('accessToken') == null) {
window.location.href = "Login.html";
}

$('#linkClose').click(function () {
$('#divError').hide('fade');
});

$('#errorModal').on('hidden.bs.modal', function () {
window.location.href = "Login.html";
});

$('#btnLoadEmployees').click(function () {
$.ajax({
url: '/api/employees',
method: 'GET',
headers: {
'Authorization': 'Bearer '
+ sessionStorage.getItem("accessToken")
},
success: function (data) {
$('#divData').removeClass('hidden');
$('#tblBody').empty();
$.each(data, function (index, value) {
var row = $('<tr><td>' + value.ID + '</td><td>'
+ value.FirstName + '</td><td>'
+ value.LastName + '</td><td>'
+ value.Gender + '</td><td>'
+ value.Salary + '</td></tr>');
$('#tblData').append(row);
});
},
error: function (jQXHR) {
// If status code is 401, access token expired, so
// redirect the user to the login page
if (jQXHR.status == "401") {
$('#errorModal').modal('show');
}
else {
$('#divErrorText').text(jqXHR.responseText);
$('#divError').show('fade');
}
}
});
});
});
</script>
</body>
</html>

 At the moment, the only way to log off the user is by closing the browser window. As we are storing the bearer token in browser session storage, when we close the browser we loose it from the session. In our next video we will discuss, how to explicitly log out the user without closing the browser window.

ASP.NET Web API tutorial for beginners

8 comments:

  1. You forgot to add this line of code in error function $('#errorModal').click(function () {
    window.location.href = "Login.html"

    correct me if I am wrong.

    Reply Delete
    Replies

    1. $('#errorModal').on('hidden.bs.modal', function () {
      window.location.href = "Login.html";
      });

      Delete

  2. Very Special Thanks from Egypt

    Reply Delete

  3. How can I secure a JWT access token by tying it to one machine?

    I can take token value and cookie identity from a browser which is signed in to my site and has a valid token, to another browser and access authorized actions?

    Reply Delete

  4. I tried to exactly same but my token is not expiring. I have made changed in Startup class too.. Please help someone!!! Urgently

    Reply Delete

  5. In App_Start folder -> Startup.Auth.cs -->

    Given line:
    AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),

    Replace it as:
    AccessTokenExpireTimeSpan = TimeSpan.FromSeconds(10), //Check for 10 Seconds

    After clicking 'Load Employees' button on Data.html page, wait for 10 seconds and then click on 'Load Employees' button, then it will show Session expired popup window.

    This step has already explained in video by Kudvenkat sir.
    Nice tutorial. Working well.

    Reply Delete

  6. even then it is not expirirng

    Reply Delete
    Replies

    1. Have you added [Authorize] keyword before your EmployeeController?

      Delete

It would be great if you can help share these free resources

[フレーム]

Subscribe to: Post Comments (Atom)

AltStyle によって変換されたページ (->オリジナル) /