MyWeb

이메일에 인증번호를 전송

 

let code = ''; //이메일 전송 인증번호 저장을 위한 변수

//아이디 중복 체크

$('#idCheckBtn').click(function(){

if($('#userId').val() === ''){

alert('아이디는 필수값입니다.');

return;

}

});

 

아이디값을 받아와서 비동기 통신을 통해 서버와 통신하고 중복되었다면 '중복된 아이디입니다.',

아니라면 '사용 가능한 아이디입니다' 라고 화면에 띄울 것입니다.

attr()를 이용해서 readonly 속성을 true를 주어서 작성하지 못하도록 합니다.

 

const userId = $('#userId').val();

$.ajax({

type: 'post',

url: '<c:url value="/user/idCheck" />'

data: userId,

contentType: 'application/json',

success: function(data){

$('#userId').attr('readonly', true);

$('#msgid').html('사용 가능한 아이디입니다.');

} else{

$('#msgid').html('중복된 아이디입니다.');

}

},

error: function(){

alert('서버 에러입니다. 관리자에게 문의하세요.');

}

 

}); //중복 비동기 통신 종료

 

 

});// 중복 버튼 이벤트 처리 종료

controller에 입력

//이메일 인증

@GetMapping("/mailCheck")

@ResponseBody

public String mailCheck(String email) {

System.out.println("이메일 인증 요청이 들어왔습니다.");

System.out.println("인증 이메일: " + email);

return mailService.joinEmail(email);

}

 

그리고 mailSendService.java를 만들어서,

인증번호를 보내는 메서드를 작성해 줍니다.

 

인증번호는 난수를 발생시킵니다.

 

public void makeRandomNumber() {

//난수의 범위: 111111 ~ 999999

Random r = new Random();

int checkNum = r.nextInt(888888) + 111111;

System.out.println("인증번호: " + checkNum);

authNum = checkNum;

}

 

//회원 가입 시 사용할 이메일 양식

public String joinEmail(String email) {

makeRandomNumber();

String setFrom = "가나다라@gmail.com"; //email-config에 설정한 자신의 이메일 주소를 입력.

String toMail = email; //수신받을 이메일

String title = "회원 가입 인증 이메일 입니다."; //이메일 제목

String content = "홈페이지를 방문해주셔서 감사합니다." +

"<br><br>" +

"인증 번호는 " + authNum + "입니다." +

"<br>" +

"해당 인증번호를 인증번호 확인란에 기입하여 주세요."; //이메일 내용 삽입

mailSend(setFrom, toMail, title, content);

return Integer.toString(authNum);

}

 

인증번호 이메일 전송 script

 

//인증번호 이메일 전송

$('#mail-check-btn').click(function() {

const email = $('#userEmail1').val() + $('#userEmail2').val();

console.log('완성된 이메일: ' + email);

const checkInput = $('.mail-check-input'); //인증번호 입력하는 곳.

 

$.ajax({

type: 'get',

url: '<c:url value="/user/mailCheck?email=" />' + email,

success: function(data) {

console.log('data: ' + data);

checkInput.attr('disabled', false);

code = data;

alert('인증번호가 전송되었습니다. 확인 후 입력란에 정확히 입력하세요!');

}

}); //end ajax (이메일 전송)

}); // 이메일 전송 끝.

 

controller로 옮겨서

 

//이메일 전송 메서드

public void mailSend(String setFrom, String toMail, String title, String Content) {

try {

MimeMessage message = mailSender.createMimeMessage();

//true 매개값을 전달하면 MultiPart 형식의 메세지 전달이 가능. 문자 인코딩 설정도 가능.

MimeMessageHelper helper = new MimeMessageHelper(message, true, "utf-8");

helper.setFrom(setFrom);

helper.setTo(toMail);

helper.setSubject(title);

//true전달 -> html형식으로 전송, 작성하지 않으면 단순 텍스트로 전달.

helper.setText(Content, true);

mailSender.send(message);

 

} catch (Exception e) {

e.printStackTrace();

}

}

 

보낸 인증번호와 받은 인증번호가 동일한지 점검합니다.

 

//인증번호 비교

//blur -> focus가 벗어나는 경우 발생.

$('.mail-check-input').blur(function){

const inputCode = $(this).val();

const $resultMsg = $('#mail-check-warn');

 

if(inputCode === code){

$resultMsg.html('인증번호가 일치합니다.');

$resultMsg.css('color', 'green');

$('#mail-check-btn').attr('disabled', true);

$('#userEmail1').attr('readonly', true);

$('#userEmail2').attr('readonly', true);

$('#userEmail2').attr('onFocus', 'this.initialSelect = this.selectedIndex');

$('#userEmail2').attr('onChange', 'this.selectedIndex = this.initialSelect');

}else{

$resultMsg.html('인증번호를 다시 확인해 주세요.');

$resultMsg.css('color', 'red');

}

});

 

 

 

회원가입 중 주소 (우편번호 고르고), 상세주소 적는 api도 작성해 봤습니다!

 

//다음 주소 api 사용해 보기.

function searchAddress() {

new daum.Postcode({

oncomplete: function(data) {

// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

// 각 주소의 노출 규칙에 따라 주소를 조합한다.

// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기합니다.

var addr = ''; // 주소 변수

var extraAddr = ''; // 참고항목 변수

//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.

if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우

addr = data.roadAddress;

} else { // 사용자가 지번 주소를 선택했을 경우(J)

addr = data.jibunAddress;

}

// 우편번호와 주소 정보를 해당 필드에 넣는다.

document.getElementById('addrZipNum').value = data.zonecode;

document.getElementById("addrBasic").value = addr;

// 커서를 상세주소 필드로 이동한다.

document.getElementById("addrDetail").focus();

}

}).open();

}