2013-07-31 35 views
3

我有一个应用程序,在前端有四个模块,我想尽可能多地使用AngularJs在前端我使用一个空的网站asp.net项目主机上的所有文件和REST serviceStack,我的项目有那种以下结构:安全AngularJs + 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文件?比如公司,后端和用户内部的那些,例如

+0

都是网站和服务正在在同一个域托管? – Malkus

+0

@Malkus是的,他们将在同一个域中,他们将在同一个上下文/应用程序池中的IIS 7 –

+0

通过安全,你的意思是你想通过某种身份验证方法来限制访问? –

回答

5

嗨之后做一些研究,这是为我工作的解决方案:

  1. 从的NuGet
  2. 更改安装razor markdown文件结构相匹配的默认行为RM [剃刀降价]到/视图
  3. 按照this service stack example中描述的方法修改web配置
  4. 将所有静态htmls文件更改为.cshtml文件,默认情况下,这种默认情况下会创建相同的路由,而不会像/ views/{Pagename}这样的扩展名不带外部分机ension,我只是用这种方法来获取授权的逻辑更简单的实现(至少对我来说)
  5. 更新与授权服务方法属性,你可以找到更多in this page

说明点亮更多这是我的路线定义在目前为止:

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


     } 

我希望帮助

+0

@Pendro这是做事的正确方法。当您使用基于REST的API(无论是您的还是其他人)时,您的安全性基于API提供的Cookie。同样由服务堆也完成。所以,你需要做的很多事情。你在这里也一样。如果您喜欢或阻止请求标题,则可以转到https。如果你想了解更多细节,请告诉我。将尝试提供链接和示例。 – kunjee

+0

如果你有答案,那么最好选择答案并关闭它。 :) – kunjee

+0

@kunjee感谢这样一个很大的帮助,我还在工作的安全部分,一步一步,我仍然需要实现NG-的sanitize - Laravel CSRF支持,路由过滤器等,但暂时的基本认证工作到目前为止,这正是我试图解决这个问题。 –

2

创建CatchAllHander方法来检查受限制的路由,对于那些需要认证的静态文件,如果未通过认证,则返回ForbiddenFileHander,否则返回null。给定一个isAuthenticated方法和restrictedDirs被定义的地方 - 也许你的应用程序或网络配置文件,也可以是简单的:

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

谢谢! @marfarma如果文件是静态htmls,情况如何?或者如果我发送一个Ajax请求? –

+0

只要ServiceStack正在服刑的文件,而不是的httpd服务器(IIS,Apache的,Ngnix等),这个包罗万象的处理程序将正常工作。您只需将条件表达式调整为您的要求即可。有关配置示例,请参见RockStars代码(https://github.com/ServiceStack/RazorRockstars/tree/master/src)。如果ServiceStack是服务您的受保护的静态资产,那么它很容易集成身份验证检查和它不会不管你的客户如何请求他们(AJAX或不) - 如果请求未通过身份验证,该资产将不会投放。 –

+0

在你还没有看到它的情况下,这里的覆盖添加自定义验证到ServiceStack项目教程:https://docs.auth0.com/servicestack-tutorial –

0

为什么不使用窗体身份验证?只需在web.config中添加几个<位置>标签以允许/禁止不同部分,甚至可以根据角色执行此操作。