Simple Authentication and Page Protection with JSP

Exzilla.net

Services

About Us

Contact

Home -> Articles -> Simple Authentication and Page Protection with JSP

Features

•Forums

•Files

•Blogs

Simple Authentication and Page Protection with JSP

May 1, 2001

Spidix

Author's Bio | E-Mail

ตัวอย่างการ Authenticate และ การควบคุมสิทธิในการเข้าถึงข้อมูล อย่างง่าย ด้วย JSP

Introduction

ในการ Control การเข้าถึงข้อมูลใน Website สิ่งที่หลีกเลี่ยงไม่ได้ ก็คือ ต้องมีหน้าจอ Login และตรวจสอบว่า User ที่มีสิทธิเท่านั้นที่สามารถเข้าถึงข้อมูลในส่วนที่เขามีสิทธิ ใน article นี้จะเป็นการยกตัวอย่างง่าย ในการประยุกต์ใช้ความสามารถของ JSP มาดูแลเรื่องการ authentication นี้

Technology Selection

ในการพัฒนาระบบนี้ จะมีลักษณะที่เป็น Web Base Application ซึ่งมีการ Programming ที่ฝั่ง Server และให้การแสดงผลออกมาเป็นรูปแบบ HTML

HTML <-> JSP <-> JavaBean

ดังนั้นจากรูปแบบการพัฒนานี้ เราเลือกใช้ Technology ในการพัฒนา ดังนี้

1. Java Server Page (JSP)

อย่างที่เราทราบกัน การพัฒนา Application โดยใช้ JSP นั้น องค์ประกอบในการพัฒนา และการทดสอบหลายอย่าง ทั้งที่ตัว Editor ที่ใช้เขียน Program, Java Development Kit (JDK 1.2.2) และ Web Server ที่ Support JSP (JSP 1.1) ซึ่งจะเห็นได้ว่า ถ้าเรามีเครื่องไม้เครื่องมือที่มาช่วยเราในการพัฒนา จะทำให้การพัฒนา Application ของเรามีความคล่องตัวมากขึ้น ผมเลยเลือกใช้ Oracle JDeveloper 3.1.1 (Download ได้ที่ http://otn.oracle.com) ก็เพราะมี Environment ในการพัฒนาที่พูดถึงในเบื้องต้น มาให้ครบ แต่ถ้าคุณถนัดใช้ Development Tools ตัวอื่นๆ ในท้องตลาด ก็สามารถทำได้

2. Presentation Layer

เราใช้ Technology ของ JSP เพื่อทำการจัดเตรียม และแสดงผล รวมถึงการติดต่อกับผู้ใช้ โดยผ่าน Browser

3. Data Storage

เนื่องจาก เป็นการยกตัวอย่าง การ Control Authenticate อย่างง่ายๆ เพื่อเป็นการตัดขั้นตอนเกี่ยวกับ Manage Data Storage เราจึงเลือกใช้ การเก็บข้อมูลแบบ Object ที่มี Attribute คือ User, Password และ E-Mail ไปเก็บไว้ใน HashTable แทนที่จะเป็น Database ซึ่งหากคุณสนใจ ก็สามารถที่จะพัฒนาส่วนนี้ให้ติดต่อกับ Database แทนได้

Function and technique in an application

1. Session variable เพื่อทำการเก็บ Status ที่เกิดขึ้นในแต่ละ Session โดยในตัวอย่างนี้ เราก็เอามาใช้ เพื่อทำการตรวจสอบ User ได้มีการผ่านการ Login เข้ามาหรือยัง

2. Include tag เพื่อเป็น Control ความถูกต้องตรงกันของ Web Page ทั้งหมด การใช้ Include tag ในส่วนที่เป็น Header และ Footer ทำให้เราทำงานน้อยลง ไม่ต้องไปแก้ทุก Page

3. Forward tag เพื่อเป็นการ Redirect ไปยัง Web page ที่เราต้องการ

4. Using Java bean from JSP page เพื่อแยกส่วน Business Logic กับส่วน Presentation ออกจากกัน ทำให้ง่ายต่อการพัฒนา และ Maintenance

5. Keep data in HashTable สำหรับการเก็บ User และ Password

6. and Display date in nls date format สำหรับการแสดงข้อมูล Date/Time Format

Designing an application

Function User interface Design

เริ่มจาก User เข้ามาที่ Page Welcome ซึ่งยังไม่ Login เข้ามา ในส่วนของ Greeting จะเป็น Hi : Guest และมีปุ่ม Sign in ให้ User Login เข้าไป

เมื่อ User click ที่ปุ่ม Sign in หรือ Click here เพื่อเข้า Member Area โปรแกรมจะแสดงหน้าจอ Login ให้ User ทำการ Login เข้าระบบ

เมื่อ Login เข้ามาได้ ส่วน Greeting จะเปลี่ยนเป็น Hi : ตามด้วยชื่อของ User ที่ Login เข้ามา และปุ่ม Sign in จะกลายเป็น Sign out และเมื่อ User click ที่ Click Here เพื่อเข้าสู่ Member Area ก็จะปรากฎหน้าจอดังรูปต่อไป

จากหน้าจอนี้ เป็นส่วนของ Member Area ซึ่งจะดึงข้อมูลเฉพาะของ User มาแสดง ดังตัวอย่าง จะแสดง E-Mail ของ User นี้ และในส่วน Footer ของทุกหน้าจอ นอกจากแสดงส่วน Contact person และ Copyright แล้ว ก็ได้แสดงข้อมูล File Encoding ไว้ด้วย

จากตัวอย่าง Screen จะประกอบด้วย 3 ส่วน คือ

1. Header ประกอบด้วย Logo, Sign in/Sign out และ Greeting

2. ส่วนการแสดงผล ที่ได้จาก Hash Table หลังจาก User ทำการ Login เข้ามา

3. Footer แสดง Copyright, Contact person และ File Encoding ในขณะที่โปรแกรมกำลังทำงานอยู่

Diagram

Implementation

1.login.html

File นี้เป็น Html ให้ User Login เข้าสู่ระบบ โดยจะมี Form เพื่อรับค่า User Name และ Password และทำการส่งต่อไปยัง Login_summit.jsp ในลักษณะ Post

<td colspan="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Sign

in to exzilla.net </b></font></td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Password</font></td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

2.Welcome.jsp

ที่ Welcome.jsp เป็นส่วนแสดงผล หลังจากที่ User ได้ทำการ Login เข้ามาแล้ว โดยมีรายละเอียดดังนี้

<%@ page contentType="text/html;charset=UTF-8"%>

เป็นการกำหนดว่า Content Type เป็น Text/html และมีการ Encode ด้วย UTF-8

<%@ page language = "java" import = "java.util.*, java.lang.*, 
                java.text.*, java.text.DateFormat,java.util.Locale " %>

ทำการ Import Java Class ที่จำเป็นต้องใช้ในโปรแกรม JSP นี้

<%@ include file="loggedin.inc" %>

Include file Loggedin.inc ซึ่งเป็นส่วนแสดงว่า User นั้น Login เข้ามาหรือยัง ถ้ายังไม่ได้ Login จะแสดงชื่อ User เป็น Guest

<%@ include file="header.inc" %>

Include file Header.inc ซึ่งแสดงส่วน Header ที่รวมการทำงานของ Greeting และ Sign in/Sign out

Locale myLocalUs = new Locale("en","UNITED STATES");

String dateString="";

SimpleDateFormat formatter = new SimpleDateFormat ("yyyyy.MMMMM.EEE GGG hh:mm aaa",myLocalUs);

Date currentTime_1 = new Date();

dateString = formatter.format(currentTime_1);

out.println(dateString);

ในส่วนนี้เป็นการกำหนดรูปแบบการแสดงวัน และเวลา ณ ปัจจุบัน โดยระบุ Locale ตามที่เราต้องการ

<%@ include file="footer.inc" %>

สุดท้าย เป็นการ Include file Footer.inc ซึ่งเป็นส่วนแสดง Copyright และ File Encode

3.login_summit.jsp

ใน Login_summit.jsp นี้ ทำงานตรวจสอบ User ที่ Login เข้ามาถูกต้องหรือไม่ ถ้า Login เข้ามาถูกต้อง ก็จะไปทำงานอื่นต่อไป แต่ถ้า Login มาไม่ถูกต้องก็จะวนกลับไปหน้าจอ Login ใหม่

<jsp:useBean id="lbean" scope="page" class="package3.loginBean" >

</jsp:useBean>

ในขั้นตอนการ Authenticate นี้ เราได้แยกส่วนการเก็บข้อมูล และ Function การจัดเก็บ และดึงข้อมูลไว้ที่ package3.loginBean ซึ่งเป็นการใช้งานในรูปแบบ Bean

String nextPage="login.html";

โดยเริ่มต้นที่ การกำหนดตัวแปรชื่อ nextPage ซึ่งเป็นตัว Control ว่า หลังจากที่ตรวจสอบการ Authenticate แล้ว จะให้โปรแกรมไปทำงานที่ไหนต่อ

lbean.setLoginParms(request.getParameter("username"),
request.getParameter("password") );

loginStatus = lbean.authenticate();

และในส่วนต่อมา เป็นการรับค่า User และ Password ที่ส่งมาจาก Login.html และทำการตรวจสอบ User/Password ที่รับมาถูกต้องหรือไม่

if (loginStatus.equals("true")){

nextPage="welcome.jsp";

session.putValue("MYUSER", lbean.getUsername());

session.putValue("MYEMAIL", lbean.getEmail());

session.putValue("ISLOGGEDIN", "true");

}

ถ้าค่าที่ Return กลับมาถูกต้อง โปรแกรมจะส่งการทำงานไปให้ Welcome.jsp ต่อ และทำการ Set ค่า MYUSER, MYEMAIL โดยไป Get ค่าจากค่าปัจจุบันที่เก็บไว้ใน HashTable

<jsp:forward page="<%= nextPage %>" />

สุดท้าย ทำการ Forward page ไปที่ nextPage

4.loginBean.java

เป็นโปรแกรมที่ Handle เกี่ยวกับข้อมูล คือคอยรับข้อมูลมา แล้วทำการ Authenticate แล้วก็ส่งข้อมูลออกไป

Hashtable user01 = new Hashtable();

ขั้นแรกเป็นการกำหนดตัวแปร HashTable ก่อน

โปรแกรมนี้จะประกอบไปด้วย Function หลายๆ Function

public loginBean() {

user01.put("teddy",new userClass("teddy","welcome","teddy@exzilla.net"));

user01.put("archer",new userClass("archer","welcome","archer@exzilla.net"));

user01.put("spidix",new userClass("spidix","welcome","spidix@yahoo.com"));

user01.put("kouprex",new userClass("kouprex","welcome","kouprex@yahoo.com"));

}

ในส่วนของ Construction ของ loginBean จะ Initial ข้อมูล User/Password เก็บไว้ใน HashTable โดยใช้ชื่อ User เป็น Index ในตัวอย่างเป็นการเก็บ hashTable ของ Object userClass

public String getUsername(){

return username;

}

public String getPassword(){

return password;

}

public String getEmail(){

return email;

}

สร้าง Method ทั้ง 3 Methods เพื่อเป็นการ Return Attribute ปัจจุบัน ของ loginBean

public void setLoginParms(String p_username,String p_password){

username=p_username;

password=p_password;

}

ใน Method setLoginParms เป็นการกำหนด Attribute (username, password) ของ loginBean ตามข้อมูลที่ได้จากการ login

public String authenticate(){

String myReturn="";

String myPassword="";

String myUsername="";

userClass mm = (package3.userClass)user01.get(this.username);

Method นี้จัดเป็น Method หลักในการตรวจสอบ Authenticate โดยเริ่มจากการ Get ข้อมูลที่อยู่ใน HashTable โดยส่ง Parameter คือ this.username ซึ่งเป็นชื่อ User ที่ Login เข้ามา

if ( mm != null ){

myUsername=mm.getUserName();

myPassword=mm.getPassWord();

this.email=mm.getEmail();

}

เมื่อได้ข้อมูลจาก HashTable ก็จะนำข้อมูล (ซึ่งเป็น Object เก็บไว้ใน HashTable) มาเก็บไว้ในตัวแปร

if (this.username.equals(myUsername) && this.password.equals(myPassword)) {

myReturn="true";

}else{

myReturn="false";

}

return myReturn;

ทำการตรวจสอบค่า User/Password ที่ได้จาก HashTable กับค่า User/Password ที่รับมาว่า ตรงกันหรือไม่ จากนั้นก็ Return ค่า True/False ออกไป

5.memberPage01.jsp

เป็นการยกตัวอย่าง กรณีที่ Web site ของคุณต้องการอนุญาตเฉพาะ User ที่ Login เข้ามาเท่านั้น จึงจะสามารถเข้ามาดูข้อมูลภายใน Web site ได้ โดยเพียงแค่ Include file member_zone.inc

<%@ include file="member_zone.inc" %>

6.userClass.java

เป็น Structure ในการเก็บข้อมูล ซึ่งตัวอย่างนี้ เราจะเก็บเฉพาะ User, Password และ E-Mail เท่านั้น

public class userClass {

String userName="";

String passWord="";

String email="";

public userClass(){

}

public userClass(String usernameParm,String passwordParm,String emailParm) {

userName=usernameParm;

passWord=passwordParm;

email=emailParm;

}

public void setUserName(String username){

}

public String getUserName(){

return userName;

}

public String getPassWord(){

return passWord;

}

public String getEmail(){

return email;

}

UserClass นี้จะใช้ร่วมกับ HashTable ที่อยู่ใน LoginBean.Java

== Included file ==

8.loginedin.inc

// Check to see if logged in already.

String loggedin = (String) session.getValue("ISLOGGEDIN");

if ( loggedin == null )

{

loggedin = "false";

session.putValue("ISLOGGEDIN", loggedin);

}

String myuser = (String) session.getValue("MYUSER");

if ( myuser == null )

{

myuser="Guest";

session.putValue("MYUSER", myuser);

}

ทำหน้าที่ตรวจสอบ Status ของ User ที่ใช้งานอยู่ ณ ขณะนี้ ว่าได้ผ่านการ Login มาแล้วหรือยัง โดยทำงานผ่านตัวแปร Session

9.header.inc

เป็นส่วนแสดง Logo และปุ่ม Sign in/Sign out

<td><font face="Verdana, Arial, Helvetica, sans-serif" size="2"> <b>Exzilla.net</b>

-- e-Development QuickStart -- </font></td>

| <a href="

if(loggedin.equals("true")){

out.println("signout.jsp");

}else{

out.println("login.html");

}

"> <%

if(loggedin.equals("true")){

out.println("Sign out");

}else{

out.println("Sign in");

}

%> </a> </font> </td>

</tr>

ซึ่งส่วนการ Sign in/Sign out จะขึ้นอยู่กับ Status ของ User คือ ถ้า User ได้ Login เข้ามา จะแสดง Sign out แต่ถ้ายังไม่ได้ Login จะแสดง Sign in แทน

<tr>

</font></td>

</tr>

</table>

ส่วนท้ายของ File จะเป็นการ Greeting ตามชื่อของ User แต่ถ้ายังไม่มีการ Login จะแสดงเป็น Guest แทน

10.footer.inc

แสดงส่วนท้ายของ Web page ซึ่งประกอบด้วย Static Data และ Dynamic Data

Static data คือ Copyright และ Contact person

<font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>
<font color="#000099">Contact <a href="mailto:webmaster@exzilla.net">
webmaster@exzilla.net</a></font></b>

<align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">

<font color="#000099" face="Verdana, Arial, Helvetica, sans-serif" size="2">
Copyright (c) 2001 - exzilla.net - </font></font></b>

Dynamic data คือ เป็นการแสดง File encoding ที่ Web server ใช้อยู่ ณ ขณะที่ใช้งาน

out.println("File Encoding : " + System.getProperty("file.encoding"));

11.member_zone.inc

เพื่อนำไปใช้ใน Web page ที่อนุญาตเฉพาะสมาชิกที่ Login แล้วเท่านั้น ที่สามารถดูข้อมูลได้ โดยมีหลักการว่า ถ้า User ที่ยังไม่ผ่านการ Login เข้ามา จะให้กลับไป Login ก่อน

String myloggedin = (String) session.getValue("ISLOGGEDIN");

if ( myloggedin.equals("false") )

{

response.sendRedirect("login.html");

}

Setting up the tomcat Servlet Engine and install the application.

หลังจากพัฒนาโปรแกรมทั้งหมด ซึ่งเป็น File JSP, HTML และ JavaBean เรียบร้อยแล้ว ก็ถึงขั้นตอนการ Deploy Application ไปยัง Web Server ที่ Support JSP ซึ่งถ้าคุณเลือกที่จะ Deploy บน Tomcat สามารถดูรายละเอียดเพิ่มเติมได้ที่ TOMCAT HOME\doc\appdev ซึ่งจะมี Document ที่อธิบายการ Deploy ไว้ให้

Summary

บทความนี้เป็นตัวอย่างง่ายในการสร้าง JSP Application ซึ่งมีการ Protect ข้อมูลให้เฉพาะสมาชิกที่ Login เข้ามาแล้วเท่านั้น จากตัวอย่างนี้ สามารถนำไปพัฒนาต่อ ในส่วนของการ Register User และการจัดเก็บข้อมูลลง Database ได้ดีกว่านี้

Download

ตัวอย่าง Sample Code ที่สมบรูณ์
Oracle Jdevelper -- http://otn.oracle.com
Jakarta Tomcat -- http://jakarta.apache.org

{exzilla.net -- e-development QuickStart --}

Articles | Files | Discussion Forums | Projects

Contact Us | Privacy Policy | Terms & Conditions