2013-07-31 56 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中添加幾個<位置>標籤以允許/禁止不同部分,甚至可以根據角色執行此操作。