AngularJs + ServiceStack应用程序的安全性

时间:2013-07-31 17:42:07

标签: asp.net security angularjs servicestack angularjs-routing

我有一个应用程序,前端有四个模块,我正在尝试尽可能多地使用前端的AngularJs我正在使用一个空的网站asp.net项目来托管所有文件和REST serviceStack,我的项目有以下几种结构:

~/ (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。

问题是如何限制只有经过身份验证的用户访问这些静态html文件?让我们说出公司,后端和用户内部的那些

3 个答案:

答案 0 :(得分:5)

嗨在做了一些研究之后,这是对我有用的解决方案:

  1. 从nuget
  2. 安装razor markdown
  3. 更改文件结构以匹配RM [Razor Markdown]到/ views
  4. 的默认行为
  5. 按照this service stack example
  6. 中描述的方法修改Web配置
  7. 将所有静态htmls文件更改为.cshtml文件,这默认情况下会创建相同的路由而没有像/ views / {Pagename}这样的扩展名而没有扩展名,我只是使用这种方法来使授权逻辑更容易实现(至少对我来说)
  8. 使用您可以了解更多in this page
  9. 的授权属性更新服务方法

    为了说明这一点,到目前为止这是我的路线定义:

    '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'
                });
        }]
    
    );
    

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

    这是我用棱角分明的小菜单

    <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未经授权的邮件。

    服务主持人:

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

    我希望有帮助

答案 1 :(得分:2)

创建CatchAllHander方法以检查受限路由,对于那些需要身份验证的静态文件,如果未经过身份验证则返回ForbiddenFileHander,否则返回null。鉴于isAuthenticated方法和restrictedDirs在某处定义 - 可能是您的应用程序或Web配置文件,它可以像下面这样简单:

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

答案 2 :(得分:0)

为什么不使用表单身份验证?只需添加几个&lt;位置&gt;标记到你的web.config以允许/禁止不同的部分,你甚至可以根据角色来做。