스프링 프레임워크 - 로그인 하기(아이디 찾기, 비밀번호 찾기)

로그인 페이지 만들고 회원가입을 했으니깐

로그인을 해봐야한다.

jamesyleather.tistory.com/392

로그인 페이지 만들기

jamesyleather.tistory.com/395

회원가입 페이지 만들기 - 1

jamesyleather.tistory.com/396

회원가입 페이지 만들기 - 2

 

로그인과 아이디찾기 비밀번호 찾기에 필요한 SQL을 Mapper 파일에 작성한다.

 

<User-mapping.xml>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="UserDAO">
	
	<!-- 로그인시 아이디와 비밀번호 확인 -->
	<select id="loginUser" resultType="user">
		select * from users where id=#{id} and pwd=#{pwd}
	</select>
	
	<select id="findId" resultType="user">
		select * from users where name=#{name} and phone=#{phone}
	</select>
	
	<select id="findPassword" resultType="user">
		select * from users where id=#{id} and name=#{name} and phone=#{phone}
	</select>
	
	<update id="updatePassword">
		update users set pwd=#{pwd} where id=#{id}
	</update>
	
</mapper>

id="loginUser"

로그인할 때 아이디와 비밀번호를 확인한다.

 

id="findId"

아이디 찾기 할 때 이름과 전화번호로 아이디를 조회한다.

 

id="findPassword"

비밀번호 찾기할 때 아이디와 이름과 전화번호로 비밀번호를 조회한다.

 

id="updatePassword"

비밀번호를 찾고 비밀번호를 수정한다.

 

그리고 resultType을 설정해야한다.

 

<sql-map-config.xml>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<properties resource="config/database.properties"/>
	<typeAliases>
		<typeAlias type="com.portfolio.biz.user.dto.UserVO" alias="user"/>
	</typeAliases>
	
	<mappers>
		<mapper resource="mappings/user-mapping.xml"/>
	</mappers>
</configuration>

 

sql-map-config.xml 파일은 mapping파일에서 조회한 데이터를 저장하기 위해 resultType을 설정해주는 곳이다.

User데이터를 받아오기 위해 저장해둘 UserVO라는 공간을 user라는 이름으로 resultType 설정한다.

 

<UserDAO.java>

package com.portfolio.biz.user.impl;

import java.util.*;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.portfolio.biz.user.dto.UserVO;
import com.portfolio.biz.utils.Criteria;

@Repository
public class UserDAO {

	@Autowired
	private SqlSessionTemplate mybatis;

	public UserVO loginUser(UserVO vo) {
		System.out.println("==> Mybatis로 loginUser() 기능 처리");
		return mybatis.selectOne("UserDAO.loginUser", vo);
	}

	public UserVO findId(UserVO vo) {
		System.out.println("==> Mybatis로 findId() 기능 처리");
		return mybatis.selectOne("UserDAO.findId", vo);
	}

	public UserVO findPassword(UserVO vo) {
		System.out.println("==> Mybatis로 findPassword() 기능 처리");
		return mybatis.selectOne("UserDAO.findPassword", vo);
	}

	public void updatePassword(UserVO vo) {
		System.out.println("==> Mybatis로 updatePassword() 기능 처리");
		mybatis.update("UserDAO.updatePassword", vo);
	}
}

 

<UserService.java>

package com.portfolio.biz.user;

import java.util.List;

import com.portfolio.biz.user.dto.UserVO;
import com.portfolio.biz.utils.Criteria;

public interface UserService {

	UserVO loginUser(UserVO vo);
	
	UserVO findId(UserVO vo);
	
	UserVO findPassword(UserVO vo);
	
	void updatePassword(UserVO vo);

}

 

<UserServiceImple..java>

package com.portfolio.biz.user.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.portfolio.biz.user.UserService;
import com.portfolio.biz.user.dto.UserVO;
import com.portfolio.biz.utils.Criteria;

@Service("userService")
public class UserServiceImpl implements UserService{

	@Autowired
	private UserDAO userDAO;

	@Override
	public UserVO loginUser(UserVO vo) {
		return userDAO.loginUser(vo);
	}

	@Override
	public UserVO findId(UserVO vo) {
		return userDAO.findId(vo);
	}

	@Override
	public UserVO findPassword(UserVO vo) {
		return userDAO.findPassword(vo);
	}

	@Override
	public void updatePassword(UserVO vo) {
		userDAO.updatePassword(vo);
	}
}

 

위에서 작성한 메소드들을 가지고

컨트롤러에서 뷰로 넘겨준다.

<UserController.java>

package com.portfolio.view.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.bind.support.SessionStatus;

import com.portfolio.biz.employee.dto.AdminVO;
import com.portfolio.biz.user.UserService;
import com.portfolio.biz.user.dto.UserVO;
import com.portfolio.biz.utils.Criteria;
import com.portfolio.biz.utils.PageMaker;

@Controller
@SessionAttributes("loginUser")
public class UserController {

	@Autowired
	private UserService userService;
	
    // 로그인 시도
	@RequestMapping(value="/login", method=RequestMethod.POST)
	public String loginAction(UserVO vo, Model model) {
		UserVO loginUser = userService.loginUser(vo);
		
		if(loginUser == null) {
			model.addAttribute("check", 1);
			model.addAttribute("message", "아이디와 비밀번호를 확인해주세요.");
			return "member/login";
		}else {
			model.addAttribute("loginUser", loginUser);
			return "redirect:index";
		}
	}
	
    // 아이디 찾기 페이지 이동
	@RequestMapping(value="find_id_form")
	public String findIdView() {
		return "member/findId";
	}
	
    // 아이디 찾기 실행
	@RequestMapping(value="find_id", method=RequestMethod.POST)
	public String findIdAction(UserVO vo, Model model) {
		UserVO user = userService.findId(vo);
		
		if(user == null) { 
			model.addAttribute("check", 1);
		} else { 
			model.addAttribute("check", 0);
			model.addAttribute("id", user.getId());
		}
		
		return "member/findId";
	}
	
    // 비밀번호 찾기 페이지로 이동
	@RequestMapping(value="find_password_form")
	public String findPasswordView() {
		return "member/findPassword";
	}
	
    // 비밀번호 찾기 실행
	@RequestMapping(value="find_password", method=RequestMethod.POST)
	public String findPasswordAction(UserVO vo, Model model) {
		UserVO user = userService.findPassword(vo);
		
		if(user == null) { 
			model.addAttribute("check", 1);
		} else { 
			model.addAttribute("check", 0);
			model.addAttribute("updateid", user.getId());
		}
		
		return "member/findPassword";
	}
	
    // 비밀번호 바꾸기 실행
	@RequestMapping(value="update_password", method=RequestMethod.POST)
	public String updatePasswordAction(@RequestParam(value="updateid", defaultValue="", required=false) String id,
										UserVO vo) {
		vo.setId(id);
		System.out.println(vo);
		userService.updatePassword(vo);
		return "member/findPasswordConfirm";
	}
	
    // 비밀번호 바꾸기할 경우 성공 페이지 이동
	@RequestMapping(value="check_password_view")
	public String checkPasswordForModify(HttpSession session, Model model) {
		UserVO loginUser = (UserVO) session.getAttribute("loginUser");
		
		if(loginUser == null) {
			return "member/login";
		} else {
			return "mypage/checkformodify";
		}
	}
}

 

그리고 뷰 파일을 작성한다.

 

<findId.java>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Find ID</title>
<style>
:root { -
	-input-padding-x: 1.5rem; -
	-input-padding-y: .75rem;
}

body {
	background-color: white;
}

.card-signin {
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.card-signin .card-title {
	margin-bottom: 2rem;
	font-weight: 300;
	font-size: 1.5rem;
}

.card-signin .card-body {
	padding: 2rem;
}

.form-signin {
	width: 100%;
}

.form-signin .btn {
	font-size: 80%;
	border-radius: 5rem;
	letter-spacing: .1rem;
	font-weight: bold;
	padding: 1rem;
	transition: all 0.2s;
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group input {
	height: auto;
	border-radius: 2rem;
}

.form-label-group>input, .form-label-group>label {
	padding: var(- -input-padding-y) var(- -input-padding-x);
}

.form-label-group>label {
	position: absolute;
	top: 0;
	left: 0;
	display: inline_block;
	width: 100%;
	margin-bottom: 0;
	/* Override default `<label>` margin */
	line-height: 1.5;
	color: #495057;
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
	color: transparent;
}

.form-label-group input:-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-moz-placeholder {
	color: transparent;
}

.form-label-group input::placeholder {
	color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
	padding-top: calc(var(- -input-padding-y)+ var(- -input-padding-y)* (2/3));
	padding-bottom: calc(var(- -input-padding-y)/3);
}

.form-label-group input:not(:placeholder-shown) ~label {
	padding-top: calc(var(- -input-padding-y)/3);
	padding-bottom: calc(var(- -input-padding-y)/3);
	font-size: 12px;
	color: #777;
}
</style>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">

<!-- Bootstrap core JavaScript -->
<script src="jquery/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form method="post" class="form-signin" action="find_id" name="findform">
		<div class="form-label-group">
			<input type="text" id="name" name="name" class="form-control"/>
			<label for="name">name</label>
		</div>
		
		<div class="form-label-group">
			<input type="text" id="phone" name="phone" class="form-control"/>
			<label for="phone">phone</label>
		</div>

		<div class="form-label-group">
			<input class="btn btn-lg btn-secondary btn-block text-uppercase"
				type="submit" value="check">
		</div>

		<!-- 이름과 전화번호가 일치하지 않을 때-->
		<c:if test="${check == 1}">
			<script>
				opener.document.findform.name.value = "";
				opener.document.findform.phone.value = "";
			</script>
			<label>일치하는 정보가 존재하지 않습니다.</label>
		</c:if>

		<!-- 이름과 비밀번호가 일치하지 않을 때 -->
		<c:if test="${check == 0 }">
		<label>찾으시는 아이디는' ${id}' 입니다.</label>
		<div class="form-label-group">
				<input class="btn btn-lg btn-secondary btn-block text-uppercase"
					type="button" value="OK" onclick="closethewindow()">
			</div>
		</c:if>

	</form>
	
	<script type="text/javascript">
		function closethewindow(){
			self.close();
		}
	</script>
</body>
</html>

 

아이디 찾기 뷰파일이다. 아이디를 다 찾고다면 버튼을 눌렀을 때

창이 닫히도록 자바스크립트를 넣었다.

 

<findPassword.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Find Password</title>
<style>
:root { -
	-input-padding-x: 1.5rem; -
	-input-padding-y: .75rem;
}

body {
	background-color: white;
}

.card-signin {
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.card-signin .card-title {
	margin-bottom: 2rem;
	font-weight: 300;
	font-size: 1.5rem;
}

.card-signin .card-body {
	padding: 2rem;
}

.form-signin {
	width: 100%;
}

.form-signin .btn {
	font-size: 80%;
	border-radius: 5rem;
	letter-spacing: .1rem;
	font-weight: bold;
	padding: 1rem;
	transition: all 0.2s;
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group input {
	height: auto;
	border-radius: 2rem;
}

.form-label-group>input, .form-label-group>label {
	padding: var(- -input-padding-y) var(- -input-padding-x);
}

.form-label-group>label {
	position: absolute;
	top: 0;
	left: 0;
	display: inline_block;
	width: 100%;
	margin-bottom: 0;
	/* Override default `<label>` margin */
	line-height: 1.5;
	color: #495057;
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
	color: transparent;
}

.form-label-group input:-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-moz-placeholder {
	color: transparent;
}

.form-label-group input::placeholder {
	color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
	padding-top: calc(var(- -input-padding-y)+ var(- -input-padding-y)* (2/3));
	padding-bottom: calc(var(- -input-padding-y)/3);
}

.form-label-group input:not(:placeholder-shown) ~label {
	padding-top: calc(var(- -input-padding-y)/3);
	padding-bottom: calc(var(- -input-padding-y)/3);
	font-size: 12px;
	color: #777;
}
</style>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">

<!-- Bootstrap core JavaScript -->
<script src="jquery/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form method="post" class="form-signin" action="find_password" name="findform">
<div class="form-label-group">
			<input type="text" id="id" name="id" class="form-control"/>
			<label for="id">ID</label>
		</div>
		
		<div class="form-label-group">
			<input type="text" id="name" name="name" class="form-control"/>
			<label for="name">name</label>
		</div>
		
		<div class="form-label-group">
			<input type="text" id="phone" name="phone" class="form-control"/>
			<label for="phone">phone</label>
		</div>

		<div class="form-label-group">
			<input class="btn btn-lg btn-secondary btn-block text-uppercase"
				type="submit" value="check">
		</div>

		<!-- 정보가 일치하지 않을 때-->
		<c:if test="${check == 1}">
			<script>
			opener.document.findform.id.value = "";
				opener.document.findform.name.value = "";
				opener.document.findform.phone.value = "";
			</script>
			<label>일치하는 정보가 존재하지 않습니다.</label>
		</c:if>

		<!-- 이름과 비밀번호가 일치하지 않을 때 -->
		<c:if test="${check == 0 }">
		<div>
			<label>비밀번호를 변경해주세요.</label>
		</div>
		<div class="form-label-group">
		<input type="hidden" id="id" name="updateid" value="${updateid }">
		
			<input type="password" id="password" name="pwd" class="form-control"/>
			<label for="password">password</label>
		</div>
		
		<div class="form-label-group">
			<input type="password" id="confirmpassword" name="confirmpwd" class="form-control"/>
			<label for="confirmpassword">confirm password</label>
		</div>
		
		<div class="form-label-group">
				<input class="btn btn-lg btn-secondary btn-block text-uppercase"
					type="button" value="update password" onclick="updatePassword()">
			</div>
		</c:if>

	</form>
	
	<script type="text/javascript">
		function updatePassword(){
			if(document.findform.pwd.value==""){
				alert("비밀번호를 입력해주세요.");
				document.findform.pwd.focus();
			} else if(document.findform.pwd.value != document.findform.confirmpwd.value){
				alert("비밀번호가 일치하지 않습니다.");
				document.findform.confirmpwd.focus();
			} else {
				document.findform.action="update_password";
				document.findform.submit();
			}
		}
	</script>
</body>
</html>

 

비밀번호를 변경하기 위해 정보를 받아서 조회한다.

해당 사용자 정보가 존재할 경우 비밀변호 변경할 수 있는 부분이 노출될 수 있게 설정하였다.

 

<findPasswordConfirm.java>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
 alert("비밀번호가 변경되었습니다.");
 self.close();
</script>
</body>
</html>

비밀번호 변경이 완료되면 빈페이지로 넘어가서 변경을 실행하고

대화상자를 닫으면 창이 꺼지도록 설정한다.

변경창에서 다 해결하려고 했는데

데이터를 넘기는 방법을 몰라서 페이지를 하나 더 생성하였다.