堆栈内存溢出
  繁体   English   中英

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

[英]AngularJS: Basic example to use authentication in Single Page Application

 原文  2013-04-22 04:53:47  5   6    javascript/ angularjs/ authentication/ login

问题描述

我是AngularJS的新手并完成了他们的教程，并对它有所了解。

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

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

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

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

6 个解决方案

解决方案1
 48  2014-10-05 09:20:07

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

ng-login Github repo

Plunker

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

（1）app.js：在app定义上创建认证常量 

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服务：以下所有功能都在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);
        }
    };
} ]);

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

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

解决方案2
 25 已采纳  2013-04-25 22:11:40

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

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

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

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

解决方案3
 14  2013-12-17 13:40:49

我在这里回答了类似的问题： AngularJS Authentication + RESTful API

我为UserApp编写了一个AngularJS模块 ，它支持受保护/公共路由，在登录/注销时重新路由，用于状态检查的心跳， 将会话令牌存储在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）检查令牌是否有效。

如果您需要任何帮助，请告诉我！

解决方案4
 2  2015-01-25 11:52:52

在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/

解决方案5
 1  2013-05-17 12:19:44

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

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

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

解决方案6
 0  2015-09-12 08:14:52

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 用户身份验证angularjs单页应用程序 AngularJS不能使用基本身份验证 AngularJS单页应用程序架构 AngularJS中的HTTP基本身份验证 nodeJS，angularJS应用程序中的页面请求上的服务器身份验证 单页应用SEO和无限滚动AngularJS 在AngularJs单页面应用程序中发布请求 带有angularjs和facebook分享按钮的单页面应用程序 AngularJS Multistep Form单页应用程序 AngularJS单页应用程序中的可切换标签？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM