Untangling - fall2017 - week 10
Download as PPTX, PDF0 likes156 views
This document discusses authentication, databases, and EJS partials in Node.js. It provides an overview of using the HTTP-AUTH package for basic authentication, demonstrates passing variables from a Node server to EJS templates, and assigns homework to create a website that uses basic authentication and stores data in a Cloudant database with EJS partials.
![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%>
<% } %>
•](https://image.slidesharecdn.com/untangling10-171109012312/85/Untangling-fall2017-week-10-12-320.jpg)
Untangling - fall2017 - week 10
- 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