安全性对于AngularJs + ServiceStack应用 [英] Security for an AngularJs + ServiceStack App

问题描述

我有在前端四个模块的应用程序，我试图用尽可能AngularJs在前端我使用一个空的网站asp.net项目来承载所有的文件和REST serviceStack，我的项目都有种以下结构：

I have an application that have four modules in the front end, I'm trying to use as much as possible AngularJs in the front end I'm using an empty website asp.net project to host all the files and the REST serviceStack, my project have kind of 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

我用angularjs服务电话和后端我使用REST与servicestack。

I use angularjs service calls and the backend I'm using REST with servicestack.

问题是我怎么能限制只能访问身份验证的用户的那些静态的html文件？让我们说，里面都是公司内部，后端和用户例如：

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

推荐答案

喜之后做一些研究，这是为我工作的解决方案：

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

1. 从的NuGet
降价

2. 更改文件结构相匹配的默认行为RM [剃刀降价]到/意见


3. 修改<一个描述的方法如下web配置href=\"https://github.com/ServiceStack/SocialBootstrapApi/blob/master/src/SocialBootstrapApi/Web.config\">this服务栈例子


4. 更改所有静态HTMLS文件.cshtml文件，这个默认创建相同的路线不带扩展名状/视图/ {}页面名称不带扩展名，​​我只是用这种方法来获取授权逻辑更简单的实现（至少对我来说）


5. 更新与授权服务方法属性你可以找到更多在本页面

1. Install razor markdown from nuget
2. Change the file structure to match the default behavior RM [Razor Markdown] to /views
3. Modify the web config following the approach described in this service stack example
4. Change all the static htmls files to .cshtml files, this by default creates the same route without the extension like /views/{Pagename} without the extension, I'm just using this approach to get the authorization logic simpler to implement (at least for me)
5. Update the service method with an authorize attribute you can find out more in this page

要说明一个点燃有点多，这是我的路线定义至今：

to illustrate a lit of bit more this is my route definition in 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'
            });
    }]

);

注意，引用现在指向剃刀路径。

Notice that the references are pointed now to the razor paths.

这是一个小菜单我在做角

this is a small menu I've done 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>

让我们说，付款页面被限制，所以每次我在一个网页上点击我得到一个401未授权的消息。

let's say that the payments page is restricted, so every time I click on a the page I get a 401 unauthorized message.

服务主机：

 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");


        }

我希望帮助

这篇关于安全性对于AngularJs + ServiceStack应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！