회원가입 페이지에서 이메일 인증하기1

 

만들려는 기능은 다음과 같습니다.

 

1. 이메일 입력
2. 인증번호 요청 클릭
3. tjdwns4537@naver.com 이메일에 인증번호 전송
4. 전송된 인증번호를 입력창에 입력 후 정상적으로 인증됬는지 확인

 

[ Controller ]

@PostMapping("/emailConfirm")
@ResponseBody
public void emailVerify(@RequestParam String email) throws Exception {
        log.info("post email = {}", email);
        emailService.sendSimpleMessage(email);
}

 

[ EmailService ]

package smilegate.securitySystem.service.EmailService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.MailException;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;

import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import java.util.Random;

@Service
public class EmailServiceImp implements EmailServiceInterface{

    @Autowired
    JavaMailSender emailSender;

    public static final String emailPassword = createKey();

    public EmailServiceImp(JavaMailSender emailSender) {
        this.emailSender = emailSender;
    }

    public String getEmailPassword() {
        return emailPassword;
    }

    public static String createKey() {
        StringBuffer key = new StringBuffer();
        Random rnd = new Random();

        for (int i = 0; i < 8; i++) { // 인증코드 8자리
            int index = rnd.nextInt(3); // 0~2 까지 랜덤

            switch (index) {
                case 0:
                    key.append((char) ((int) (rnd.nextInt(26)) + 97));
                    //  a~z  (ex. 1+97=98 => (char)98 = 'b')
                    break;
                case 1:
                    key.append((char) ((int) (rnd.nextInt(26)) + 65));
                    //  A~Z
                    break;
                case 2:
                    key.append((rnd.nextInt(10)));
                    // 0~9
                    break;
            }
        }
        return key.toString();
    }

    @Override
    public String sendSimpleMessage(String to)throws Exception {
        // TODO Auto-generated method stub
        MimeMessage message = createMessage(to);
        try{//예외처리
            emailSender.send(message);
        }catch(MailException es){
            es.printStackTrace();
            throw new IllegalArgumentException();
        }
        return emailPassword;
    }

    private MimeMessage createMessage(String to)throws Exception{
        System.out.println("보내는 대상 : "+ to);
        System.out.println("인증 번호 : "+ emailPassword);
        MimeMessage message = emailSender.createMimeMessage();

        message.addRecipients(MimeMessage.RecipientType.TO, to);//보내는 대상
        message.setSubject("회원가입 이메일 인증");//제목

        String msgg="";
        msgg+= "<div style='margin:100px;'>";
        msgg+= "<h1> 안녕하세요 Sungjun 입니다. </h1>";
        msgg+= "<br>";
        msgg+= "<p>아래 코드를 회원가입 창으로 돌아가 입력해주세요<p>";
        msgg+= "<br>";
        msgg+= "<p>감사합니다!<p>";
        msgg+= "<br>";
        msgg+= "<div align='center' style='border:1px solid black; font-family:verdana';>";
        msgg+= "<h3 style='color:blue;'>회원가입 인증 코드입니다.</h3>";
        msgg+= "<div style='font-size:130%'>";
        msgg+= "CODE : <strong>";
        msgg+= emailPassword+"</strong><div><br/> ";
        msgg+= "</div>";
        message.setText(msgg, "utf-8", "html");//내용
        message.setFrom(new InternetAddress("kktd4537@gmail.com","SungJun"));//보내는 사람

        return message;
    }
}

 

[ Form 태그 ]

 

<form th:action="@{/member/emailConfirm}" method="post">
            <div>
                <h3 class="join_title"><label for="email">이메일</label></h3>
                <span class="box int_email">
                        <input type="text" name="email" id="email"
                               class="form-control" maxlength="100">
                    </span>
            </div>

            <button type="submit"
                    id="email-btn"> 인증번호 요청
            </button>
        </form>

        <div>
            <h3 class="join_title">인증 번호</h3>
            <input type="text" name="email-check" id="email-check" class="form-control" maxlength="100" placeholder="인증번호 입력">
        </div>

 

메일은 정상적으로 보내지는게 확인이 되지만

위의 코드에서 문제점이 있습니다.

 

코드를 보면 Form action 태그를 통해 member/emailConfirm 으로 url 을 요청하기 때문입니다.

 

그렇다고 회원가입 페이지인 member/join 에 다시 보내게 된다면 어떻게 될까요?

email 인증이 아닌 회원가입 버튼의 주소가 member/join 으로 되있기 때문에 PostMapping 메서드 두 개가

서로 같은 곳을 경로를 바라보게 됩니다.

 

그래서 생각한 해결방안은 다음과 같습니다.

 

[ 해결방안1 ]

1) 인증번호 요청 버튼 클릭

2) 자바스크립트를 이용해 팝업창 생성

3) 팝업창에서 인증번호에 대한 검증을 진행

4) 검증이 정상적으로 완료된다면 회원가입 페이지에 검증 완료 메세지 전송

 

[ 해결방안2 ]

1) 인증번호 요청 버튼 클릭

2) RestController 에 구현한 다른 PostMapping 메서드를 호출

3) 해당 메서드에서 검증기능 구현 후 검증이 완료 된다면 회원가입 페이지에 검증 완료 메세지 전송

 

사실 해결방안1에 대한 설계는 머릿속에 바로 들어오지만,

해결방안2에 대한 구조는 저도 어떻게해야 할지 잘 생각이 나지 않습니다.

 

그래서 해결방안1에 대해 먼저 진행해보도록 하겠습니다.