Part 2 : Token Based Authentication Using ASP.NET Web API in AngularJS

In part 1 of this series "Token-based authentication in ASP.NET Web API" I have shown you, how to Secure ASP.NET Web API using Token Based Authentication, where we have done all the code on the server side web API application and tested our application with POSTMAN chrome extension.

Now in this article (Part 2) I am going to show you how to implement token based  secured web API service in AngularJS application.
Token based authentication in AngularJS
Part 2 : Token Based Authentication Using ASP.NET Web API in AngularJS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular JS app</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

</head>
<body ng-app="myApp">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#/home">Home</a></li>
                    <li><a href="#/authenticated">Authenticated</a></li>
                    <li><a href="#/authorized">Authorized</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content" style="margin-top:40px;">
        <data-ng-view></data-ng-view>
        <hr />
        <footer>
            <p>&copy; Dotnet awesome</p>
        </footer>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
    <script src="/Scripts/myApp.js"></script>
</body>
</html>

Posted By :