session based authentication - new...
TRANSCRIPT
Class Note # 03 “CS Projects” Dr. Hanh Pham
Advanced Web Programming (Cookies & Sessions)
GOALS: Intensive Web Programming Training Workshop which shows the basics/core of Web Programming - a must-have
skill to get a job for CS graduates. Short but address all the basics: Client+Server+Database At the end of the workshop you'll be able to create a real website at your CS account which lets users to register for
accounts, login ... with user data stored in your MySQL database.
TABLE OF CONTENTS:1. IMPORTANT information about our CS Linux system2. Set-up your web space3. Design: what will we build ?4. CLIENT programs5. DATABASE6. SERVER programs7. Some explanations (+CGI)8. Learn More
1. IMPORTANT information about our CS Linux system
Every CS student can have: a CS Linux account a MySQL database account
If you haven’t done so then email Aram ([email protected]) ASAP and ask him to create accounts for you.
1
Class Note # 03 “CS Projects” Dr. Hanh Pham
+ CS Web Server address (used for PUTTY or SSH, WINSCP, to remotely access or transfer files to/from your CS account at CS server to your computer, download PUTTY and WINSCP if needeed): wyvern.cs.newpaltz.edu
+ web space (for your web pages) is whatever inside the folder named WWW (all capitalized) inside your CS account. You’ll need to create this folder if you haven’t done so. Must set the permission to 755: chmod WWW 755
+ when you run the web server programs the ERRORS are listed at a (shared with all other CS users) log, you see it by this command:
$ tail /var/log/httpd/error_log
+ if you need to edit codes while accessing your account remotely you can use this TEXT editor in the CS system:$ jpico index.htm
+ get to your MySQL account: you must login into your CS account first, then you can get to MySQL from there by the following:
$ mysql -h localhost –p (click enter, then type in your MySQL password which is different from the CS password)$ USE YourUseName_db; (a SQL command to open/unlock your database, must do this before doing anything else with
database, YourUserName is the students NPCUID. The database name is the username followed by "_db")To get out of MySQL account and get BACK to your CS account you can type “quit” or “CTRL+C”
2. SET-UP your web space at the CS Linux system
Cookie vs. Token Authentication - Recaphttps://dzone.com/articles/cookies-vs-tokens-the-definitive-guide
How to scrape a website that requires login with Pythonhttps://kazuar.github.io/scraping-tutorial/
Login Management and Security
2
Class Note # 03 “CS Projects” Dr. Hanh Pham
http://www.cs.virginia.edu/~lab2q/lesson_7/
PHP Programming/Building a secure user login systemhttps://en.wikibooks.org/wiki/PHP_Programming/Building_a_secure_user_login_system
3
Class Note # 03 “CS Projects” Dr. Hanh Pham
4
Class Note # 03 “CS Projects” Dr. Hanh Pham
Session Based Authentication http://www.calcium-c.com/session-based-authentication/
5
Class Note # 03 “CS Projects” Dr. Hanh Pham
6
Class Note # 03 “CS Projects” Dr. Hanh Pham
Token Based Authentication http://www.calcium-c.com/token-based-authentication/
7
Class Note # 03 “CS Projects” Dr. Hanh Pham
8
Class Note # 03 “CS Projects” Dr. Hanh Pham
Authorization Code (or Web Server) Flowhttps://docs.oracle.com/cd/E39820_01/doc.11121/gateway_docs/content/oauth_flows.html
9
Class Note # 03 “CS Projects” Dr. Hanh Pham
https://madhatted.com/2014/6/17/authentication-for-single-page-apps
10
Class Note # 03 “CS Projects” Dr. Hanh Pham
11
Class Note # 03 “CS Projects” Dr. Hanh Pham
Step 1: use PUTTY to login to your CS account
12
Class Note # 03 “CS Projects” Dr. Hanh Pham
13
Class Note # 03 “CS Projects” Dr. Hanh Pham
Step 2: (skip this if you already have a WWW folder created and set up) create a web space (for your web pages) i.e. a folder named WWW (all capitalized) inside your CS account.
$ mkdir WWWMust set the permission to 755:
$ chmod WWW 755TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:
cs.newpaltz.edu/~YourUserName/
To keep your web space organized you may want to create a sub-folder inside this WWW folder for our next projects:$ cd WWW
Create a sub-folder, for example “learn”:$ mkdir learn
Must set the permission to 755:$ chmod learn 755
14
Class Note # 03 “CS Projects” Dr. Hanh Pham
TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:cs.newpaltz.edu/~YourUserName/learn
15
Class Note # 03 “CS Projects” Dr. Hanh Pham
3. DESIGN: what will we build ?
We’ll build a website at our CS account which has menu of several pages, it lets users to register for accounts, login ... with user data stored in your MySQL database as shown here:http://cs.newpaltz.edu/~phamh/basics/web/
16
Class Note # 03 “CS Projects” Dr. Hanh Pham
4. CLIENT programs
We need to create web client programs which initially are stored at the server site (your CS web space) but will be sent to and run at the client site (the computer of person who visits your webpages). In our example, these programs are in HTML and are made as simple as possible.
Step 3: let’s create a sub-folder called “simple” inside this “learn” folder:
17
Class Note # 03 “CS Projects” Dr. Hanh Pham
$ cd learnCreate a sub-folder, for example “learn”:
$ mkdir simpleMust set the permission to 755:
$ chmod simple 755
Step 4: we’ll create web pages for our website:
You can do it in two ways: use/download “note++” in your computer, then transfer these files using WinSCP to your CS account OR create/edit directly in your CS account via PUTTY program and using jpico (see part 1 above)
In any case, don’t forget to set the permission (see chmod … 755 in part1 above) for ALL files !
+ if you need to edit codes while accessing your account remotely you can use this TEXT editor in the CS system:$ jpico index.htm
18
Class Note # 03 “CS Projects” Dr. Hanh Pham
The CODES for these files are in HTML as follow:
File name Contents/Codes Look/Output
19
Class Note # 03 “CS Projects” Dr. Hanh Pham
“index.html” <html>
<head> <title> MY 1st WEBSITE </title> </head>
<frameset rows="250,*" frameborder="0" border="0" framespacing="0"> <frame src="index-top-menu.htm" border="0" name="MENU"> <frame src="index-body.htm" border="0" name="BOT"></frameset>
</html>
“index-top-menu.htm”
<html><head> <title> ABC Inc. </title> </head> <BODY BGCOLOR="FFFFFF"> <H2> <CENTER> ABC Inc.</CENTER> </H2>
<CENTER><IMG SRC="logo.png"> </CENTER> <HR> <CENTER><a href="index-p1-home.htm" target="BOT">Home</a> |
<a href="index-p2-register.htm" target="BOT">Register</a> |
<a href="index-p3-login.htm" target="BOT">Login</a> |
<a href="index-p4-about.htm" target="BOT">About</a> </CENTER>
20
Class Note # 03 “CS Projects” Dr. Hanh Pham
<HR> <p> </BODY></html>
“index-body.htm”
<HTML> <HEAD> <TITLE>ABC Inc.</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <p> <CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<CENTER> <H1>WELCOME to ABC Inc.</H1> <H2>We are proud to support the ABC soccer team ! </H2>
<CENTER> </BODY></HTML>
21
Class Note # 03 “CS Projects” Dr. Hanh Pham
“index-p1-home.htm”
<HTML> <HEAD> <TITLE>Home of ABC Inc.</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <p> <CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<CENTER><H1>This is the HOME of ABC Inc.</H1> </CENTER> </BODY></HTML>
“index-p2-register.htm”
<html><head> <title> Register WEBSITE </title> </head> <body><p>REGISTRATION FORM:</p><form method="post" action="register.cgi">User Name: <input type="text" name="UserName"><p>Password: <input type="text" name="MyPass"><p><input type="submit" value="Enter"></form></body></html>
22
Class Note # 03 “CS Projects” Dr. Hanh Pham
“index-p3-login.htm”
<html><head> <title> MY 1st WEBSITE </title> </head> <body><CENTER>LogIn<form method="post" action="login.cgi"> <p>User Name: <input type="text" name="UserName"> <p>Password: <input type="text" name="MyPass"> <p> <input type="submit" value="Submit"></form></CENTER></body></html>
“index-p4-about.htm”
<HTML> <HEAD> <TITLE>About ABC Inc.</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <p> <CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER> <p> <CENTER> <a href="http://somegreatsite.com">XYX Group</a> is our parent company. Send us an email at <a href="mailto:[email protected]"> [email protected]</a>. </CENTER>
23
Class Note # 03 “CS Projects” Dr. Hanh Pham
</BODY></HTML>
TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:cs.newpaltz.edu/~YourUserName/learn/simple
5. DATABASE
24
Class Note # 03 “CS Projects” Dr. Hanh Pham
You can use a database to store data, in this case: the user name and password of users who can have access to certain things in your website. We have MySQL databse at our CS system. If you don’t have a MySQL account yet then email Aram ([email protected]) ASAP and ask him to create an account for you.
Once you have your MySQL account, you can access your MySQL database. You must login into your CS account first, then you can get to MySQL from there by the following:
$ mysql -h localhost –p (click enter, then type in your MySQL password which is different from the CS password)$ USE YourUseName_db; (a SQL command to open/unlock your database, must do this before doing anything else with
database, YourUserName is the students NPCUID. The database name is the username followed by "_db")
Step 5: manually create a table called UserPass which store user info (UserName, Password) in your MySQL database.
Every time when you want to work/see the data(in the tables) in your MySQL database, you’ll need to:
a)Login to your CS Linux account (see part 1)
b)Login to your MySQL account$ mysql -h localhost –p (click enter, then type in your MySQL password which is different from the CS password)
c) Open/unlock your MySQL database (must do this before doing anything else with database, YourUserName is the students NPCUID. The database name is the username followed by "_db")
$ USE YourUseName_db;
After that, you can work (create, read, write tables) with your MySQL database. In this case:
d) use the following SQL statement to CREATE aTABLE named “UserPass”:
mysql> CREATE TABLE UserPass(userid CHAR(20) NOT NULL, passcode CHAR(10) NOT NULL, PRIMARY KEY(userid));
25
Class Note # 03 “CS Projects” Dr. Hanh Pham
e) Insert/add data (USERNAME and PASSWORD) to the table. This is done “manually” at the command-line level.
mysql> INSERT INTO UserPass VALUES ('user01','pass1'),('user02','pass2');
f) You can check to see the contents of the table UserPass
mysql> SELECT * FROM UserPass ;
You should see something like this:
6. SERVER programs
26
Class Note # 03 “CS Projects” Dr. Hanh Pham
Now, we need to create web server programs which are stored at the server site (your CS web space). A web server program will run when is called (via CGI) from a form in a client program. So, they always come in pairs: a client program(in HTML) and its server program(PYTHON in this case).
In our example, we’ll have two pairs:
Step 6: we’ll create the two web server programs “register.cgi” and “login.cgi”. You can do it in two ways: use/download “note++” in your computer, then transfer these files using WinSCP to your CS account OR create/edit directly in your CS account via PUTTY program and using jpico (see part 1 above)
In any case, don’t forget to set the permission (see chmod … 755 in part1 above) for ALL files !
The CODES for these files are in PYTHON as follow:
File name Contents“register.cgi” #!/usr/bin/python
import cgi, cgitbimport MySQLdb
webForm = cgi.FieldStorage()
username = webForm.getvalue('UserName')mypass = webForm.getvalue('MyPass')
db= MySQLdb.connect("localhost","YourUserName","YourMySQLpassword","YourUserName_db")
myCursor = db.cursor()
sql = "INSERT INTO UserPass VALUES ('%s','%s');" %(username,mypass)
27
Class Note # 03 “CS Projects” Dr. Hanh Pham
try: myCursor.execute(sql) db.commit()except: db.rollback()db.close()
print "Content-type:text/html\r\n\r\n"print "<html>"print "<head>"print "<title> REGISTRATION FORM</title>"print "<head>"print "<body>"print "<h2> Congratulations! You Have Successfully Register With UserName = %s </h2>" %(username)print "</body>"print "</html>"
File name Contents“login.cgi” #!/usr/bin/python
import cgi, cgitbimport MySQLdb
myForm = cgi.FieldStorage()
nick = myForm.getvalue('UserName')secret = myForm.getvalue('MyPass')
db= MySQLdb.connect("localhost","YourUserName","YourMySQLpassword","YourUserName_db")
myCursor = db.cursor()
sql = "SELECT passcode from UserPass WHERE userid = '%s' "%(nick)
try: myCursor.execute(sql) output = myCursor.fetchone() for row in output: sWord = row
28
Class Note # 03 “CS Projects” Dr. Hanh Pham
except: print "Error: unable to fetch data"db.close()
if secret == sWord: print "Content-type:text/html\r\n\r\n" print "<html>" print "<head>" print "<title>Confirm</title>" print "</head>" print "<body>" print "<h2> WELCOME Back %s !</h2>" %(nick) print "</body>" print "</html>"else: print "Content-type:text/html\r\n\r\n" print "Wrong Password or Username !" print "<html>"
So, at the end our folder “simple” should contain the following:
29
Class Note # 03 “CS Projects” Dr. Hanh Pham
TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:cs.newpaltz.edu/~YourUserName/learn/simple
a) TEST the REGISTRATION: click on the “Registration” link in the top menu and enter let’s say “a1” (for username) and “q1” (for password):
b) [skip this if it was ok] If you do get errors (even when the reply says that the username = none) then check:- to make sure that the PERMISSION of the register.cgi file and all the folders above must be 755- the file name of the PYTHON server code (register.cgi) and the name in the form (register.cgi) of the HTML client code must be the SAME
30
Class Note # 03 “CS Projects” Dr. Hanh Pham
- the names of variables (UserName, MyPass) in PYTHON server code and the names of the input box variables (UserName, MyPass) in HTML must be the SAME- go through each line of code in the PYTHON server code, pay attention to double and single quote, example of unacceptable is “ , example of unacceptable is ".- read the system ERROR LOG for more hint:
$ tail /var/log/httpd/error_log
c) Go to MySQL and see if the new Username and Password has been added to the table UserPass
mysql> SELECT * FROM UserPass ;
You should see that the new data (a1,q1) has been added, something like this:
31
Class Note # 03 “CS Projects” Dr. Hanh Pham
Go back to (b) if you don’t see the new data in the table.
7. Some Explanations
32
Class Note # 03 “CS Projects” Dr. Hanh Pham
33
Class Note # 03 “CS Projects” Dr. Hanh Pham
HTTP
• Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. • Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text. HTTP is the protocol to
exchange or transfer hypertext.
34
Class Note # 03 “CS Projects” Dr. Hanh Pham
35
Class Note # 03 “CS Projects” Dr. Hanh Pham
8. LEARN MORE
You can learn simple CSS and some simple JavaScript tricks quickly here:
36
Class Note # 03 “CS Projects” Dr. Hanh Pham
http://cs.newpaltz.edu/~phamh/awd/
You should try to learn more HTML, CSS, SQL in-depth at http://www.w3schools.com/
You can try to learn more PYTHON in-depth at https://www.learnpython.org/
You can try to learn PERL more at https://learn.perl.org/
37