Security for AngularJs + ServiceStack Application

Question

I have an application with four modules in the interface, I am trying to use as many AngularJs in the interface as possible. I am using an empty asp.net project to host all files and REST serviceStack, my project has the following structure:

~/ (web.config, global.asax and all the out of the box structure for an asp.net website) - App <- AngularJs - Users <- js controllers and views (static html files) - Companies - BackEnd - Public Index.html IndexCtrl.js App.js - Content - Js 

I use angularjs service calls and backend, I use REST with a utility.

The question is, how can I restrict access only to authenticated users to those static html files? let's say those that are inside the companies themselves, backend and users for example

Answer 1

Hi After some research, this is the solution that worked for me:

• Set a razor markdown from nuget
• Change the file structure according to the default behavior of RM [Razor Markdown] in / views
• Change the web configuration according to the approach described in this example service stack
• Change all static htmls files to .cshtml files, this by default creates the same route without extension, for example / views / {Pagename} without extension, I just use this approach to simplify the implementation of authorization logic (at least for me)
• Update the service method with the authorize attribute, which you can find out more on this page.

to illustrate a more illuminated bit, this is the definition of my route so far:

 'use strict'; angular.module('myApp', ['myApp.directives', 'myApp.services']).config( ['$routeProvider', function($routeProvider) { $routeProvider.when('/Dashboard', { controller: 'dashboardCtrl', templateUrl: 'Views/dashboard' }).when('/Payments', { controller: 'paymentsCtrl', templateUrl: 'Views/payments' }). when('/Login', { controller: 'loginCtrl', templateUrl: 'Views/login' }); }] ); 

Note that links are now pointing to the razor path.

This is a small menu I made in angular

 <div class="container"> <div class="navbar" ng-controller="indexCtrl"> <div class="navbar-inner"> <a class="brand" href="#/">header menu</a> <ul class="nav"> <li ng-class="{active: routeIs('/Dashboard')}"><a href="#/Dashboard">Dashboard</a></li> <li ng-class="{active: routeIs('/Login')}"><a href="#/Login">Login</a></li> <li ng-class="{active: routeIs('/Payments')}"><a href="#/Payments">payments</a></li> </ul> </div> </div> <ng-view></ng-view> </div> 

let's say that the payment page is limited, so every time I click on the page, I get an unauthorized message 401.

Service Host:

  public override void Configure(Container container) { Plugins.Add(new AuthFeature(() => new AuthUserSession(), new IAuthProvider[] { new FacebookAuthProvider(appSettings), new TwitterAuthProvider(appSettings), new BasicAuthProvider(appSettings), new GoogleOpenIdOAuthProvider(appSettings), new CredentialsAuthProvider() })); //I'm going to support social auth as well. Plugins.Add(new RegistrationFeature()); Routes.Add<UserRequest>("/Api/User/{Id}"); Routes.Add<LoginRequest>("/Api/User/login","POST"); Routes.Add<PaymentRequest>("/views/Payments"); } 

I hope this helps

Answer 2

Create a CatchAllHander method to check restricted routes and for those static files that require authentication, return ForbiddenFileHander if they are not authenticated, otherwise return null. Given that the isAuthenticated and limitedDirs method is defined somewhere - maybe your application or web configuration file, it might be as simple as:

 appHost.CatchAllHandlers.Add((httpMethod, pathInfo, filePath) => { if ( restrictedDirs.ContainsKey(pathInfo) && !isAuthenticated()) return new ForbiddenHttpHandler(); return null; }); 

Answer 3

Why not use forms authentication? Just add a few <location> to your web.config to allow / deny various sections, you can even do it based on roles.