题 AngularJS:在单页​​面应用程序中使用身份验证的基本示例


我是新手 AngularJS 并通过他们的教程,并感受到它。

我有一个后端,我的项目准备好每个 REST 端点需要进行身份验证。

我想做的事
a。)我希望我的项目有一个页面 http://myproject.com
b。)一旦用户点击浏览器中的URL,基于用户是否登录,他将在同一网址下显示主页/视图或登录页面/视图 http://myproject.com
c。)如果用户未登录,则填写表单并且服务器设置a USER_TOKEN 在会话中,所有对端点的进一步请求将基于进行身份验证 USER_TOKEN 

我的困惑
a。)如何使用AngularJS处理客户端身份验证?我看见 这里 和 这里 但不明白如何使用它们
b。)如何根据用户是否登录同一网址,向用户显示不同的视图 http://myproject.com 

我第一次使用angular.js,真的很困惑如何开始。非常感谢任何建议和/或资源。


98
2018-04-22 04:53


起源


请看下面的文章 frederiknakstad.com/... - Ajay Beniwal
@MichaelCalkins只是放置一个链接是没有建设性的。你应该至少说明链接将提供什么。 - Dave Gordon
我的b:AngularJS访问控制和身份验证 coderwall.com/p/f6brkg - Michael J. Calkins
OAuth团队拥有一个很棒的图书馆 andreareginato.github.io/oauth-ng - Faktor 10


答案:


我创建了一个github repo,基本上总结了这篇文章: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

ng-login Github repo

Plunker

我会尝试尽可能好地解释,希望我帮助你们中的一些人:

(1)app.js: 在应用程序定义上创建身份验证常量

var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
    all : '*',
    admin : 'admin',
    editor : 'editor',
    guest : 'guest'
}).constant('AUTH_EVENTS', {
    loginSuccess : 'auth-login-success',
    loginFailed : 'auth-login-failed',
    logoutSuccess : 'auth-logout-success',
    sessionTimeout : 'auth-session-timeout',
    notAuthenticated : 'auth-not-authenticated',
    notAuthorized : 'auth-not-authorized'
})

(2)认证服务: 以下所有功能都在auth.js服务中实现。 $ http服务用于与服务器通信以进行身份​​验证过程。还包含授权功能,即允许用户执行某项操作。

angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS', 
function($http, $rootScope, $window, Session, AUTH_EVENTS) {

authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]

return authService;
} ]);

(3)会议: 用于保存用户数据的单例。这里的实施取决于你。

angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {

    this.create = function(user) {
        this.user = user;
        this.userRole = user.userRole;
    };
    this.destroy = function() {
        this.user = null;
        this.userRole = null;
    };
    return this;
});

(4)家长控制员: 将此视为应用程序的“主要”功能,所有控制器都从此控制器继承,并且它是此应用程序身份验证的主干。

<body ng-controller="ParentController">
[...]
</body>

(5)访问控制: 要拒绝某些路线的访问,必须执行两个步骤:

a)在ui路由器的$ stateProvider服务上添加允许访问每个路由的角色数据,如下所示(同样适用于ngRoute)。

.config(function ($stateProvider, USER_ROLES) {
  $stateProvider.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard/index.html',
    data: {
      authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
    }
  });
})

b)在$ rootScope。$ on('$ stateChangeStart')上添加函数,以防止在用户未经授权的情况下更改状态。

$rootScope.$on('$stateChangeStart', function (event, next) {
    var authorizedRoles = next.data.authorizedRoles;
    if (!Auth.isAuthorized(authorizedRoles)) {
      event.preventDefault();
      if (Auth.isAuthenticated()) {
        // user is not allowed
        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
      } else {
        // user is not logged in
        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
      }
    }
});

(6)Auth拦截器: 这已实现,但无法检查此代码的范围。在每个$ http请求之后,此拦截器检查状态代码,如果返回以下之一,则它会广播一个事件以强制用户再次登录。

angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
    return {
        responseError : function(response) {
            $rootScope.$broadcast({
                401 : AUTH_EVENTS.notAuthenticated,
                403 : AUTH_EVENTS.notAuthorized,
                419 : AUTH_EVENTS.sessionTimeout,
                440 : AUTH_EVENTS.sessionTimeout
            }[response.status], response);
            return $q.reject(response);
        }
    };
} ]);

附: 通过添加directives.js中包含的指令,可以轻松避免第1篇文章中所述的表单数据自动填充的错误。

P.S.2用户可以轻松调整此代码,以允许查看不同的路径,或显示不打算显示的内容。逻辑必须在服务器端实现,这只是一种在ng-app上正确显示内容的方法。


48
2017-10-05 09:20



我一直在关注你的指南,以了解客户端逻辑。真的很棒!!我错过了关于手动破坏会话的一些内容,但我们也必须尝试和破解事情! - Sebastialonso
~~不确定我是否正确理解了这一行: authService.login() = [...] 那些方括号代表着类似的东西 $http.get(url, {uID, pwd}?~~好吧,看着那个傻瓜,就像我说的那样XD - netalex
你能扩展服务器端的答案吗? - query


我喜欢这种方法并在服务器端实现它,而不在前端执行任何与身份验证相关的操作

我最近的应用程序上的“技术”是......客户不关心   验证。应用程序中的每一件事都需要先登录,所以   除非现有用户,否则服务器始终提供登录页面   在会话中检测到。如果找到session.user,则只是服务器   发送index.html。巴姆:-o

寻找“安德鲁·乔斯林”的评论。

https://groups.google.com/forum/?fromgroups=#!searchin/angular/authentication/angular/POXLTi_JUgg/VwStpoWCPUQJ


25
2018-04-25 22:11



如果它是一个web api?我没想到你的答案:( - Leandro De Mello Fagundes
如果要显示用户名怎么办?或者,如果您正在使用端点URL中的用户名与服务进行通信? - perrygeo
对不起,但我不明白答案。你如何以角度处理会话? session.user设置在哪里?你可以做一个代码示例吗?谢谢 - François Romain
会话在客户端而不是服务器端处理,客户端保存令牌并将其作为每个请求的一部分发送。服务器验证令牌并处理请求 - daydreamer
知道它的人可以为我们其他人编辑这个答案吗? - Alojz Janez


我在这里回答了类似的问题: AngularJS身份验证+ RESTful API


我写了一篇 AngularJS模块 对于 UserApp 支持受保护/公共路由,在登录/注销时重新路由,用于状态检查的心跳,将会话令牌存储在cookie中,事件等。

你可以:

  1. 修改模块并将其附加到您自己的API,或
  2. 与模块一起使用 UserApp (基于云的用户管理API)

https://github.com/userapp-io/userapp-angular

如果您使用UserApp,则不必为用户填写任何服务器端代码(不仅仅是验证令牌)。拿走 关于Codecademy的课程 尝试一下。

以下是一些如何工作的示例:

  • 如何指定哪些路由应该是公共的,以及哪条路由是登录表单:

    $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
    $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
    $routeProvider.when('/home', {templateUrl: 'partials/home.html'});
    

    .otherwise() 应将路由设置为您希望在登录后重定向用户的位置。例:

    $routeProvider.otherwise({redirectTo: '/home'});

  • 带错误处理的登录表单:

    <form ua-login ua-error="error-msg">
        <input name="login" placeholder="Username"><br>
        <input name="password" placeholder="Password" type="password"><br>
        <button type="submit">Log in</button>
        <p id="error-msg"></p>
    </form>
    
  • 具有错误处理的注册表单:

    <form ua-signup ua-error="error-msg">
      <input name="first_name" placeholder="Your name"><br>
      <input name="login" ua-is-email placeholder="Email"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Create account</button>
      <p id="error-msg"></p>
    </form>
    
  • 注销链接:

    <a href="#" ua-logout>Log Out</a>

    (结束会话并重定向到登录路由)

  • 访问用户属性:

    使用以下方式访问用户属性 user 服务,例如: user.current.email

    或者在模板中: <span>{{ user.email }}</span>

  • 隐藏仅在登录时可见的元素:

    <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

  • 根据权限显示元素:

    <div ua-has-permission="admin">You are an admin</div>

要对您的后端服务进行身份验证,只需使用即可 user.token() 获取会话令牌并使用AJAX请求发送它。在后端,使用 UserApp API (如果使用UserApp)检查令牌是否有效。

如果您需要任何帮助,请告诉我!


14
2017-12-17 13:40



我怎么样? “修改模块并将其附加到您自己的API” ? - Pureferret


在angularjs中,您可以创建UI部件,服务,指令以及表示UI的angularjs的所有部分。这是一项很好的技术。

任何进入这项技术的人都希望对“用户”进行身份验证,那么我建议使用c#web api的强大功能。为此,您可以使用OAuth规范,该规范将帮助您构建强大的安全机制来对用户进行身份验证。一旦使用OAuth构建WebApi,您需要为令牌调用该api:

var _login = function (loginData) {
 
        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
 
        var deferred = $q.defer();
 
        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
 
            localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
 
            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;
 
            deferred.resolve(response);
 
        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });
 
        return deferred.promise;
 
    };
 

一旦获得令牌,您就可以在Token的帮助下从angularjs请求资源,并使用OAuth规范访问在Web Api中保持安全的资源。

请查看以下文章以获取更多帮助: -

http://bitoftech.net/2014/06/09/angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity/


2
2018-01-25 11:52





我认为每个JSON响应都应该包含一个属性(例如{authenticated:false}),并且客户端必须每次都测试它:如果为false,则Angular控制器/服务将“重定向”到登录页面。

如果用户捕获de JSON并将bool更改为True会发生什么?

我认为你不应该依赖客户端来做这些事情。如果用户未经过身份验证,则服务器应该只重定向到登录/错误页面。


1
2018-05-17 12:19



检查一下: github.com/witoldsz/angular-http-auth  - 拦截器检查服务器响应状态代码,如果它是403('需要登录'),它会广播一个事件,因此您可以在应用程序内部捕获它并显示登录框。 - aherok
停止使用答案回复对方。这就是评论的意思! - Soviut
@aherok建议,你的评论应该提升为答案,它会被投票到最高层。其余的只是噪音。 - user237419


var _login = function (loginData) {
 
        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
 
        var deferred = $q.defer();
 
        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
 
            localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
 
            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;
 
            deferred.resolve(response);
 
        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });
 
        return deferred.promise;
 
    };
 


0
2017-09-12 08:14