[Spring] 회원가입 구현하기 -3

안녕하세요~! 이번에도 저번 포스팅에 이어서 회원가입 페이지를 만들도록 하겠습니다.

 

저번 포스팅에서 아이디 중복 체크까지 구현을 했으니 이어서 만들어 보겠습니다.

 

$(document).on("click", "#emailBtn", function(){
		/* 이메일 유효성 검사 조건문 */
		if(!$.trim($("#userId").val())){
			alert("아이디를 먼저 입력해 주세요.");
			return false;
		}
		if(!$.trim($("#userEmail").val())){
			$("#createEmailSpan").css("color", "red").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "235px").css("float", "left");
			$(".createEmailSpan").html("이메일을 입력하세요.").promise().done(function(){
				$(".createEmailSpan").slideDown("fast");
				$(this).effect("shake", {times:15,distance:3,direction:"up"}, 300);
			});
			return false;
		}
		if ($("#${commandName} #userEmail").val() != "") {
			var emailChecked = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; // 이메일 유효성검사
			if (!emailChecked.test($("#${commandName} #userEmail").val())) {
				$("#createEmailSpan").css("color", "red").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "235px").css("float", "left");
				$("#createEmailSpan").html("잘못된 이메일 주소입니다.").promise().done(function(){
					$(".createEmailSpan").slideDown("fast");
					$(this).effect("shake", {times:15,distance:3,direction:"up"}, 300);
				});
				return false;
			}
		}
		/* 이메일 중복 체크 비동기 처리 */
		$.ajax({
			beforeSend: function(){
				loadingBarStart();
			},
			type:"get",
			url : "<c:url value='/login/createEmailCheck.do'/>",
			data : "userEmail=" + $("#userEmail").val() + "&random=" + $("#random").val(),
			//data: "userEmail="+encodeURIComponent($('#userEmail').val()),
			/* encodeURIComponent
			예를들어, http://a.com?name=egoing&job=programmer 에서 &job=programmer 
			중 '&'는 하나의 파라미터가 끝나고 다음 파라미터가 온다는 의미이다.
			그런데 다음과 같이 job의 값에 &가 포함된다면 시스템은 job의 값을 제대로 인식할수 없게 된다. */
			success : function(data){
				if(data == true){
					$("#emailBtn").remove();
					$(".emailAuth").remove();
					$(".emailCheck").append('<span class="createEmailSpan" id="createEmailSpans"></span>');
					$("#createEmailSpan").css("color", "blue").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "290px").css("float", "left");
					$(".emailSuccess").remove();
					$("#userEmail").attr('readonly', true);
					document.getElementById("createEmailSpan").innerHTML = "사용가능한 이메일입니다. 인증번호를 확인 후 입력해주세요.";
					$(".auth").append("<label class='control-label emailAuth labelEmailAuth'>인증번호</label>" 
					+ "<input type='text' id='emailAuth' name='emailAuth' class='form-control emailAuth emailAuthInput emailCss' onKeyUp='emailAuthCheck()'/>"
					+ "<button type='button' class='btn btn-info emailAuth emailAuthBtn emailCss' id='emailAuthBtn'>인증</button>" 
					+ "<button type='button' class='btn btn-info emailAuth emailAuthBtn emailCss' id='emailReset'>이메일변경</button>"
					+ "<span class='joinSpan'>남은 시간 :</span><span class='joinTime'><em id='joinEmTime'></em></span></span>");
					joinClearTime();
					joinTimer();
				}
				if(data == false){
					$("#createEmailSpan").css("color", "red").css("font-size", "10px").css("margin-top", "5px").css("margin-left", "5px").css("width", "270px").css("float", "left");
					document.getElementById("createEmailSpan").innerHTML = "중복된 이메일이 있습니다. 다른 이메일을 사용하세요.";
				}
				
			},
			complete: function(){
				loadingBarEnd();
			},
			error: function(data){
				alert("에러가 발생했습니다.");
				return false;
			}
		})
	})
	
	/* 
	이메일 변경 버튼 클릭 이벤트
	*/
	$(document).on("click", "#emailReset", function(){
		var conf = confirm("정말로 변경하시겠습니까?");
		if(conf == true){
			alert("이메일을 다시 입력해 주세요.")
			$("#userEmail").removeAttr('readonly');
			$(".emailAuth").remove();
			removeTimer();
			$(".brSpan").remove();
			$("#createEmailSpans").remove();
			$(".auth").append('<button type="button" class="btn btn-info emailBtn" id="emailBtn">인증번호 전송</button>');
			document.getElementById("createEmailSpan").innerHTML = " ";
		}
	});
	
	/* 
	이메일 인증번호 입력 후 인증 버튼 클릭 이벤트
	*/
	$(document).on("click", "#emailAuthBtn", function(){
		
		$.ajax({
			beforeSend: function(){
				loadingBarStart();
			},
			type:"get",
			url:"<c:url value='/login/emailAuth.do'/>",
			data:"authCode=" + $('#emailAuth').val() + "&random=" + $("#random").val(),
			success:function(data){
				if(data=="complete"){
					alert("인증이 완료되었습니다.");
					$("#emailAuth").attr('readonly', true);
					$("#emailAuthBtn").attr('disabled', true);
					document.getElementById("createEmailSpan").innerHTML = "인증이 완료되었습니다.";
					removeTimer();
				}else if(data == "false"){
					alert("인증번호를 잘못 입력하셨습니다.")
				}
			},
			complete: function(){
				loadingBarEnd();
			},
			error:function(data){
				alert("에러가 발생했습니다.");
			}
		});
	});

이메일 인증을 위해 위의 스크립트를 추가해주겠습니다.

@RequestMapping(value="/createEmailCheck.do", method=RequestMethod.GET)
@ResponseBody
public boolean createEmailCheck(@RequestParam String userEmail, @RequestParam int random, HttpServletRequest req){
	//이메일 중복체크
	int cnt = -1;
	cnt = userService.createEmailCheck(userEmail);
		//이메일 인증
	int ran = new Random().nextInt(900000) + 100000;
	HttpSession session = req.getSession(true);
	String authCode = String.valueOf(ran);
	session.setAttribute("authCode", authCode);
	session.setAttribute("random", random);
	String subject = "회원가입 인증 코드 발급 안내 입니다.";
	StringBuilder sb = new StringBuilder();
	sb.append("귀하의 인증 코드는 " + authCode + "입니다.");
	if(cnt <= 0) return mailService.send(subject, sb.toString(), sendEmailId, userEmail, null);
	else return false;
}

컨트롤러도 만들어 주겠습니다. 이메일 중복 체크를 위한 로직입니다.

 

이메일 인증번호를 보내주기 위해 6자리 난수를 생성하였습니다.

 

public int createEmailCheck(String userEmail);

@Override
	public int createEmailCheck(String userEmail) {
		return userDao.createEmailCheck(userEmail);
	}

ServiceImpl, Service를 만들어줍니다.

public int createEmailCheck(String userEmail){
	return (int) selectOne(PREFIX + "createEmailCheck", userEmail);
}

DAO도 만들어 주겠습니다.

<select id="createEmailCheck" resultType="int" parameterType="String">
	SELECT COUNT(USER_EMAIL) FROM USER_INFO
		WHERE USER_EMAIL = #{value}
	
	/* com.co.kr.login.dao.createEmailCheck */
</select>

Mapper입니다.

 

@RequestMapping(value="/emailAuth.do", method=RequestMethod.GET)
	@ResponseBody
	public ResponseEntity<String> emailAuth(@RequestParam String authCode, @RequestParam String random, HttpSession session){
		String originalJoinCode = (String) session.getAttribute("authCode");
		String originalRandom = Integer.toString((int) session.getAttribute("random"));
		if(originalJoinCode.equals(authCode) && originalRandom.equals(random))
			return new ResponseEntity<String>("complete", HttpStatus.OK);
		else return new ResponseEntity<String>("false", HttpStatus.OK);
	}

다음은 이메일 인증을 위한 컨트롤러에서 로직을 만들어 주겠습니다.

 

 

 

 

 

이메일 인증을 하게 되면 이런식으로 화면이 뜨게 됩니다.

 

이메일 인증까지 완료했으니 다음 포스팅에서 회원가입을 이어나가겠습니다.