Session Based Authentication - New...

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


+ 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

https://kazuar.github.io/scraping-tutorial/

https://dzone.com/articles/cookies-vs-tokens-the-definitive-guide


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

https://en.wikibooks.org/wiki/PHP_Programming/Building_a_secure_user_login_system

http://www.cs.virginia.edu/~lab2q/lesson_7/


4


Session Based Authentication http://www.calcium-c.com/session-based-authentication/

5

http://www.calcium-c.com/session-based-authentication/


6


Token Based Authentication http://www.calcium-c.com/token-based-authentication/

7

http://www.calcium-c.com/token-based-authentication/


8


Authorization Code (or Web Server) Flowhttps://docs.oracle.com/cd/E39820_01/doc.11121/gateway_docs/content/oauth_flows.html

9

https://docs.oracle.com/cd/E39820_01/doc.11121/gateway_docs/content/oauth_flows.html


https://madhatted.com/2014/6/17/authentication-for-single-page-apps

10

https://madhatted.com/2014/6/17/authentication-for-single-page-apps


11


Step 1: use PUTTY to login to your CS account

12


13


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


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


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

http://cs.newpaltz.edu/~phamh/basics/web/


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


$ 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


The CODES for these files are in HTML as follow:

File name Contents/Codes Look/Output

19


“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


<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


“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


“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


</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


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


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


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


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


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


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


- 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


Go back to (b) if you don’t see the new data in the table.

7. Some Explanations

32


33


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


35


8. LEARN MORE

You can learn simple CSS and some simple JavaScript tricks quickly here:

36


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

https://learn.perl.org/

https://www.learnpython.org/

http://www.w3schools.com/

http://cs.newpaltz.edu/~phamh/awd/

Session Based Authentication - New...

Documents

Transcript of Session Based Authentication - New...