View control via authorization with Angularjs + Webapi

Asked

Viewed 2,720 times

10

I am working on an application built with Angularjs and ASP.NET Web API. For now, using ASP.NET Identity I have already been able to implement authentication and authorization in the API using Oauth 2.0 and token-based authorization.

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

The problem I have is that not all routes are allowed and the fact that the selection of pages does not query the server, being done directly by javascript. That 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 recorded at the angular. 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 define the right routes, I do not know if there would still be security gaps.

Is this a good solution for authorization in Angularjs? There are better ways to do this, or is this approach sufficient?

angularjs asp.net-web-api

  • Here at the company we put all the authentication in the webapi and send a list of menus or pages available to the user. If any user can access any page that should not, the server must return a 401 and the App will redirect the user to login or home screen (depending on the project).

2 answers

6


I think that’s the way to go. I recently implemented something similar (but with Knockoutjs instead of Angularjs), and I didn’t worry much about this access issue, since the block 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. As I understand it, what you want to do is just create a more "friendly" way to treat invalid access, correct?

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

  • Thank you @Michaelsiegwarth. This article helped give some ideas. It’s a little different than what I’m doing, because in my case the routes themselves really depend on the user, but already gave an idea of how to do.

0

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

  • Creation of an endpoint to obtain permissions client-bound

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

http://localhost/application/framework/auth/Identity

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"
    ]
}
  • List parse, and content visualisation control client-side

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

<div ng-if="auth.hasPermission('AUDIT')">Auditor</div>

Browser other questions tagged angularjs asp.net-web-api

You are not signed in. Login or sign up in order to post.