AngularJs + ServiceStack 应用程序的安全性 [英] Security for an AngularJs + ServiceStack App

问题描述

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

~/(web.config、global.asax 和所有 asp.net 网站的开箱即用结构)- 应用程序 <- AngularJs- 用户 <- js 控制器和视图(静态 html 文件)- 公司- 后端- 民众索引.html索引控件.js应用程序.js- 内容- JS

我使用 angularjs 服务调用，后端我使用 REST 和 servicestack.

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

解决方案

嗨 经过一些研究，这是对我有用的解决方案:

1. 从 nuget 安装 razor markdown
2. 更改文件结构以匹配默认行为 RM [Razor Markdown] 到/views
3. 按照此服务堆栈示例中描述的方法修改网络配置
4. 将所有静态 htmls 文件更改为 .cshtml 文件，默认情况下会创建没有扩展名的相同路由，例如/views/{Pagename} 没有扩展名，我只是使用这种方法来使授权逻辑更易于实现(至少对我而言)
5. 使用授权属性更新服务方法，您可以在本页

为了说明更多，这是我到目前为止的路线定义:

'use strict';angular.module('myApp', ['myApp.directives', 'myApp.services']).config(['$routeProvider', function($routeProvider) {$routeProvider.when('/仪表板', {控制器: 'dashboardCtrl',templateUrl: '视图/仪表板'}).when('/付款', {控制器:'paymentsCtrl',templateUrl: '浏览次数/付款'}).当('/登录'，{控制器:'登录Ctrl'，templateUrl: '查看/登录'});}]);

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

这是我用 angular 做的一个小菜单

<div class="navbar" ng-controller="indexCtrl"><div class="navbar-inner"><a class="brand" href="#/">标题菜单</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">登录</a></li><li ng-class="{active: routeIs('/Payments')}"><a href="#/Payments">payments</a></li>

<ng-view></ng-view>

假设付款页面受到限制，因此每次我点击页面时都会收到 401 未经授权的消息.

服务主机:

 public override void Configure(Container container){Plugins.Add(new AuthFeature(() => new AuthUserSession(), new IAuthProvider[] {新的 FacebookAuthProvider(appSettings),新的 TwitterAuthProvider(appSettings),新的 BasicAuthProvider(appSettings),新的 GoogleOpenIdOAuthProvider(appSettings),new CredentialsAuthProvider()}));//我也将支持社交身份验证.Plugins.Add(new RegistrationFeature());Routes.Add("/Api/User/{Id}");Routes.Add("/Api/User/login","POST");Routes.Add("/views/Payments");}

希望能帮到你

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

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

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. 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>

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

Service host:

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


        }

I hope that helps

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