본문 바로가기
공부/[Project] J2P

[J2P] 회원가입 기능

by 맴썰 2022. 3. 14.
CREATE TABLE User(
	ID varchar(20) PRIMARY KEY,
	Password varchar(1000) NOT NULL,
	Name varchar(20)
);

회원의 table 구조이다. 간단하게 ID, password, 이름으로 구성되어 있고 추후에 비밀번호 찾기 및 변경을 위한 속성을 추가할 예정이다. 

import lombok.Builder;
import lombok.Data;

@Data
@Builder
public class User {
	String ID;
	String Password;
	String Name;
}

User의 VO이다. lombok을 이용해서 getter, setter 및 생성자를 자동으로 관리해주도록 하였다. 

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import com.Jim2Pack.main.VO.User;

@Repository
@Mapper
public interface UserMapper {
	public void SignUp(User user);
	public User GetUser(String ID);
	public User SignIn(String ID, String Password);
}

User의 CRUD를 관리하는 Mapper이다. 회원가입에서는 GetUser와 SignUp이 사용된다.

<?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="com.Jim2Pack.main.Mappers.UserMapper">
    <insert id = "SignUp" parameterType = "User">
    	INSERT INTO USER(ID, Password, Name) 
    	VALUES(#{ID},HEX(AES_ENCRYPT(#{Password},'J2P')),#{Name})
    </insert>
    <select id = "GetUser" parameterType = "String" resultType = "User">
    	Select * from User Where ID = #{ID}
    </select>
    <select id = "SignIn" parameterType = "String" resultType = "User">
    	Select * from User Where ID = #{ID} AND Password = HEX(AES_ENCRYPT(#{Password},'J2P'))
    </select>
</mapper>

 

UserMapper와 연결된 Mapper.xml이다. 메소드 명과 ID가 일치해야 실행이 된다. parameterType을 설정하기 전에 Mybatis-config.xml에서 type-alias를 해주어야 정상적으로 인식한다. 회원가입이나 로그인 시 비밀번호를 AES를 이용해 암호화하여 DB에 저장하도록 구현했다. 

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

import com.Jim2Pack.main.Mappers.UserMapper;
import com.Jim2Pack.main.VO.User;

@Service
public class UserSignUpService {
	@Autowired
	private UserMapper usermapper;

	public void signup(User user) {
		usermapper.SignUp(user);
	}
}

Mapper의 SignUp 기능을 가진 Service 클래스이다. Usermapper에 객체를 주입하고 usermapper의 signup함수를 실행시킨다.

 

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

import com.Jim2Pack.main.Mappers.UserMapper;
import com.Jim2Pack.main.VO.User;

@Service
public class GetUserService {
	@Autowired
	UserMapper usermapper;
	
	public int getUser(String ID) {
		User user = usermapper.GetUser(ID);
		if(user == null) {
			return 1;
		}
		else {
			return 0;
		}
	}
}

getUser 함수를 가진 서비스이다. 매개변수로 받은 ID와 일치하는 User를 찾고 없으면 1을 return하고, 있으면 0을 return하도록 구현하였다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ include file="header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP Title</title>
<link rel="stylesheet" href="/resources/css/Loginmain.css">
<link rel="stylesheet" href="/resources/css/Loginutil.css">
<script src="/resources/js/Loginmain.js"></script>
</head>
<body>
	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100">
				<form class="login100-form validate-form" method = "post">
					<span class="login100-form-title p-b-26">
						Sign Up
					</span>
					<span class="login100-form-title p-b-48">
						<i class="zmdi zmdi-font"></i>
					</span>
					<div class="wrap-input100 validate-input" >
						<input class="input100" type="text" name="Name" autocomplete="off">
						<span class="focus-input100" data-placeholder="Name"></span>
					</div>
					<div class="wrap-input100 validate-input" >
						<input class="input100" type="text" name="ID" autocomplete="off">
						<span class="focus-input100" data-placeholder="ID"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="Enter password">
						<span class="btn-show-pass">
							<i class="zmdi zmdi-eye"></i>
						</span>
						<input class="input100" type="password" name="Password">
						<span class="focus-input100" data-placeholder="Password"></span>
					</div>
					<div class="wrap-input100 validate-input" data-validate="Enter password">
						<span class="btn-show-pass">
							<i class="zmdi zmdi-eye"></i>
						</span>
						<input class="input100" type="password" name="checkPass">
						<span class="focus-input100" data-placeholder="Check Password"></span>
					</div>

					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button class="login100-form-btn">
								Create
							</button>
						</div>
					</div>

					
				</form>
			</div>
		</div>
	</div>
<%@ include file="footer.jsp"%>
</body>
</html>

이름과 ID, 비밀번호와 비밀번호 확인을 입력하고 POST 형식으로 정보를 Controller로 보내도록 작성하였다. 

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 com.Jim2Pack.main.Service.GetUserService;
import com.Jim2Pack.main.Service.UserSignUpService;
import com.Jim2Pack.main.VO.User;
import com.Jim2Pack.main.config.Message;

@Controller
public class UserSignUpController {
	@Autowired
	UserSignUpService sus;
	@Autowired
	GetUserService gus;
	
	@RequestMapping(value = "/SignUp" , method = {RequestMethod.GET})
	public String view(Model model) {
		String result = "SignUp";
			return result;
	}
	
	@RequestMapping(value = "/SignUp" , method = {RequestMethod.POST})
	public String SignUp(User user, Model model, String checkPass) {
		String url = "Alert";
		int num = gus.getUser(user.getID());
		if(num==1) {
			if(!user.getPassword().equals(checkPass)) {
				Message msg = Message.builder().message("비밀번호 확인이 일치하지 않습니다.").url("/SignUp").build();
				model.addAttribute("mess", msg);
			}
			else{
				sus.signup(user);
				Message msg = Message.builder().message("회원가입이 완료되었습니다.").url("/").build();
				model.addAttribute("mess", msg);
			}
		}
		else{
			Message msg = Message.builder().message("중복된 아이디가 존재합니다.").url("/SignUp").build();
			model.addAttribute("mess", msg);
			
		}
		return url;
	}
	
}

상기한 2개의 서비스 클래스에 객체를 주입하고, Get 형식의 request에는 view name을 return하도록 하고, Post 형식, 즉 회원가입 form이 넘어온 경우는 먼저 넘어온 ID와 일치하는 ID가 있는지 확인하고, 없으면 비밀번호와 비밀번호 확인이 일치하는지 확인한 후, 일치하면 회원가입을 수행한다. 

import lombok.Builder;
import lombok.Data;

@Data
@Builder
public class Message {
	String message;
	String url;
}

 

Controller 단에서 Alert를 띄우기 위해 작성한 Message 클래스이다.

위의 각 Case(회원가입 성공, 비밀번호 확인 불일치, 중복 아이디 존재)마다 메세지와 URL을 다르게 하여 객체를 생성하고 해당 객체를 model 객체에 저장한 후 Alert.jsp로 이동하도록 작성하였다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP Title</title>
</head>
<body>
		<script>
			top.alert("${mess.message}");
			top.location.href = '${mess.url}';
		</script>
</body>
</html>

Alert.jsp에서는 model 객체로부터 넘어온 메세지를 출력한 후 넘어온 URL로 이동한다.

 

회원가입 화면