View control via authorization with AngularJS + WebAPI

Navigation
10

I'm working on an application built with AngularJS and ASP.NET Web API. For now, using ASP.NET Identity I've already been able to implement authentication and authorization in the API using OAuth 2.0 and token-based authorization.

I tested the api separately from the interface and I could see that everything works as expected. I'm still doubtful, though, on how to do with the AngularJS part. I'm thinking now of the authorization.

The problem I have is that not all routes are allowed and the fact that page selection does not query the server, is done directly by javascript. This way, although I am able to block access to a controller on the server I do not know how to block access to the corresponding screens in the JS application.

My idea was basically to create a service able to choose the routes for the user and then return an array with the corresponding objects that could be iterated and registered in the angle. Basically it would be something like: 

opcoes = {
    type: 'GET',
    url: 'servidor/api/rotas'
};

$.ajax(opcoes).then(function(dados) {
    angular.module('app').config(function($routeProvider) {
        // itera pelos dados e para cada objeto adiciona a rota
    });
});

The problem is that I do not know if this is a good solution and anyway, it seems that it would only serve to set the right routes, I do not know if there would still be security holes.

Is this a good solution for authorization in AngularJS? Are there better ways to do this, or is this enough?

    
asked by anonymous 27.04.2014 / 05:53

2 answers

6

I think the way is around. I recently implemented something similar (but with KnockoutJS instead of AngularJS), and I did not even care about this access issue, since the blockage that really matters was properly implemented in WebAPI.

As we are talking about putting the routes directly in Javascript, it is always important to remember that "security" is relative, since anyone can look at your code. The way I understand it, what you want to do is just create a more "friendly" way of handling invalid accesses, right?

If so, take a look at this here, I think it might be useful. It reminded me a lot what you are thinking of doing: Authentication in Single Page Applications With Angular.js

    
27.04.2014 / 19:38
0

There are several ways to implement process and visibility controls. The current implementation in the applications I work with is the following:

  • Creating an endpoint to obtain client-bound permissions

The idea is to provide the Angular application with the user's public permissions - some, restricted for use in the backend, are ignored. The end result is similar to the following example:

  

link

With the following result being returned: 

{
    "Id":"324c915c-a59d-45f7-8005-03eac6d74b28",
    "Locator":"fakeuser",
    "Email":"[email protected]",
    "Name":"Fake User",
    "permissionsKeys":[
        "USR",
        "ADM",
        "MSG",
        "AUDIT"
    ]
}
  • Parsing of the list and content view control client-side

Using a library to check for the presence of a given permission, it is easy to implement view control: 

<div ng-if="auth.hasPermission('AUDIT')">Auditor</div>
    
09.02.2016 / 19:36
Is a compiler allowed to omit a reference member in a class? Validation configuration in dynamic fields