Spring Boot 이메일 인증(2) - 실제 메일 보내기

먼저 의존성을 추가해 줍니다.

maven에서 Spring Boot Starter Mail 의존성을 추가합니다.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

application.properties에 다음과 같이 설정을 추가해줍니다.

# SMTP(Simple Mail Transfer Protocol) 제공자 호스트 및 포트
spring.mail.host = smtp.gmail.com
spring.mail.port = 587
spring.mail.username= #본인 이메일 주소
spring.mail.password= 본인 구글 계정 앱 비밀번호
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true

※ 구글 계정 비밀 번호가 아닌 앱 비밀번호입니다. 보안 설정에서 앱 비밀번호를 새롭게 받아서 입력해줍니다.!!!!!

 

이전 글에서 emailAuth 테이블에 값을 저장해둔 상태입니다.

입력한 이메일로 code를 보내서 사용자가 인증번호를 입력할 수 있도록 하기 위해서 context를 사용해서 html파일에 코드를 넣어서 보내줍니다.

        Context context = new Context();
        //Service에서 html파일에 접근하기 위해서 Context를 사용한다.
        //thymeleaf를 사용하기 위해서 context를 사용
        context.setVariable("code", emailAuth.getCode());

        //template에 만들어둔 email html파일 경로
        String text = this.templateEngine.process("member/registerEmailAuth", context);
        MimeMessage mail = this.mailSender.createMimeMessage();
        MimeMessageHelper helper = new MimeMessageHelper(mail, "UTF-8");
        helper.setFrom("wjscdksqls@gmail.com");
        helper.setTo(user.getEmail());
        helper.setSubject("[스터디] 회원가입 인증 번호");
        helper.setText(text , true);
        this.mailSender.send(mail);


        return CommonResult.SUCCESS;
}

registerEmailAuth.html 파일에서 code를 받아오는 구문입니다.

<code style="..." th:text="${code}"> " code " </code>

 

이메일 전송 버튼을 눌렀을 경우의 js입니다.

 

 

form['emailSend'].addEventListener('click', () => {
    EmailWarning.hide();
	
    // 이메일을 입력하지 않았을 경우입니다.
    if (form['email'].value === '') {
        EmailWarning.show('이메일 주소를 입력해주세요.');
        form['email'].focus();
        return;
    }
		// 정규식을 통한 이메일 확인입니다.
    if (!new RegExp('^(?=.{7,50})([\\da-zA-Z_.]{4,})@([\\da-z\\-]{2,}\\.)?([\\da-z\\-]{2,})\\.([a-z]{2,10})(\\.[a-z]{2})?$').test(form['email'].value)) {
        EmailWarning.show('올바른 이메일 주소를 입력해 주세요.');
        form['email'].focus();
        return;
    }

    Cover.show('인증번호를 전송하고 있습니다. \n\n 잠시만 기다려 주세요.');
    const xhr = new XMLHttpRequest();

    const formData = new FormData();
    formData.append('email', form['email'].value);
    // (1.해당 Controller의 ReuestParam or
    //매개변수에 있는 멤버변수의 이름과 동일하게사용.
    // 2.전송하고자하는 데이터가 속해있는 태그의 name )
    xhr.open('POST', './email');
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            Cover.hide();
            if (xhr.status >= 200 && xhr.status < 300) {
                //status 가 200~ 299 까지는 성공 300~500 모종의 이유로 실패
                //http error code  참고
                //responseText 은 String 이다. ->>
                //{"result":"success","salt":"7d6417..."}
                //JSON.parse를 통해서 문자열을 object로 만들어준다.
                
                const responseObject = JSON.parse(xhr.responseText);
                
                switch (responseObject['result']) {
                    case 'success':
                        EmailWarning.show('인증번호를 전송하였습니다. 전송된 인증 번호는 5분간만 유요합니다.');
                        form['email'].setAttribute('disabled', 'disabled');
                        form['emailSend'].setAttribute('disabled', 'disabled');
                        form['emailAuthCode'].removeAttribute('disabled');
                        form['emailAuthCode'].focus();
                        form['emailAuthSalt'].value = responseObject['salt'];
                        form['emailVerify'].removeAttribute('disabled');
                        break;
                        //이메일이 정상적으로 전송되었다면 이메일 입력창과 버튼을 비활성화합니다.
                    case 'email_duplicated':
                        EmailWarning.show('해당 이메일은 이미 사용 중입니다.')
                        form['email'].focus();
                        form['email'].select();
                        break;
						//입력한 이메일이 중복 일 경우입니다.
                    default:
                        EmailWarning.show('알 수 없는 이유로 인증번호를 전송하지 못하였습니다. 잠시 후 다시 시도해 주세요.');
                        form['email'].focus();
                        form['email'].select();
                }

            } else {
                EmailWarning.show('서버와 통신하지 못하였습니다. 잠시후 다시 시도해주세요.');
                alert('실패하였습니다.');
            }
        }
    };
    xhr.send(formData);
});