스프링 & AJAX를 활용한 실시간 메일 인증

저번 시간에는 스프링 메일 라이브러리를 활용해서 네이버 및 구글 메일 인증 절차를 확인했다. 

 

이번에는 회원가입에서 어떻게 메일을 실시간으로 인증할 것인지 알아보겠다. 

예시

자 다음과 같이 회원 가입 폼이 있다. 

위에서 본인 네이버 이메일을 입력하고 인정번호 버튼을 누르면 ex) chltmdgh517 @naver.com

위와 같이 해당 메일에 인증 코드가 날라온다.  

 

그럼 위 두 사진을 비교하듯이 인증 코드가 일치하면 오른쪽! 일치하지 않으면 왼쪽 화면이 뜬다!! 

 

이제 코드로 가보자

 

코드

필자는 고민을 했다... 전통적인 폼 제출해서 넘기는 방식으로는 회원가입 실시간 이메일 인증을 구현 못할1거라고... 

구글링 해본결과 AJAX를 활용해서 실시간으로 인증할 수 있다고 한다!! 한번 그 코드를 직접 알려주겠다. 

 

본인 프로젝트 구조에 맞게 생성하세요!! 필자는 중요코드만 알려드립니다!! 

@PostMapping("/join-email")
@ResponseBody
public String postJoinEmail(@RequestParam("email") String email) throws Exception {
  log.info(email);
    String code = mailService.sendSimpleMessage(email);
    return code;
}

 

일단 mailController 안에 위와 같이 메서드를 넣었다.

 

@RequestParam을 해서 받은 email을 저번시간과 동일하게 sendSimpleMessage로 넘겨서 이메일 인증 메시지를 보내고 해당 인증번호를 code 변수에 담아서 return 해준다.

 

자!! 그럼 여기서 고민이 있을것이다. 저 /join-email url을 누가 호출해줄 것인가??? 정답은 AJAX 이다!

<button type="button" class="btn btn-primary ml-2 email-btn" id="checkEmail"
        name="checkEmail"
        style="position: absolute; margin-left: 200px; background-color: #aa9bec">
    인증번호
</button>

 

아까 위에서 봤던 인증번호 버튼이다. 이 Html 코드에 Id를 기억해두자!

<div class="input-group form-group" style="position: relative;" >
    <label for="memailconfirm" id="memailconfirmTxt"
           style="position: absolute;  top: 17px; left: 10px;
                    font-size: 10px; color: red">인증번호 입력해주세요</label>
    <input type="text" class="form-control"
           id="memailconfirm"
           placeholder="인증번호를 입력해주세요"
           maxlength="8"
           style=" margin-top: 30px;"
           required>

</div>

 

이 코드도 위에서 봤던 인증번호 입력칸이다. Id를 잘기억해두자!

 

<script>
    var $memailconfirm = $("#memailconfirm");
    var $memailconfirmTxt = $("#memailconfirmTxt");
    var emconfirmchk = false; // 이메일 인증번호 확인 여부를 나타내는 변수

    $(document).ready(function () {
        // 이메일 인증번호
        $("#checkEmail").click(function () {
            $.ajax({
                type: "POST",
                url: "/join-email",
                data: {
                    "email": $("#emailF").val() + "@" + $("#emailType").val()
                },
                success: function (data) {
                    alert("해당 이메일로 인증번호 발송이 완료되었습니다. \n 확인부탁드립니다.")
                    console.log("data : "+data);
                    chkEmailConfirm(data, $memailconfirm, $memailconfirmTxt);
                }
            })
        });
    });

    // 이메일 인증번호 체크 함수
    function chkEmailConfirm(data, $memailconfirm, $memailconfirmTxt) {
        $memailconfirm.on("keyup", function () {
            if (data !== $memailconfirm.val()) { //
                emconfirmchk = false;
                $memailconfirmTxt.html("<span id='emconfirmchk'>인증번호가 잘못되었습니다</span>")
                $("#emconfirmchk").css({
                    "color": "#FA3E3E",
                    "font-weight": "bold",
                    "font-size": "10px"
                })
            } else { // 아니면 중복아님
                emconfirmchk = true;
                $memailconfirmTxt.html("<span id='emconfirmchk'>인증번호 확인 완료</span>")
                $("#emconfirmchk").css({
                    "color": "#0D6EFD",
                    "font-weight": "bold",
                    "font-size": "10px"
                })
            }
        })
    }
    // 회원가입 버튼 클릭 이벤트
    $("#registerButton").click(function () {
        if (!emconfirmchk) {
            alert("인증번호를 확인해주세요.");
            return false; // 폼 제출 방지
        }
        // 여기서 추가적인 회원가입 처리 로직 수행
    });

</script>

 

여기가 핵심 코드이다!! 전체코드이고!! 차근차근 보자

 

var $memailconfirm = $("#memailconfirm");
var $memailconfirmTxt = $("#memailconfirmTxt");
var emconfirmchk = false; // 이메일 인증번호 확인 여부를 나타내는 변수

 

변수를 선언해줘야지 오류가 안뜬다. 

 

$(document).ready(function () {
    // 이메일 인증번호
    $("#checkEmail").click(function () {
        $.ajax({
            type: "POST",
            url: "/join-email",
            data: {
                "email": $("#emailF").val() + "@" + $("#emailType").val()
            },
            success: function (data) {
                alert("해당 이메일로 인증번호 발송이 완료되었습니다. \n 확인부탁드립니다.")
                console.log("data : "+data);
                chkEmailConfirm(data, $memailconfirm, $memailconfirmTxt);
            }
        })
    });
});

 

여기서 인증번호 버튼(Id: checkEmail)를 클릭하면 /join-email로 Post로 제출한다. 그럼 아까봤던 자바 코드로 이동하면서 메일이 보내지는 것이다. 

 

이때 data를 유심해서 봐야되는게 이 data는 자바코드에서 본 @RequestParm으로 가는 String email 이다. 

필자는 프로젝트 특성상 select 태그가 있어 위와 같이 2개의 값을 합친거다.

(그래서 여러분들 프로젝트에 맞게 설정해주세요!!

email로 그냥 입력하나면 "email" : $(#email).val() 하면 될듯?)

 

그 후 반환된 data 즉 인증 코드는 chkEmailConfirm을 호출하게 된다. 

// 이메일 인증번호 체크 함수
function chkEmailConfirm(data, $memailconfirm, $memailconfirmTxt) {
    $memailconfirm.on("keyup", function () {
        if (data !== $memailconfirm.val()) { //
            emconfirmchk = false;
            $memailconfirmTxt.html("<span id='emconfirmchk'>인증번호가 잘못되었습니다</span>")
            $("#emconfirmchk").css({
                "color": "#FA3E3E",
                "font-weight": "bold",
                "font-size": "10px"
            })
        } else { // 아니면 중복아님
            emconfirmchk = true;
            $memailconfirmTxt.html("<span id='emconfirmchk'>인증번호 확인 완료</span>")
            $("#emconfirmchk").css({
                "color": "#0D6EFD",
                "font-weight": "bold",
                "font-size": "10px"
            })
        }
    })
}

 

이 코드에서  사용자가 입력한 인증번호 값이 정답 인증번호랑 일치한지 일치하지 않은지 판단해주는 함수이다.

 

// 회원가입 버튼 클릭 이벤트
$("#registerButton").click(function () {
    if (!emconfirmchk) {
        alert("인증번호를 확인해주세요.");
        return false; // 폼 제출 방지
    }
    // 여기서 추가적인 회원가입 처리 로직 수행
});

 

 이거는 뭐 간단하니깐 생략.... 

 

 

 

 

이로써 실시간 이메일 인증 기능을 도입해서 신원이 불분명한 회원을 가입시키는것을 막을 수 있다!!!

 

 

 

안되시는거있으면 물어봐주세요!!! 적극적으로 도와드릴게요!!