ejs and http basic authentication, more bluemix examples

1. UNTANGLING THE WEB
FALL 2017 WEEK 10 – AUTHENTICATION, EJS PARTIALS, DATABASES, MORE ON
USING NPM

2. AGENDA
• Authentication using http-auth
• A simpler database example
• EJS partials demo
• Project work time – get your database input worked out

3. NPM PACKAGES
• First step to providing new functionality in nodejs is to check npm to see if a package exists for what you
want to do
• Authentication, for instance

4. HOW TO NARROW DOWN YOUR PACKAGE CHOICES?
• Make your search as specific as possible

5. THEN I LOOK FOR VERSION NUMBER AND DATE
• If something has been updated recently that’s good UNLESS it’s a version 0.x or 1.x in which case I may
go with something updated a bit longer ago
• If other packages are using it that’s good
• If there is a github link and it’s got a lot of contributors and forks and stars then that’s even better
• Check the license – MIT is best, but other open source licenses are fine

6. USER AUTHENTICATION
• HTTP-AUTH is a very decent user authentication package for node
• It sets up HTTP basic authentication (or at least that’s what we’ll use out of the package. There are
other options)
• HTTP Basic authentication is managed by the browser through the use of session variables
• So when you close the browser you’ll have to log back in again
• I use incognito mode to test this so that it doesn’t store any information and I can log in each time I test

7. OTHER AUTH OPTIONS
• Two factor is a great system to prevent account problems. A good tutorial on bluemix is here:
• https://www.ibm.com/developerworks/library/se-configure-multifactor-authentication-bluemix-node.js-
applications/index.html
• OAuth is another authentication scheme that can allow you to use you facebook, google, etc. login to
control access to your website
• In a real website, these options are probably best to consider, but they are a bit more challenging to set
up

8. DEMO – ADDING BASIC AUTH TO THE SAMPLE
WEBSITE
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication

9. EXERCISE
• On your website (locally or on bluemix), add basic authentication for all of your pages

10. EJS
• EJS is a simple templating engine
• It is used for things like headers and footers, but also to pass variables from node into your html
• This way you can do data operations on the server side and just display on the client side
• Good tutorial: https://scotch.io/tutorials/use-ejs-to-template-your-node-application
• This is also a good resource: http://www.embeddedjs.com/getting_started.html

11. EJS EXERCISE
• https://ionicabizau.github.io/ejs-playground/
• On this playground, I’d like you to make a list of 5 animals and for each animal have as script calculate
the number of letters in the name of the animal and list those values
• Syntax is here: http://www.embeddedjs.com/getting_started.html
• Remember the = sign for printing variables!!

12. EJS SOLUTION
•
<%
var animals = ["Orangutan", "Margay", "Liger", "Goat", "Rat"];
%>
•
These animals are amazing:
<% for(var i = 0; i < animals.length; ++i) {%>
- <%=animals[i]%>
<%=animals[i].length%>
<% } %>
•

13. PASSING VARIABLES FROM THE SERVER
• In routes/index.html
• Pull of the request and pass as a locals object
• In app.js
• Set as an app.locals variable
• In either case you can use from within templates <%=

14. PROCESS TO UNDERSTAND THE SAMPLE WEBSITE
• Tearing out the more complex parts to replace them with simpler parts

15. HOMEWORK 10 (DUE NOV 22 BEFORE CLASS)
• Create a web site using nodejs that uses basic authentication (use the http-auth module)
• Do not allow the page to be displayed if a valid logon is not given
• Use an ejs partial to provide a footer that shows the logged in user
• Submit this as a github repository and email a screenshot of it running on your machine
• (no live website is required for this homework)

16. HOMEWORK 11 (DUE NOV 22ND BEFORE CLASS)
• Create a project that has a database of animals and how many legs they have
• Allow the user to enter an animal from the web page
• This should be running as a project on bluemix, with the database in cloudant
• Each person should have their own project and database (although the databases can be on the same
cloudant instance on the same bluemix account)
• Submit the github repository, the running website address, and a screenshot of the database