본문 바로가기
강의 정리/JSP & Servlet (Seoul Wiz)

21. 회원 인증 프로그래밍

악덕뮤지션 2019. 8. 20.

1. 개요

전체 흐름도

 

 

 

2. DB 테이블 생성

 

 

members 테이블 생성 SQL문

 

members 테이블의 스키마

 

 

 

3. 기능 구현

1) 메인 페이지

- 로그아웃 상태일 경우 로그인 페이지로 이동한다

- 로그인 상태일 경우 회원의 이름과 함께 환영 문구를 띄우고, 로그아웃 버튼과 정보수정 버튼을 표시한다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	if(session.getAttribute("ValidMem") == null) {
%>
	<jsp:forward page="login.jsp"></jsp:forward> <!-- 로그아웃 상태라면 로그인 페이지로 이동 -->
<%
	}
	// 세션에서 정보를 받아와 변수에 저장
	String name = (String)session.getAttribute("name");
	String id = (String)session.getAttribute("id");
%>	
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 화면</title>
</head>
<body>
	<h1><%= name %>님 안녕하세요.</h1><br /> <!-- 로그인한 회원 이름 표시 -->
	<form action="logout.jsp" method="post"> <!-- 로그아웃 버튼과 정보수정 버튼 클릭시 동작 -->
		<input type="submit" value="로그아웃">&nbsp;&nbsp;&nbsp;<input type="button" value="정보수정" onclick="javascript:window.location='modify.jsp'">
	</form>
</body>
</html>

로그인 후에 메인페이지를 볼 수 있다

 

 

 

2) 커넥션 풀

- DAO와 DTO 기능을 모듈화 하여 분리해둔다

 

 

① MemberDAO.java

package com.javalec.memberDAO;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;


public class MemberDAO {
	
	
		// True/False로 사용할 0/1 값을  static final 변수에 저장하여 코드 가독성을 높임
		public static final int MEMBER_NONEXISTENT = 0;
		public static final int MEMBER_EXISTENT = 1;
		public static final int MEMBER_JOIN_FAIL = 0;
		public static final int MEMBER_JOIN_SUCCESS = 1;
		public static final int MEMBER_LOGIN_PW_NO_GOOD = 0;
		public static final int MEMBER_LOGIN_SUCCESS = 1;
		public static final int MEMBER_LOGIN_IS_NOT = -1;
		
		private static MemberDAO instance = new MemberDAO();
		
		private MemberDAO() {			
		}
		
		public static MemberDAO getInstance() {
			return instance;
		}
		
		
		
		
		
		// 입력받은 회원 정보를 DB에 저장
		public int insertMember(MemberDTO dto) {
			int ri = 0;
			
			Connection con = null;
			PreparedStatement pstmt = null;
			String query = "insert into members values (?,?,?,?,?,?)";
			
			try {
				con = getConnection();
				pstmt = con.prepareStatement(query);
				pstmt.setString(1, dto.getId());
				pstmt.setString(2, dto.getPw());
				pstmt.setString(3, dto.getName());
				pstmt.setString(4, dto.geteMail());
				pstmt.setTimestamp(5, dto.getrDate());
				pstmt.setString(6, dto.getAddress());
				pstmt.executeUpdate();
				ri = MemberDAO.MEMBER_JOIN_SUCCESS;		
				
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				try {
					if(pstmt != null) pstmt.close();
					if(con != null) con.close();
				} catch (Exception e2) {
					e2.printStackTrace();
				}
			}
			
			return ri;
			
		}
		
		
		
		
		
		
		// 아이디 중복 확인
		public int confirmId(String Id) {
			int ri = 0;
			
			Connection con = null;
			PreparedStatement pstmt = null;
			ResultSet rs = null;
			String query = "select Id from members where Id = ?";
			
			try {
				con = getConnection();
				pstmt = con.prepareStatement(query);
				pstmt.setString(1, Id);
				rs = pstmt.executeQuery();
				
				if (rs.next()) {
					ri = MemberDAO.MEMBER_EXISTENT;
				} else {
					ri = MemberDAO.MEMBER_NONEXISTENT;
				}
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				try {
					rs.close();
					pstmt.close();
					con.close();
				} catch (Exception e2) {
					e2.printStackTrace();
				}
			}
			
			return ri;
		}
		
		
		
		
		
		
		// 로그인 시도시 아이디 비번 체크
		public int userCheck (String id, String pw) {
			int ri  = 0;
			String dbPw;
			
			Connection con = null;
			PreparedStatement pstmt = null;
			ResultSet rs = null;
			
			String query = "select pw from members where id = ?";
			
			try {
				con = getConnection();
				pstmt = con.prepareStatement(query);
				pstmt.setString(1, id);
				rs = pstmt.executeQuery();
				
				if (rs.next()) {
					dbPw = rs.getString("pw");
					if (dbPw.equals(pw)) {
						ri = MemberDAO.MEMBER_LOGIN_SUCCESS; // 로그인 성공						
					} else {
						ri = MemberDAO.MEMBER_LOGIN_PW_NO_GOOD; // 비밀번호 오류
					}
				} else {
					ri = MemberDAO.MEMBER_LOGIN_IS_NOT; // 가입된 회원이 아님
				}
			} catch (Exception e) {
				e.printStackTrace();
			}finally {
				try {
					rs.close();
					pstmt.close();
					con.close();
				} catch (Exception e2) {
					e2.printStackTrace();
				}
			}
			
			return ri;
		}
		
		
		
		
		
		
		// 회원정보를 DTO객체에 저장
		public MemberDTO getMember(String id) {
			Connection con = null;
			PreparedStatement pstmt = null;
			ResultSet rs = null;
			String query = "select * from members where id = ?";
			MemberDTO dto = null;
			
			try {
				con = getConnection();
				pstmt = con.prepareStatement(query);
				pstmt.setString(1, id);
				rs = pstmt.executeQuery();
				
				if (rs.next()) {
					dto = new MemberDTO();
					dto.setId(rs.getString("id"));
					dto.setPw(rs.getString("pw"));
					dto.setName(rs.getString("name"));
					dto.seteMail(rs.getString("eMail"));
					dto.setrDate(rs.getTimestamp("rDate"));
					dto.setAddress(rs.getString("address"));					
				}
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				try {
					rs.close();
					pstmt.close();
					con.close();
				} catch (Exception e2) {
					e2.printStackTrace();
				}				
			} 
			
			return dto;
		}
		
		
		
		
		
		// 회원정보 수정
		public int updateMember(MemberDTO dto) {
			int ri = 0;
			
			Connection con = null;
			PreparedStatement pstmt = null;
			String query = "update members set pw=?, eMail=?, address=? where id=?";
			
			try {
				con = getConnection();
				pstmt = con.prepareStatement(query);
				pstmt.setString(1, dto.getPw());
				pstmt.setString(2, dto.geteMail());
				pstmt.setString(3, dto.getAddress());
				pstmt.setString(4, dto.getId());
				ri = pstmt.executeUpdate();
				
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				try {
					pstmt.close();
					con.close();
				} catch (Exception e2) {
					e2.printStackTrace();
				}
			}			
			
			return ri;		
			
		}
		
		
		
		
		
		// 연결 설정
		private Connection getConnection() {
			Context context = null;
			DataSource dataSource = null;
			Connection con = null;
			
			try {
				context = new InitialContext();
				dataSource = (DataSource)context.lookup("java:comp/env/jdbc/Oracle11g");
				con = dataSource.getConnection();
			} catch (Exception e) {
				e.printStackTrace();
			}
			
			return con;
		}
}

 

 

 

 

② MemberDTO.java

package com.javalec.memberDAO;

import java.sql.Timestamp;

public class MemberDTO {

		private String id;
		private String pw;
		private String name;
		private String eMail;
		private Timestamp rDate;
		private String address;
		
//		public MemberDTO(String id, String pw, String name, String eMail, Timestamp rDate, String address) {
//			this.id = id;
//			this.pw = pw;
//			this.name = name;
//			this.eMail = eMail;
//			this.rDate = rDate;
//			this.address = address;
//			
//		}

		public String getId() {
			return id;
		}

		public void setId(String id) {
			this.id = id;
		}

		public String getPw() {
			return pw;
		}

		public void setPw(String pw) {
			this.pw = pw;
		}

		public String getName() {
			return name;
		}

		public void setName(String name) {
			this.name = name;
		}

		public String geteMail() {
			return eMail;
		}

		public void seteMail(String eMail) {
			this.eMail = eMail;
		}

		public Timestamp getrDate() {
			return rDate;
		}

		public void setrDate(Timestamp rDate) {
			this.rDate = rDate;
		}

		public String getAddress() {
			return address;
		}

		public void setAddress(String address) {
			this.address = address;
		}
		
}

 

 

 

 

3) 로그인/로그아웃 기능

 

① login.jsp 

 - 로그인 폼 화면

 - 이미 로그인 된 상태라면 메인화면으로 이동한다

 - 회원가입 직후에는 세션에서 아이디를 불러와서 폼에 자동 입력하여 편의성을 더해준다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% if(session.getAttribute("ValidMem") != null)  { %> <!-- 이미 로그인된 상태면 메인화면으로 이동 -->
	<jsp:forward page="main.jsp"></jsp:forward>   
<% } %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
	<form action="loginOK.jsp" method="post"> <!-- 세션이 존재하면 세션의 아이디를 불러와서 출력 -->
		아이디 : <input type="text" name="id" value="<% if(session.getAttribute("id") != null) out.println(session.getAttribute("id")); %>"><br />
		비밀번호 : <input type="password" name="pw"><br />
		<input type="submit" value="로그인"> &nbsp;&nbsp; <input type="button" value="회원가입" onclick="javascript:window.location='join.jsp'">
	</form>
</body>
</html>

로그인 폼

 

 

 

② loginOK.jsp

 - DB에 저장된 회원정보와 입력받은 아이디/비밀번호 값을 비교하여 로그인 기능 처리

<%@page import="com.javalec.memberDAO.MemberDTO"%>
<%@page import="com.javalec.memberDAO.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// 한글 인코딩
	request.setCharacterEncoding("UTF-8");

	// 넘어온 아이디와 비번 값 변수에 저장
	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	
	// DAO 인스턴스 생성
	MemberDAO dao = MemberDAO.getInstance();
	int checkNum = dao.userCheck(id, pw);
	
	// 체크 결과에 따라 안내 메세지 출력
	if (checkNum == -1) { 
%>    
		<script language="javascript">
			alert("존재하지 않는 아이디입니다.")
			history.go(-1);
		</script>
<%
	} else if(checkNum == 0) {
%>		
		<script language="javascript">
			alert("비밀번호가 틀립니다.");
			history.go(-1);
		</script>
<%
	} else if(checkNum == 1) {
		MemberDTO dto = dao.getMember(id);
		
		if(dto == null) {	
%>
		<script language="javascript">
			alert("존재하지 않는 회원입니다.");
			history.go(-1);
		</script>
<%
		} else { // 로그인 성공시 세션 값 설정
			String name = dto.getName();
			session.setAttribute("id", id);
			session.setAttribute("name", name);
			session.setAttribute("ValidMem", "yes");
			response.sendRedirect("main.jsp");
		}
	}
%>	
		
		
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

로그인에 성공한 모습

 

 

 

③ logout.jsp

 - 로그아웃 버튼 클릭시 세션을 종료하고 로그인 페이지로 이동

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	session.invalidate(); /* 세션 종료 */
	response.sendRedirect("login.jsp"); /* 세션 종료 후 login.jsp 페이지로 이동 */
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

로그아웃 버튼은 메인페이지에 있다

 

 

 

 

 

4) 회원가입 기능

 

① member.js

- 회원가입 및 정보수정시 입력값을 체크하는 함수를 가지고 있는 자바스크립트 파일

/**
 * 
 */

function infoConfirm() { // 회원가입시 입력한 정보 체크
	// document는 현재페이지(join.jsp), reg_frm은 폼이름, id는 input이름, value는 입력받은 값, length로 공백 체크
	if(document.reg_frm.id.value.length == 0) { 
		alert("아이디를 입력해주세요."); // 알림 팝업
		reg_frm.id.focus(); // 해당 입력칸에 커서 위치시키기
		return;
	}
	
	if(document.reg_frm.id.value.length < 4) {
		alert("아이디는 4글자 이상이어야 합니다.");
		reg_frm.id.focus();
		return;
	}
	
	if(document.reg_frm.pw.value.length == 0) {
		alert("비밀번호를 입력해주세요.");
		reg_frm.pw.focus();
		return;
	}
	
	if(document.reg_frm.pw.value != document.reg_frm.pw_check.value) {
		alert("비밀번호가 일치하지 않습니다.");
		reg_frm.pw_check.focus();
		return;
	}
	
	if(document.reg_frm.name.value.length == 0) {
		alert("이름을 입력해주세요.");
		reg_frm.name.focus();
		return;
	}
	
	if(document.reg_frm.eMail.value.length == 0) {
		alert("메일을 입력해주세요.");
		reg_frm.eMail.focus();
		return;
	}
	
	if(document.reg_frm.address.value.length == 0) {
		alert("주소를 입력해주세요.");
		reg_frm.address.focus();
		return;
	}
	
	document.reg_frm.submit(); // 모든 체크 메소드를 다 통과하면 최종적으로 submit
	
}


// 회원정보 수정시 입력한 정보 체크
function updateInfoConfirm() { 
	if(document.reg_frm.pw.value == "") { // document는 modify.jsp
		alert("비밀번호를 입력하세요.");
		document.reg_frm.pw.focus();
		return;
	}
	
	if(document.reg_frm.pw.value != document.reg_frm.pw_check.value) {
		alert("비밀번호가 일치하지 않습니다.");
		document.reg_frm.pw_check.focus();
		return;
	}
	
	if(document.reg_frm.eMail.value.length == 0) {
		alert("메일을 입력해주세요.");
		reg_frm.eMail.focus();
		return;
	}
	
	if(document.reg_frm.address.value.length == 0) {
		alert("주소를 입력해주세요.");
		reg_frm.address.focus();
		return;
	}
	
	document.reg_frm.submit();
}

 

 

② join.jsp

 - 회원가입 입력 폼 페이지

 - member.js 안에 있는 infoConfirm() 메소드를 통과한 경우에만 joinOK.jsp 파일로 전송한다

 - 취소를 클릭하면 로그인 페이지로 돌아간다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<script language="JavaScript" src="members.js"></script> <!-- 자바스크립트 파일 지정  -->
</head>
<body> <!-- members.js파일 안에 있는 infoConfirm() 메소드를 통과해야 회원가입 완료 -->
	<form action="joinOK.jsp" method="post" name="reg_frm">
		아이디 : <input type="text" name="id" size="20"><br />
		비밀번호 : <input type="password" name="pw" size="20"><br />
		비밀번호 확인 : <input type="password" name="pw_check" size="20"><br />		
		이름 : <input type="text" name="name" size="20"><br />
		메일 : <input type="text" name="eMail" size="20"><br />
		주소 : <input type="text" name="address" size="50"><br />
		<input type="button" value="회원가입" onclick="infoConfirm()">&nbsp;&nbsp;&nbsp; <input type="reset" value="취소" onclick="javascript:window.location='login.jsp'">		
	</form>
</body>
</html>

회원가입 폼

 

 

 

 

③ joinOK.jsp

 - 회원가입 시도 결과를 처리한다

 - 결과에 따라 회원가입 입력 폼 페이지로 돌아가거나 로그인 페이지로 이동한다

<%@page import="com.javalec.memberDAO.*"%>
<%@page import="java.sql.Timestamp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %> <!-- 한글 인코딩 -->
<jsp:useBean id="dto" class="com.javalec.memberDAO.MemberDTO" /> <!-- 액션태그로 자바 빈 사용 -->
<jsp:setProperty name="dto" property="*" /> 
<!-- form의 각 input태그의 name속성과 bean(DTO)의 getter&setter의 이름이 일치하면 *를 사용하여 form에서 입력한 내용을 자동채우기 할 수 있다 -->
<!-- 그렇지 않으면 모든 값을 다 수동으로 넣어주어야 한다 -->
<%
	dto.setrDate(new Timestamp(System.currentTimeMillis()));
	MemberDAO dao = MemberDAO.getInstance();
	if(dao.confirmId(dto.getId()) == MemberDAO.MEMBER_EXISTENT) {
%>
	<script language="javascript">
		alert("이미 존재하는 아이디입니다.");
		history.back();
	</script>
<%
	} else {
		int ri = dao.insertMember(dto);
		if (ri == MemberDAO.MEMBER_JOIN_SUCCESS) {
			session.setAttribute("id", dto.getId());
%>
		<script language="javascript">
			alert("회원가입을 축하합니다!")
			document.location.href="login.jsp";
		</script>
<%	
		} else {
%>
		<script language="javascript">
			alert("회원가입에 실패했습니다.");
			document.location.href="login.jsp";
		</script>
<%	
		}
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

회원가입 정보 입력

 

회원가입에 성공한 모습

 

 

 

 

 

5) 회원정보 수정 기능

① modify.jsp

 - 세션에서 로그인 중인 사용자 정보를 가져와 폼에 자동입력해준다

 - 아이디와 이름은 수정할 수 없다

 - 비밀번호도 변경이 가능하다

 - member.js 파일에 있는 updateInfoConfirm() 메소드를 통과한 경우에만 modifyOK.jsp 파일로 전송한다 

<%@page import="com.javalec.memberDAO.MemberDTO"%>
<%@page import="com.javalec.memberDAO.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<% /* 세션에서 현재 로그인 중인 사용자 정보 가져오기 */
	String id = (String)session.getAttribute("id");
	MemberDAO dao = MemberDAO.getInstance();
	MemberDTO dto = dao.getMember(id);
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 수정 페이지</title>
<script language="JavaScript" src="members.js"></script> <!-- 자바스크립트 파일  -->
</head>
<body>
	<!-- 회원정보 수정폼  -->
	<form action="modifyOK.jsp" method="post" name="reg_frm">
		아이디 : <%= dto.getId() %><br />
		비밀번호 : <input type="password" name="pw" size="20"><br />
		비밀번호 확인 : <input type="password" name="pw_check" size="20"><br />
		이름 : <%= dto.getName() %><br />
		메일 : <input type="text" name="eMail" size="20" value="<%= dto.geteMail() %>"><br />
		주소 : <input type="text" name="address" size="50" value="<%= dto.getAddress() %>"><br />
		<input type="button" value="수정" onclick="updateInfoConfirm()"> &nbsp;&nbsp;&nbsp; <input type="reset" value="취소" onclick="javascript:window.location='login.jsp'">
	</form>
</body>
</html>

회원정보 수정 폼

 

 

 

② modifyOK.jsp

 - 정보 수정 성공시 메인 페이지로 이동한다

 - 정보 수정 실패시 정보 수정 페이지로 돌아간다

<%@page import="com.javalec.memberDAO.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>

<jsp:useBean id="dto" class="com.javalec.memberDAO.MemberDTO" scope="page" />
<jsp:setProperty property="*" name="dto"/>

<%
	String id = (String)session.getAttribute("id");
	dto.setId(id);
	
	MemberDAO dao = MemberDAO.getInstance();
	int ri = dao.updateMember(dto);
	
	if(ri == 1) {
%>    
	<script language="javascript">
		alert("회원정보가 수정되었습니다.");
		document.location.href="main.jsp";
	</script>
<%
	} else {
%>	
	<script language="javascript">
		alert("회원정보 수정에 실패했습니다.");
		history.go(-1);
	</script>
<%
	}
%>	
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

회원정보가 수정된 모습

 

 

'강의 정리 > JSP & Servlet (Seoul Wiz)' 카테고리의 다른 글

20. 커넥션 풀  (0) 2019.08.19
19. Oracle 데이버 베이스 (3)  (0) 2019.08.14
18. Oracle 데이터 베이스 2  (0) 2019.08.14
17. Oracle 데이터 베이스 1  (0) 2019.08.14
16. JAVA Bean  (0) 2019.08.14

'강의 정리/JSP & Servlet (Seoul Wiz)' 관련글

티스토리툴바