Embed Size (px)
Citation preview
remkohdev 1/4/2016
QAVideos (1) – Adding User Management to Node.jsremkohde.com/2016/01/04/add-custom-objects-and-user-management-to-nodejs/
The QAVideos app is a Question and Answer sample application, which uses videos instead of text. You can think ofQAVideos as StackOverflow meets Youtube.
I will add functionality to the QAVideos app over time. Part 1, adds the capacity to manage and authenticate usersand create an API access layer. I use StrongLoop’s Loopback (now API Connect) and Angular.js to add usermanagement to a Node.js application.
Requirements:
Install Node.js and npm,
Install StrongLoop.
Part 2 is found here, which adds custom models and ORM to QAVideos.Part 3 is found here, which adds model extensions and uses Swagger (now Open API Initiative) support.
Steps:
1. Application Design
2. Create the Application
3. Add Static Pages
4. Add Angular
5. Add Signup
6. Create an Authentication Service Provider
7. Add Login
8. Add Logout
1. Application Design
The initial design of the QAVideos application is very simple. A user can register, login and logout. An authenticateduser can create, update and delete videos to the platform and see a list of their videos. Unauthenticated users cansee all videos.
About StrongLoop
1/62
If you are not familiar with StrongLoop, it is an API platform for Node.js and includes Loopback to quicly composeAPIs and graphical tools like the API Explorer to document APIs and Arc to build and manage your application. I willuse Loopback to compose the model and the APIs.
You must install StrongLoop for this tutorial. Test to see if you have StrongLoop’s cli installed:slc --version
2. Create the Application
To initialize the application as a Loopback application, on your localhost, open a new command line and use theStrongLoop command line tool ‘slc’ to create a new application with application name ‘qavideos’.
mkdir qavideos
cd qavideos
slc loopback
view raw qavideos_create hosted with by GitHub
2/62
view raw qavideos_create hosted with by GitHub
Select the option ‘api-server (A LoopBack API server with local User auth)’.
When StrongLoop finishes initializing the ‘qavideos’ application successfully, you can start the application from the
3/62
commandline:node .orslc start
You can open the application in a browser and use StrongLoop’s explorer tool to look at the APIs for the built-in Usermodel.node .Web server listening at: http://0.0.0.0:3000Browse your REST API at http://0.0.0.0:3000/explorer
If you used ‘slc start’ look at the log:--- tail of /Users/remko/.strong-pm/start.log ---slc start(69060): StrongLoop PM v5.2.1 (API v6.1.0) on port `8701`slc start(69060): Base folder `/Users/remko/.strong-pm`slc start(69060): Applications on port `3000 + service ID`Browse your REST API at http://127.0.0.1:8701/explorer
When you open the application in the browser via https://localhost:3000, you will see the server status.
This response message is defined in the ‘~/server/boot/root.js’ file. This file is the default boot script of a baseStrongLoop application. All files in the ‘~/server/boot/’ directory with a .js type extension are executed at startup inalphabetical order. The code returning the server status is:
module.exports = function(server) {
// Install a `/` route that returns server status
var router = server.loopback.Router();
4/62
router.get('/', server.loopback.status());
server.use(router);
};
view raw qavideos_root.js hosted with by GitHub
5/62
view raw qavideos_root.js hosted with by GitHub
You can also take a look at the Arc tool, by running the following command ‘slc arc’, which will automatically openhttp://localhost:<port>. Arc will ask you to create an account and login.
Go to the Composer to manage models and datasources.
6/62
3. Add Static Pages
Instead of responding via the dynamic routing, I want to serve static pages from a ‘~/client’ directory with an‘index.html’ page or view, and with a ‘views’ subdirectory with additional pages or views.
First, I disable the ‘~/server/boot/root.js’ file, by renaming it to ‘root.js.disabled.’ Next, open the‘~/server/middleware.json’ file and look for the ‘files’ node, replace it with the following code.
"files": {
7/62
"loopback#static": {
"params": "$!../client"
}
},
view raw qavideos_middleware_files hosted with by GitHub
8/62
view raw qavideos_middleware_files hosted with by GitHub
This code tells StrongLoop to use ‘static’ pages from the ‘client’ directory.
The last thing to do is to create a simple ‘~/client/index.html’ page.
My Videos
view raw qavideos_index.html_v1 hosted with by GitHub
9/62
view raw qavideos_index.html_v1 hosted with by GitHub
Now restart the application via the commandline with ‘node .’ and open the address ‘http://0.0.0.0:3000’ in abrowser, you should see the static page with an H1-title ‘My Videos’.
10/62
4. Add Angular
You now have a simple QAVideos application with a static home page but without any data or real functionality. Toadd the functionality to register, login and manage content, I will first add support for Angular.
Angular supports data binding to send data between client and server. LoopBack provides an AngularJS JavaScriptSDK when you install StrongLoop. The SDK provides AngularJS services, like client-side representation of themodels and remote methods on the server, command-line tools like lb-ng and a Grunt plugin.
Generate the Angular services script
To generate an Angular services script that binds data to the StrongLoop model, run the following commands fromthe command-line.
mkdir client/js
lb-ng server/server.js client/js/lb-ng-services.js
view raw qavideos_create_angular_services1 hosted with by GitHub
11/62
view raw qavideos_create_angular_services1 hosted with by GitHub
Currently there is only the built-in User model in QAVideos. I will use this built-in User model to add usermanagement to the QAVideos. The lb-ng command here generates a ‘~/client/js/lb-ng-services.js’ JavaScript file,which includes the binding SDK between Angular and the Loopback model.
You have to load this ‘lb-ng-services.js’ JavaScript file in your pages.
12/62
You also have to include the Angular scripts and the UI Router script in your html. Install both packages using npm:npm install --save [email protected] install --save [email protected] install --save [email protected]
Copy ‘angular.js’, ‘angular-resource.js’, ‘angular-ui-router.js’ and ‘angular-ui-router.js.map’ to a new directory‘~/client/js/angular/’.
In the ‘~/client/js’ directory, create a new file ‘app.js’, which is the main JavaScript file of your Angular client app, andadd the ‘lbServices’ module to the angular.module() call, as follows:
angular.module("app", [
"lbServices"
])
;
view raw qavideos_add_angular_add_lbservices hosted with by GitHub
13/62
view raw qavideos_add_angular_add_lbservices hosted with by GitHub
Modify the ‘~/client/index.html’ page. Change the html-tag to include the ‘ng-app=”app”‘ attribute, and include theAngular client app.js script and the Angular scripts to the bottom of the body:
My Videos
Test Angular: 2+3= {{ 2+3 }}
Type your name Hello {{ name }}
14/62
view raw qavideos_include_scripts1_v2 hosted with by GitHub
15/62
view raw qavideos_include_scripts1_v2 hosted with by GitHub
You now have added basic Angular support for the sample app. You can test if your Angular support is working, byadding the following code.
Test Angular: 2+3= {{ 2+3 }}
Type your name Hello {{ name }}
view raw basic_angular_test hosted with by GitHub
16/62
view raw basic_angular_test hosted with by GitHub
From the commandline run ‘node .’.
5. Add Signup and Login
Now we can add Signup and Login functionality. To add the signup functionality to QAVideos, I need to add:
a signup page,
a signup-success page,
a link and route from the index page to the signup page,
a link in the signup form to submit to the signup function in a signup controller, and
a signup controller, which implements the code to register the new user,
a sign-up-success state,
a route to the sign-up-success page when the state changes to ‘sign-up-success’, and
a sign-up-success page
Create the following directories: ‘~/client/views/’ and ‘~/client/js/controllers/’. In the ‘~/client/views/’ directory, create a
17/62
new ‘sign-up-form.html’ page and add the following html.
Sign up
Password
Signup
view raw qavideos_sign-up-form hosted with by GitHub
18/62
view raw qavideos_sign-up-form hosted with by GitHub
In the same ‘~/client/views/’ directory, create a ‘sign-up-success.html’ page.
You are now registered.
Please log in to perform more actions.
view raw qavideos_sign-up-success hosted with by GitHub
19/62
view raw qavideos_sign-up-success hosted with by GitHub20/62
view raw qavideos_sign-up-success hosted with by GitHub
Edit the index page, remove the Angular test tags, and add the following navigation and view tags.
Sign up
Log in
Log out
view raw qavideos_index_nav-and-view hosted with by GitHub
21/62
view raw qavideos_index_nav-and-view hosted with by GitHub
Your complete index.html page should look as follows:
My Videos
Sign up
22/62
Log in
Log out
view raw qavideos_index.html_v2 hosted with by GitHub
23/62
view raw qavideos_index.html_v2 hosted with by GitHub
If you look at the code you added to the index page, at the end you added a line with a main-tag and a ‘ui-view’attribute. This is an Angular property from the Angular ‘ui-router’ or ‘UI Router’ module. This module handles routingby using so-called states. You already included the ‘UI Router’ JavaScript library in the ‘index.html’ as instructedearlier.
The nav-tag includes a list of li-tags. The signup list item has an attribute ng-hide=”currentUser”. This attribute tellsAngular to hide this item if there is a currentUser data object bound, so that if we bind a currentUser data object tothe page in case a user is logged in. The ng-show attribute on the logout list item works the opposite way, showingthe logout list item when there is a currentUser data object.
The anchor-tags have each two attributes, in case of the logout anchor, there are ui-sref=”logout” and ui-sref-active=”active”. The ui-sref binds a link to a state. The state concept is used by the UI Router module to track thestate of your pages and navigate the application. You change state by using the $state.go() function in theStateProvider in the app.js, which I will define below.
Restart the video-app now, you should see the sign-up and login links on the homepage, but they are not active.
24/62
To make the sign-up link active, I must add support for the UI Router module and a ‘state’ object in the ‘app.js’ clientscript. This state object is bound to the link via the ‘ui-sref’ attribute when the ‘index.html’ page loads.First, add UI Router support by editing the ‘app.js’ file and adding the ‘ui.router’ module.Then you add states in the ‘app.js’ file by adding a config array with a ‘State Provider’ object, ‘UrlRouterProvider’object, and a function that adds one or more states to a ‘State Provider’ object, as follows.
angular.module('app', [
'ui.router',
'lbServices'
])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('sign-up', {
url: '/sign-up',
templateUrl: 'views/sign-up-form.html',
controller: 'SignUpController'
})
}
25/62
]);
view raw qavideos_appjs_v2 hosted with by GitHub
26/62
view raw qavideos_appjs_v2 hosted with by GitHub
Restart the video-app, you should see the active sign-up.
Look at the ‘sign-up’ state you added, it consists of an active ‘url’, ‘templateUrl’, which is a relative link to thepreviously created sign-up page, and the ‘SignUpController’, which is a controller object that I will define next.
Click the link, it should change states to ‘sign-up’, which should load the ‘sign-up-form.html’ template, and changethe url to ‘http://localhost:3000/#/sign-up’.
To complete the sign-up process, the user needs to complete the sign-up-form, submit it, and this should call a‘register’ function in the ‘SignUpController’ that creates the new user object, so that when logging in, the app canauthenticate the login values against existing users.
In the ‘SignUpController’, you control state, scope and add functions you can call from within the page to which thecontroller is added. In case of the ‘sign-up’ form, we specifically want to add a ‘register’ function to the scope that iscalled when the ‘sign-up’ form is submitted and creates the new user object.
Create a new file ‘~/client/js/controllers/auth.js’, define a controller ‘SignUpController’. In the controller, pass $scopeand $state objects, and in the controller function, define a register() function. For now, all we do in the registerfunction is change the state to ‘sign-up-success’.
angular.module('app')
.controller('SignUpController', ['$scope', '$state', function($scope, $state) {
27/62
$scope.register = function() {
$state.go('sign-up-success');
};
}])
;
view raw qavideos_authjs_v1 hosted with by GitHub
28/62
view raw qavideos_authjs_v1 hosted with by GitHub
You must add the ‘~/client/js/controllers/auth.js’ file to the script includes in the index.html page.
view raw qavideos_index.html_v3_scripts hosted with by GitHub
29/62
view raw qavideos_index.html_v3_scripts hosted with by GitHub
Next, add the ‘sign-up-success’ state to the ‘~/client/js/app.js’ file.
angular.module('app', [
'ui.router',
'lbServices'
])
.config([
'$stateProvider',
'$urlRouterProvider',
30/62
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('sign-up', {
url: '/sign-up',
templateUrl: 'views/sign-up-form.html',
controller: 'SignUpController'
})
.state('sign-up-success', {
url: '/sign-up/success',
templateUrl: 'views/sign-up-success.html'
})
}
]);
view raw qavideos_appjs_v3 hosted with by GitHub
31/62
view raw qavideos_appjs_v3 hosted with by GitHub
The ‘sign-up-success’ state routes to the ‘templateUrl’, we already created the matching ‘sign-up-success.html’template above. Now, when you restart QAVideos, you can click ‘sign-up’, submit your ‘sign-up’ form, and you aretaken to the ‘sign-up-success’ page.
32/62
Because we did not actually create a user in the ‘register’ function, no actual user was created yet, so that is what Iwill do next.
Create an Authentication Service Provider
To implement the authentication services for sign-up, login and logout, I will create a so-called Provider. Angular isbuilt around the design pattern of Dependency Injection and uses Providers to allow developers to wire the partstogether. The controller we defined earlier is a Provider of type ‘Specialized Objects’, which conform to the Angulardefined API. Developers can also write objects that conform to a developer defined API, these Providers are of type‘Services’. I will write here a Authentication Service.
The Angular injector service can create a service object defined by the developer. So-called recipes tell the injectorwhat type of object to create, the most common is the Provider recipe, the other 4 recipes are Value, Factory,Service and Constant.
I will create a Factory service to function as the Authentication service for my QAVideos app. Create a directory‘~/client/js/services/’ and in it create a new file ‘~/client/js/services/authFactory.js’. In it, I use the ‘.factory’ method tocreate a service named ‘AuthService’, in it is defined a register() function that creates a new user with a requiredemail and password based on the built-in User model.
angular.module('app')
.factory('AuthService', ['User', '$q', '$rootScope', function(User, $q, $rootScope) {
function register(email, password) {
return User
.create({
email: email,
33/62
password: password
})
.$promise;
}
return {
register: register
};
}]);
view raw qavideos_authfactory_v1 hosted with by GitHub
34/62
view raw qavideos_authfactory_v1 hosted with by GitHub
The $q parameter is an Angular service that implements so-called promises to be run when an asynchronousmethod returns the result. When you call the AuthService provider, the calling method obliges to handle the promise.
Include the ‘authFactory.js’ script in the index.html scripts.
view raw qavideos_index.html_v4_scripts hosted with by GitHub
35/62
view raw qavideos_index.html_v4_scripts hosted with by GitHub
In the ‘~/client/js/controllers/auth.js’ file I add the ‘AuthService’ to the ‘SignUpController’, and call the AuthService’sregister function to create a new user. Note I also added the ‘AuthService’ in the ‘.controller’ signature.
angular.module('app')
36/62
.controller('SignUpController', ['$scope', '$state', 'AuthService', function($scope, $state, AuthService ){
$scope.register = function() {
AuthService.register($scope.user.email, $scope.user.password)
// handle promise
// onsuccess
.then(function() {
$state.go('sign-up-success');
},
// onerror
function (err) {
// tbd
});
};
}]);
view raw qavideos_authjs_v2 hosted with by GitHub
37/62
view raw qavideos_authjs_v2 hosted with by GitHub
In the above code, you add the AuthService provider to the controller function, and call the register function on theAuthService. As the calling method to the AuthService, you oblige to handle the promise in the ‘.then()’ function. Inthis code, we change the state to ‘sign-up-success’ onsuccess, and on error we do nothing for now. When a usersuccessfully signs up, the ‘sign-up-success.html’ page loads.
Restart QAVideos. You should now be able to successfully register a new user. We cannot test it yet, because weneed to add the login functionality to verify this.
6. Add Login
To add the login functionality, I need to add:
a login template,
a login state object to route the user from the ‘index.html’ to the login form,
a login controller function that is called when the login form is submitted,
38/62
a login method to authenticate a registered user in the ‘AuthService’ provider,
a state to route back to the ‘all-videos.html’ template with a ‘logged in’ status when a user logs in successfully,and
an ‘all-videos.html’ template.
First, create a new file ‘~/client/views/login.html’.
Login form
Password
Login
view raw qavideos_login-html_v1 hosted with by GitHub
39/62
view raw qavideos_login-html_v1 hosted with by GitHub
We already added a login and logout link in the ‘index.html’. However, to make the login link active, as with the ‘sign-up’ link, I will add a login state to the ‘app.js’ configuration.
angular.module('app', [
40/62
'ui.router',
'lbServices'
])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('sign-up', {
url: '/sign-up',
templateUrl: 'views/sign-up-form.html',
controller: 'SignUpController'
})
.state('sign-up-success', {
url: '/sign-up/success',
templateUrl: 'views/sign-up-success.html'
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'AuthLoginController'
})
41/62
}
]);
view raw qavideos_appjs_v4 hosted with by GitHub
42/62
view raw qavideos_appjs_v4 hosted with by GitHub
Next, define the ‘AuthLoginController’ that runs the authentication for the login functionality. Open the‘~/client/js/controllers/auth.js’ file, and add an ‘AuthLoginController’, similar to the ‘SignUpController’ as follows.
angular.module('app')
.controller('SignUpController', ['$scope', '$state', 'AuthService', function($scope, $state, AuthService) {
$scope.register = function() {
AuthService.register($scope.user.email, $scope.user.password)
// handle promise
// onsuccess
.then(function() {
$state.go('sign-up-success');
},
// onerror
function (err) {
// tbd
});
};
}])
.controller('AuthLoginController', ['$scope', '$state', 'AuthService', function($scope, $state, AuthService) {
$scope.login = function() {
43/62
AuthService.login($scope.user.email, $scope.user.password)
.then(function() {
$state.go('all-videos');
},
function() {
// tbd
});
};
}])
;
view raw qavideos_authjs_v3 hosted with by GitHub
44/62
view raw qavideos_authjs_v3 hosted with by GitHub
In the controller, I call a login function on the AuthService. Open the ‘~/client/js/services/authFactory.js’ and add thelogin function, make sure to add the login function to the return object.
angular.module('app')
.factory('AuthService', ['User', '$q', '$rootScope', function(User, $q, $rootScope) {
function register(email, password) {
return User
.create({
email: email,
password: password
})
.$promise;
}
45/62
function login(email, password) {
return User
.login({email: email, password: password})
.$promise
.then(function(response) {
$rootScope.currentUser = {
id: response.user.id,
tokenId: response.id,
email: email
};
});
}
return {
register: register,
login: login
};
}]);
view raw qavideos_authfactory_v2 hosted with by GitHub
46/62
view raw qavideos_authfactory_v2 hosted with by GitHub
As you see in the code, when the user is successfully logged in, ‘.then(‘ a ‘currentUser’ object is added to the$rootScope object. This means, that now, in the index.html page, Angular will bind the currentUser object to thepage
Because, on successful login in the AuthLoginController we change the state to ‘all-videos’, add it to the ‘app.js’.
angular.module('app', [
47/62
'ui.router',
'lbServices'
])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('sign-up', {
url: '/sign-up',
templateUrl: 'views/sign-up-form.html',
controller: 'SignUpController'
})
.state('sign-up-success', {
url: '/sign-up/success',
templateUrl: 'views/sign-up-success.html'
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'AuthLoginController'
})
.state('all-videos', {
48/62
url: '/all-videos',
templateUrl: 'views/all-videos.html'
})
}
]);
view raw qavideos_appjs_v5 hosted with by GitHub
49/62
view raw qavideos_appjs_v5 hosted with by GitHub
To complete the Login functionality, add the ‘all-videos.html’ template. Create a new file ‘~/client/views/all-videos.html’.
No Videos yet
view raw qavideos_all-videos-html hosted with by GitHub
50/62
view raw qavideos_all-videos-html hosted with by GitHub
Restart QAVideos, signup and login.
51/62
When successfully logged in, you are taken to the ‘all-videos.html’ page.
Add Logout
By now you should pretty much be able to add the logout functionality all by yourself.
52/62
By now you should pretty much be able to add the logout functionality all by yourself.
The logout link in the index.html page was already added, but it is inactive. I need to add a logout state to the appconfiguration in the ‘app.js’ file.
angular.module('app', [
'ui.router',
'lbServices'
])
53/62
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('sign-up', {
url: '/sign-up',
templateUrl: 'views/sign-up-form.html',
controller: 'SignUpController'
})
.state('sign-up-success', {
url: '/sign-up/success',
templateUrl: 'views/sign-up-success.html'
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'AuthLoginController'
})
.state('all-videos', {
url: '/all-videos',
templateUrl: 'views/all-videos.html'
})
54/62
.state('logout', {
url: '/logout',
templateUrl: 'views/all-videos.html',
controller: 'AuthLogoutController'
})
}
]);
view raw qavideos_appjs_v6 hosted with by GitHub
55/62
view raw qavideos_appjs_v6 hosted with by GitHub
Now add the ‘AuthLogoutController’.
angular.module('app')
.controller('SignUpController', ['$scope', '$state', 'AuthService', function($scope, $state, AuthService) {
$scope.register = function() {
AuthService.register($scope.user.email, $scope.user.password)
// handle promise
// onsuccess
.then(function() {
$state.go('sign-up-success');
},
// onerror
function (err) {
// tbd
});
56/62
};
}])
.controller('AuthLoginController', ['$scope', '$state', 'AuthService', function($scope, $state, AuthService) {
$scope.login = function() {
AuthService.login($scope.user.email, $scope.user.password)
.then(function() {
$state.go('all-videos');
},
function() {
// tbd
});
};
}])
.controller('AuthLogoutController', ['$scope', 'AuthService', '$state',
function($scope, AuthService, $state) {
AuthService.logout()
.then(function() {
$state.go('all-videos');
});
}
])
;
57/62
view raw qavideos_authjs_v4 hosted with by GitHub
58/62
view raw qavideos_authjs_v4 hosted with by GitHub
Add the logout function to the AuthService.
angular.module('app')
.factory('AuthService', ['User', '$q', '$rootScope', function(User, $q, $rootScope) {
function register(email, password) {
return User
.create({
email: email,
password: password
})
.$promise;
}
function login(email, password) {
return User
.login({email: email, password: password})
.$promise
.then(function(response) {
$rootScope.currentUser = {
id: response.user.id,
tokenId: response.id,
email: email
};
59/62
});
}
function logout() {
return User
.logout()
.$promise
.then(function() {
$rootScope.currentUser = null;
});
}
return {
register: register,
login: login,
logout: logout
};
}]);
view raw qavideos_authfactory_v3 hosted with by GitHub
60/62
view raw qavideos_authfactory_v3 hosted with by GitHub
You are finished adding user management to QAVideos by adding signup, login and logout functionality to the built-in User model in StrongLoop using Angular.js.Restart QAVideos to signup, login and logout.
Source code: https://github.com/remkohdev/qavideos_part1
In part 2, I will add custom models to QAVideos and add ORM to a persistent data storage.In part 3, I will extend the models and add support for Swagger or Open API Initiative.Following parts will expand the QAVideos application further.
61/62
62/62
