Javascript 如何在angularjs应用程序中实现安全的（！）身份验证系统？

我是angularjs的新人

我阅读了文档，完成了教程；我自己也尝试了一些其他的东西，事情开始对我有意义了

现在我想知道如何制作一个安全的身份验证系统

简单的部分：没有代码，我将描述我的代码执行的操作：

我有一个经典的表单：用户名和密码文本输入

用户填写表单，然后按ENTER键

一个ajax请求启动，响应是一个JSON，告诉我 比如“好吧，我认识你”或者“我不知道你是谁”

我现在需要的是在我的应用程序的不同视图之间保存访问者的登录状态（或未登录）。

$routeProvider.when('/login', { 
    templateUrl: 'partials/login.html', controller: 'loginCtrl', isFree: true
});

services.factory('User', [function() {
    return {
        isLogged: false,
        username: ''
    };
}]);

$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){
    // prevRoute.isFree tell me if this route is available for all the users, or only for registered user.
    // User.isLogged tell me if the user is logged
})

我在网上读到，为了实现这个目标，有人设置了一个变量（$scope.isLogged=true），有人使用cookies；但是javascript变量和cookie可以使用firebug或类似的开发工具轻松编辑

。。。最后一个问题是：

---

因此，您有什么建议可以在angularjs应用程序中实现安全的身份验证系统吗？

首先：客户端数据总是可以被操纵或篡改的

只要有效的会话ID不容易猜到，并且像将会话令牌与客户机的IP关联这样的度量也没有什么大不了的

理论上，您也可以加密cookie，只要您在服务器端这样做

---

有关如何加密cookie的详细信息，请参阅服务器端的文档（例如，对于Express.js）

您不能在angularjs中授权任何内容，因为用户可以完全控制执行环境（即浏览器）。每一张支票、每一个箱子、每一个if——你能想到的任何东西——都可能被篡改。有一些javascript库使用非对称密钥来执行本地加密，以在某种程度上安全地存储本地数据，但实际上它们并不是您想要的

您可以，而且应该，在服务器上进行授权——这是您在使用普通应用程序的会话中进行授权的标准方式；无需特殊代码，ajax调用使用普通会话cookie。应用程序不需要知道它是否经过身份验证。它只需要检查服务器的想法

---

从angularjs应用程序的角度来看，“登录”或“注销”只是用户的gui提示。

可能您找到了解决方案，但目前我制定了一个身份验证方案，我正在Angular应用程序中实施

打开。运行应用程序已注册，ActiveSession设置为false。 然后检查浏览器是否有一个带有令牌和用户ID的cookie

如果是，请检查服务器上的令牌+用户ID，并在服务器和本地更新令牌（令牌是服务器生成的密钥，对于每个用户都是唯一的）

如果没有显示登录表单，请检查凭据，然后再次检查凭据是否有效，服务器是否请求获取新令牌并将其保存在本地

该令牌用于永久登录（记住我3周）或在用户刷新浏览器页面时使用

多谢各位

---

三个月前我问了这个问题

当我在AngularJS上构建的web应用程序中处理用户身份验证时，我想分享一下我最喜欢的方法

当然，弗雷格的答案仍然是一个伟大的答案

---

您不能在angularjs中授权任何内容，因为用户具有完全权限 控制执行环境（即浏览器）

从angularjs应用程序的角度来看，“登录” 或者“注销”仅仅是用户的gui提示

因此，简单地说，我的方法包括：

1） 绑定到每个路由有关路由本身的附加信息。

$routeProvider.when('/login', { 
    templateUrl: 'partials/login.html', controller: 'loginCtrl', isFree: true
});

services.factory('User', [function() {
    return {
        isLogged: false,
        username: ''
    };
}]);

$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){
    // prevRoute.isFree tell me if this route is available for all the users, or only for registered user.
    // User.isLogged tell me if the user is logged
})

2） 使用服务获取每个用户的数据及其身份验证状态。

$routeProvider.when('/login', { 
    templateUrl: 'partials/login.html', controller: 'loginCtrl', isFree: true
});

services.factory('User', [function() {
    return {
        isLogged: false,
        username: ''
    };
}]);

$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){
    // prevRoute.isFree tell me if this route is available for all the users, or only for registered user.
    // User.isLogged tell me if the user is logged
})

3） 每当用户尝试访问新路由时，检查他们是否有访问权限。

$routeProvider.when('/login', { 
    templateUrl: 'partials/login.html', controller: 'loginCtrl', isFree: true
});

services.factory('User', [function() {
    return {
        isLogged: false,
        username: ''
    };
}]);

$root.$on('$routeChangeStart', function(event, currRoute, prevRoute){
    // prevRoute.isFree tell me if this route is available for all the users, or only for registered user.
    // User.isLogged tell me if the user is logged
})

---

我也在我的博客上写过这种方法（更详细）。

您需要了解它的服务器端/数据库端

用户登录需要存储在某个地方—99.9%的时间都存储在服务器端数据库中

理想情况下，对于真正安全的系统，您需要一个后端（服务器端）成员资格系统，该系统将会话存储在一个数据库表中，该数据库表与保存加密密码的成员表相关，但还提供了一个RESTful接口，您可以在其中构建api调用

我曾经成功使用过的一个脚本是Amember。这是一个非常经济有效的方法，虽然还有很多其他的脚本，但我在这一个上取得了很多成功。。它也是PHP，因此您可以非常轻松地为角度http调用构建API

---

所有这些javascript框架都很棒，但效果是，现在太多人过于关注前端——还要学习数据库/后端！：-）

首先，谢谢你的回答！按照您的建议继续，每次视图更改时，我都必须执行一个ajax请求，以检查存储在变量/cookie中的会话密钥是否与身份验证时生成的会话密钥相同。。。我说得对吗？或者我遗漏了一些内容？基本上，对于每个需要对用户进行身份验证的HTTP请求，服务器将在请求传入时检查会话密钥。然后，如果会话密钥不正确，服务器可以发回“401未授权”而不是客户端想要的数据。+1，特别是对于“从angularjs应用程序的角度来看，“登录”或“注销”仅仅是用户的gui提示。”如果用户想要篡改他们的执行环境，以至于Angular认为他们已经登录，那就这样吧——只要服务器仍然验证任何更改实际数据的操作，等等。嗨，谢谢。我对你的答案感兴趣。特别的