作者好屌啊,我不懂的他全都懂。
Authentication with AngularJS and a Node.js REST api
几个月前,我开始觉得 AngularJS 好像好牛逼的样子,于是我决定开始干它,并且录下来给你们看。BlogJS 就是第一发。
Blogjs 是个非常简单的 blog, 用 AngularJS,Node.js 和 MongoDB 写的。 你可以看看在线例子,点这里看前端,点这里看后台。用户名密码都是 demo 。
然后你还可以从 github 上拿源码。
目的
这个工程的目的在于,学习怎么创建一个基于 AngularJS 的认证授权机制,以及一个运行在 Node.js 服务端上的 RESTful api。我们不能像原来那些老渣渣一样用 cookies 或者 session 来做验证机制。我们用18岁的 token 机制。
当用户把他的授权信息发过来的时候, Node.js 服务检查是否正确,然后返回一个基于用户信息的唯一 token 。 AngularJS 应用把 token 保存在用户的 SessionStorage ,之后的在发送请求的时候,在请求头里面加上包含这个 token 的 Authorization。如果 endpoint 需要确认用户授权,服务端检查验证这个 token,然后如果成功了就返回数据,如果失败了返回 401 或者其它的异常。另外, AngularJS 应用检查用户是否已经登陆,如果没有,重定向到 login 页面。
功能
- 创建文章
- 编辑文章
- 删除文章
- 发布文章
- 撤回文章
- 按日期显示文章
- 按标签显示文章
- 认证授权
用到的技术
- AngularJS
- Node.js(包括 express.js, express-jwt 和 moongoose)
- MongoDB
客户端 : AngularJS 部分
首先,我们来创建我们的 AdminUserCtrl controller 和处理 login/logout 动作。
<!-- lang: js -->
appControllers.controller('AdminUserCtrl', ['$scope', '$location', '$window', 'UserService', 'AuthenticationService',
function AdminUserCtrl($scope, $location, $window, UserService, AuthenticationService) {
//Admin User Controller (login, logout)
$scope.logIn = function logIn(username, password) {
if (username !== undefined && password !== undefined) {
UserService.logIn(username, password).success(function(data) {
AuthenticationService.isLogged = true;
$window.sessionStorage.token = data.token;
$location.path("/admin");
}).error(function(status, data) {
console.log(status);
console.log(data);
});
}
}
$scope.logout = function logout() {
if (AuthenticationService.isLogged) {
AuthenticationService.isLogged = false;
delete $window.sessionStorage.token;
$location.path("/");
}
}
}
]);
这个 controller 用了两个 service: UserService 和 AuthenticationService。第一个处理调用 REST api 用证书。后面一个处理用户的认证。它只有一个布尔值,用来表示用户是否被授权。
<!-- lang: js -->
appServices.factory('AuthenticationService', function() {
var auth = {
isLogged: false
}
return auth;
});
appServices.factory('UserService', function($http) {
return {
logIn: function(username, password) {
return $http.post(options.api.base_url + '/login', {username: username, password: password});
},
logOut: function() {
}
}
});
好了,我们需要做张登陆页面:
<!-- lang: js -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputUsername" class="col-sm-4 control-label">Username</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputUsername" placeholder="Username" ng-model="login.email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-4 control-label">Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="login.password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="logIn(login.email, login.password)">Log In</button>
</div>
</div>
</form>
当用户发送他的信息过来,我们的 controller 把内容发送到 Node.js 服务器,如果信息可用,我们把 AuthenticationService里面的 isLogged 设为 true。我们把从服务端发过来的 token 存起来,以便下次请求的时候使用。等讲到 Node.js 的时候我们会看看怎么处理。
好了,我们要往每个请求里面追加一个特殊的头信息了:[Authorization: Bearer <Stored Token>]。为了实现这个需求,我们建立一个服务,叫 TokenInterceptor。
<!-- lang: js -->
appServices.factory('TokenInterceptor', function ($q, $window, AuthenticationService) {
return {
request: function (config) {
config.headers = config.headers || {};
if ($window.sessionStorage.token) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
}
return config;
},
response: function (response) {
return response || $q.when(response);
}
};
});
然后我们把这个interceptor 追加到 $httpProvider :
<!-- lang: js -->
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
});
然后,我们要开始配置路由了,让 AngularJS 知道哪些需要授权,在这里,我们需要检查用户是否已经被授权,也就是查看 AuthenticationService 的 isLogged 值。
<!-- lang: js -->
app.config(['$locationProvider', '$routeProvider',
function($location, $routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/post.list.html',
controller: 'PostListCtrl',
access: { requiredLogin: false }
}).
when('/post/:id', {
templateUrl: 'partials/post.view.html',
controller: 'PostViewCtrl',
access: { requiredLogin: false }
}).
when('/tag/:tagName', {
templateUrl: 'partials/post.list.html',
controller: 'PostListTagCtrl',
access: { requiredLogin: false }
}).
when('/admin', {
templateUrl: 'partials/admin.post.list.html',
controller: 'AdminPostListCtrl',
access: { requiredLogin: true }
}).
when('/admin/post/create', {
templateUrl: 'partials/admin.post.create.html',
controller: 'AdminPostCreateCtrl',
access: { requiredLogin: true }
}).
when('/admin/post/edit/:id', {
templateUrl: 'partials/admin.post.edit.html',
controller: 'AdminPostEditCtrl',
access: { requiredLogin: true }
}).
when('/admin/login', {
templateUrl: 'partials/admin.login.html',
controller: 'AdminUserCtrl',
access: { requiredLogin: false }
}).
when('/admin/logout', {
templateUrl: 'partials/admin.logout.html',
controller: 'AdminUserCtrl',
access: { requiredLogin: true }
}).
otherwise({
redirectTo: '/'
});
}]);
app.run(function($rootScope, $location, AuthenticationService) {
$rootScope.$on("$routeChangeStart", function(event, nextRoute, currentRoute) {
if (nextRoute.access.requiredLogin && !AuthenticationService.isLogged) {
$location.path("/admin/login");
}
});
});
服务端: Node.js + MongoDB 部分
为了在我们的 RESTful api 处理授权信息,我们要用到 express-jwt (JSON Web Token) 来生成一个唯一 Token,基于用户的信息。以及验证 Token。
首先,我们在 MongoDB 里面创建一个用户的 Schema。我们还要创建调用一个中间件,在创建和保存用户信息到数据库之前,用于加密密码。还有我们需要一个方法来解密密码,当收到用户请求的时候,检查是否在数据库里面有匹配的。
<!-- lang: js -->
var Schema = mongoose.Schema;
// User schema
var User = new Schema({
username: { type: String, required: true, unique: true },
password: { type: String, required: true}
});
// Bcrypt middleware on UserSchema
User.pre('save', function(next) {
var user = this;
if (!user.isModified('password')) return next();
bcrypt.genSalt(SALT_WORK_FACTOR, function(err, salt) {
if (err) return next(err);
bcrypt.hash(user.password, salt, function(err, hash) {
if (err) return next(err);
user.password = hash;
next();
});
});
});
//Password verification
User.methods.comparePassword = function(password, cb) {
bcrypt.compare(password, this.password, function(err, isMatch) {
if (err) return cb(err);
cb(isMatch);
});
};
然后我们开始写授权用户和创建 Token 的方法:
<!-- lang: js -->
exports.login = function(req, res) {
var username = req.body.username || '';
var password = req.body.password || '';
if (username == '' || password == '') {
return res.send(401);
}
db.userModel.findOne({username: username}, function (err, user) {
if (err) {
console.log(err);
return res.send(401);
}
user.comparePassword(password, function(isMatch) {
if (!isMatch) {
console.log("Attempt failed to login with " + user.username);
return res.send(401);
}
var token = jwt.sign(user, secret.secretToken, { expiresInMinutes: 60 });
return res.json({token:token});
});
});
};
最后,我们需要把 jwt 中间件加到所有的,访问时需要授权的路由上面:
<!-- lang: js -->
/*
Get all published posts
*/
app.get('/post', routes.posts.list);
/*
Get all posts
*/
app.get('/post/all', jwt({secret: secret.secretToken}), routes.posts.listAll);
/*
Get an existing post. Require url
*/
app.get('/post/:id', routes.posts.read);
/*
Get posts by tag
*/
app.get('/tag/:tagName', routes.posts.listByTag);
/*
Login
*/
app.post('/login', routes.users.login);
/*
Logout
*/
app.get('/logout', routes.users.logout);
/*
Create a new post. Require data
*/
app.post('/post', jwt({secret: secret.secretToken}), routes.posts.create);
/*
Update an existing post. Require id
*/
app.put('/post', jwt({secret: secret.secretToken}), routes.posts.update);
/*
Delete an existing post. Require id
*/
app.delete('/post/:id', jwt({secret: secret.secretToken}), routes.posts.delete);
现在你的应用就只对授权用户开放了。如果你有什么问题的话,射我一tweet: @kdelemme 。