반응형
이번 포스팅에서는 회원가입 이메일 인증을 구현하는 방법을 소개하겠습니다.
그 외의 프로젝트 세팅이나 게시판 구현 등은 아래의 포스팅을 참고해주시길 바랍니다.
2021.07.05 - [Programming/Spring] - [스프링 프레임워크]게시판 만들기 #1 : 프로젝트 생성 및 셋팅
[스프링 프레임워크]게시판 만들기 #1 : 프로젝트 생성 및 셋팅
본 포스팅은 스프링 프레임워크를 이용하여 기본적인 게시판을 만드는 방법을 설명합니다. 안녕하세요. 이번 포스팅은 Spring Framework를 이용하여 게시판 만드는 방법을 설명합니다. Spring Framework
hyunipad.tistory.com
우선 제가 구현한 회원가입 폼입니다.
1인 1 아이디를 구현하기 위해서 이메일 인증을 도입했고, 다른 양식은 최대한 간단하게 구현하였습니다.
join.jsp안에 있는 default.css는 빼셔도 무방합니다. 밑에 한 줄이 default.css입니다.
button:hover {
cursor: pointer;
}1. join.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="${path}/resources/js/join.js"></script>
<link rel="stylesheet" href="${path}/resources/css/default.css">
<link rel="stylesheet" href="${path}/resources/css/join.css">
<title>filetable</title>
</head>
<body>
<div id="container" class="container">
<div class="content">
<div class="join_wrap">
<form id="join_frm">
<div class="join_title">회원가입</div>
<div class="join_box">
<input type="text" placeholder="아이디" name="id" id="id" style="margin: 0;">
<span id="id_ck" class="dpn">이미 사용중인 아이디입니다.</span>
<input type="text" placeholder="닉네임" name="nickname" id="nickname">
<span id="nickname_ck" class="dpn">이미 사용중인 닉네임입니다.</span>
<input type="password" placeholder="비밀번호" name="password" id="password">
<input type="password" placeholder="비밀번호 확인" id="password_ck">
<div class="email_auth">
<input type="text" placeholder="이메일" name="email" id="email" class="email">
<button type="button" id="email_auth_btn" class="email_auth_btn">인증번호 받기</button>
</div>
<input type="text" placeholder="인증번호 입력" id="email_auth_key">
</div>
<button type="button" id="join" class="join_btn">가입하기</button>
</form>
</div>
</div>
</div>
</body>
</html>2. join.css
@charset "UTF-8";
#container {width: 100%; height: 100%; position: relative;}
.dpn {display: none !important;}
.join_wrap {width:550px; margin: 0 auto; border: 1px solid #dadada; padding: 24px; border-radius: 5px;}
.join_title {width:100%; height:35px; font-size: 19px; font-weight: bold; padding-left: 10px; padding: 0 0 10px 10px;}
.join_box {width: 100%;}
.join_box input {width: 100%; height: 50px; border: 1px solid #dadada;padding: 17px; border-radius: 5px; margin-top: 20px;}
.join_box span {display: inline-block; color: red; font-size: 12px; padding-left: 1px; padding-top: 8px;}
.email_auth {width: 100%; margin-top: 10px;}
.email_auth input {display:inline-block; width: calc(100% - 121px); vertical-align: top; margin: 0;}
.email_auth_btn{
display: inline-block;
width: 115px;
height: 50px;
padding: 17px 0 15px;
border-radius: 6px;
border: solid 1px rgba(0,0,0,.15);
background-color: #03c75a;
color: white;
font-size: 17px;
font-weight: bold;
line-height: 1;
}
.join_btn {
display: block;
width: 100%;
padding: 17px 0 15px;
border-radius: 6px;
border: solid 1px rgba(0,0,0,.15);
background-color: #03c75a;
color: white;
font-size: 19px;
font-weight: bold;
margin-top: 20px;
}3. root-context.xml
naver 메일 설정과 SSL 보안 관련 설정을 root-context.xml에 추가합니다.
<!-- navermail설정 -->
<bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
<property name="host" value="smtp.naver.com"/> <!-- 메이서버 호스트 -->
<property name="port" value="465"/> <!-- 메이서버 포트번호 -->
<property name="username" value=""/> <!-- 자신의 이메일 아이디 -->
<property name="password" value=""/> <!-- 자신의 비밀번호 -->
<!-- 보안연결 SSL과 관련된 설정 -->
<property name="javaMailProperties">
<props>
<prop key="mail.smtp.auth">true</prop>
<prop key="mail.smtp.starttls.enable">true</prop>
<prop key="mail.smtps.checkserveridentity">true</prop>
<prop key="mail.smtps.ssl.trust">*</prop>
<prop key="mail.debug">true</prop>
<prop key="mail.smtp.socketFactory.class">javax.net.ssl.SSLSocketFactory</prop>
</props>
</property>
</bean>4. join.js
인증번호 받기 클릭 시 입력한 이메일로 인증번호가 발생하도록 구현하였습니다. 이메일이 입력되지 않았을 경우에는
경고창을 출력합니다. 메일 발송에 성공했을 시에 아래에 HomeController.java에서 만든 6자리의 인증번호를 js안에 변수(email_auth_cd)에 저장합니다. 폼에 입력한 인증번호와 js안에 저장된 인증번호가 일치하지 않으면 경고창을 출력합니다.
/**
* 회원가입 관련 처리
*/
function fn_join(){
var f = $('#join_frm');
var formData = f.serialize();
$.ajax({
type : "POST",
url : "/join",
data : formData,
success: function(data){
if(data == "Y"){
alert("회원가입이 완료되었습니다.");
location.href="/"
}else{
alert("회원가입에 실패하였습니다.");
}
},
error: function(data){
alert("회원가입 에러 발생!");
console.log(data);
}
});
}
$(function() {
var email_auth_cd = '';
$('#join').click(function(){
if($('#id').val() == ""){
alert("아이디를 입력해주세요.");
return false;
}
if($('#nickname').val() == ""){
alert("닉네임을 입력해주세요.");
return false;
}
if($('#password').val() == ""){
alert("비밀번호를 입력해주세요.");
return false;
}
if($('#password').val() != $('#password_ck').val()){
alert("비밀번호가 일치하지 않습니다.");
return false;
}
if($('#email_auth_key').val() != email_auth_cd){
alert("인증번호가 일치하지 않습니다.");
return false;
}
fn_join();
});
$(".email_auth_btn").click(function(){
var email = $('#email').val();
if(email == ''){
alert("이메일을 입력해주세요.");
return false;
}
$.ajax({
type : "POST",
url : "/emailAuth",
data : {email : email},
success: function(data){
alert("인증번호가 발송되었습니다.");
email_auth_cd = data;
},
error: function(data){
alert("메일 발송에 실패했습니다.");
}
});
});
$('#id').focusout(function(){
var id = $('#id').val();
$.ajax({
type : "POST",
url : "/idCheck",
data : {id : id},
success: function(data){
console.log(data);
if(data == "Y"){
$('#id_ck').removeClass("dpn");
}else{
$('#id_ck').addClass("dpn");
}
},
error: function(data){
}
});
});
$('#nickname').focusout(function(){
var nickname = $('#nickname').val();
$.ajax({
type : "POST",
url : "/nicknameCheck",
data : {nickname : nickname},
success: function(data){
if(data == "Y"){
$('#nickname_ck').removeClass("dpn");
}else{
$('#nickname_ck').addClass("dpn");
}
},
error: function(data){
}
});
});
});5. HomeCotroller.java
Math.random을 사용하여 6자리의 숫자를 만들어서 인증번호를 부여합니다.
setFrom에는 대표 이메일을 입력해주시면 됩니다.
@ResponseBody
@RequestMapping(value = "/emailAuth", method = RequestMethod.POST)
public String emailAuth(String email) {
Random random = new Random();
int checkNum = random.nextInt(888888) + 111111;
/* 이메일 보내기 */
String setFrom = "자신의 이메일을 입력해주세요";
String toMail = email;
String title = "회원가입 인증 이메일 입니다.";
String content =
"홈페이지를 방문해주셔서 감사합니다." +
"<br><br>" +
"인증 번호는 " + checkNum + "입니다." +
"<br>" +
"해당 인증번호를 인증번호 확인란에 기입하여 주세요.";
try {
MimeMessage message = mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true, "utf-8");
helper.setFrom(setFrom);
helper.setTo(toMail);
helper.setSubject(title);
helper.setText(content,true);
mailSender.send(message);
}catch(Exception e) {
e.printStackTrace();
}
return Integer.toString(checkNum);
}
6. 테스트
만약 2차 인증을 사용하시는 사용자는 2차 인증에 들어가서 애플리케이션 비밀번호를 설정하고 그 비밀번호를 사용하셔야 합니다.
반응형
'Programming > Spring' 카테고리의 다른 글
| [스프링 부트] Spring Data JPA로 Oauth2 카카오 로그인 구현하기 (3) | 2022.09.14 |
|---|---|
| [스프링 프레임워크]게시판 만들기 #7 : 로그인 (0) | 2021.12.05 |
| [스프링 프레임워크]게시판 만들기 #6 : 게시글 수정, 게시글 삭제 (9) | 2021.10.23 |
| [스프링 프레임워크]게시판 만들기 #4-1 : 게시글 등록(수정) (0) | 2021.10.23 |
| [스프링 프레임워크]게시판 만들기 #5 : 게시글 조회 (7) | 2021.10.23 |
댓글