[스프링 부트] JPA 쇼핑몰 # 5.메일 인증

 

 

회원가입시 메일을 통한 보인 인증 구현

 

 

들어가며

일반적으로 회원가입을 하려면 본인 인증을 해야한다. 휴대폰을 통한 보인인증이 일반적이나, 토이프로젝트에서 사용하기에는 비용이 발생하는 만큼 이메일을 통한 본인인증을 구현할 예정입니다.

---

 

기본성정

메일을 보내기위해서는 smtp 설정을 해야한다. 저는 naver메일을 사용할 예정이기 때문에 google을 사용하려면 다른 글을 참고 해주시기 바랍니다.

 

• 네이버 메일로 들어가 환경설정부분에서 POP3/IMAP설정을 사용함으로 설정해야 이메일을 보낼수있다.

 

 

build.gradle

implementation 'org.springframework.boot:spring-boot-starter-mail'
annotationProcessor "org.springframework.boot:spring-boot-configuration-processor"

메일을 사용하기 위해서는 메일관련 의존성을 추가해야며, Configurationd에서 yml을 사용하기위해서 의존성을 추가한다

.

application.yml

  mail:
    host: smtp.naver.com
    username: 네이버아이디
    password: 네이버 비밀번호
    properties:
      mail.transport.protocol: smtp
      mail.smtp.auth: true
      mail.smtp.starttls.enable: true
      mail.debug: true
      mail.smtp.ssl.trust: smtp.naver.com
      mail.smtp.ssl.enable: true

yml에 이메일 을 사용하기 위해서 위에 코드를 추가한다.

---

 

Configuration

메일을 사용하기위한 설정 파일을 만들어야한다. web하위에 /Configuration파일을 생성후에 메일 설정을 위한 MailConfig.Class을 생성한다. 

 

MailConfig

@Configuration
@ConfigurationProperties(prefix = "spring.mail")
@Getter@Setter
public class MailConfig {

    private String host;
    private String username;
    private String password;
    private Properties properties;

    @Bean
    public JavaMailSender javaMailSender(){
        JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
        mailSender.setHost(host);
        mailSender.setPort(465);
        mailSender.setUsername(username);
        mailSender.setPassword(password);
        mailSender.setJavaMailProperties(properties);

        return mailSender;
    }
}

• @ConfigurationProperties(prefix = "spring.mail") : application.yml에서 spring.mail로 시작하는 설정을만을 사용함

 

---

 

MailService

 

web/service에 /mail 폴더를 생성하고 MailService를 인터페이스로 생성한다. 

MailService

public interface MailService {

    MimeMessage CreateMessage(String to) throws Exception;

    String sendSimpleMessage(String to) throws  Exception;

    public String createKey();
}

• MimeMessage CreateMessage(String to) : 메일에 해당하는 내용을 작성하는 메소드
• Stringg sendSimpleMessage(String to) : 메일을 보내기위한 메소드
• public String createKey() : 인증번호를 생성하기 위한 메소드

 

인터페이스로 생성한이유는 아이디 찾기나 비밀번호 찾기를 할때에도 메일을 통해서 인증할예정이라 메일 내용을 다르게 하기위해서 인터페이스로 생성했다.

 

 

JoinMailServiceImpl

@Service
@Transactional
@RequiredArgsConstructor
public class JoinMailServiceImpl implements MailService {

    private final JavaMailSender mailSender;

    private String code;


    @Override
    public MimeMessage CreateMessage(String to) throws MessagingException, UnsupportedEncodingException {
        MimeMessage message = mailSender.createMimeMessage();

        message.addRecipients(RecipientType.TO, to); //보내는 대상
        message.setSubject("회원가입 인증번호");

        String msgg="";
        msgg += "<div style='margin:100px'>";
        msgg += "<h1> 안녕하세요</h1>";
        msgg += "<h1> 책방 입니다.";
        msgg += "<p> 아래의 코드를 입력란에다가 작성해주기시 바랍니다.<p>";
        msgg += "<h3 style='color:red;'>회원가입 인증 코드입니다.</h3>";
        msgg += "<div style='font-size:130%'>";
        msgg += "CODE : <strong>";
        msgg += code + "</strong><div><br/> "; //
        msgg += "</div>";


        message.setText(msgg,"utf-8","html");
        message.setFrom(new InternetAddress("네이버 이메일주소", "보내는 사용자이름"));

        return message;
    }

    @Override
    public String sendSimpleMessage(String to) throws Exception {
        code = createKey();
        MimeMessage message = CreateMessage(to);
        try {
            mailSender.send(message);
        }catch (MailException e){
            e.printStackTrace();
            throw new IllegalStateException();
        }
        return code;
    }

    @Override
    public String createKey() {
        Random random = new Random();
        int key = 100000+ random.nextInt(900000);

        return String.valueOf(key);
    }
}

회원 가입시 메일인증을 통해서 보인 인증을 할 수 있게하기 위해서 mailService를 상속한 클래스를 생성한다.

• String createKey() : 임의 6자리의 난수를 생성한다.

 

---

 

MemberController

AJAX를 통해서 실시간으로 인증코드를 확인하는 API를 만들것이다. mailService를 사용하기 위해서 JoinMailServiceImpl추가한다.

 

private final JoinMailServiceImpl joinMailService;

 

mailConfirm

@PostMapping("/join/mailConfirm")
    @ResponseBody
    public String mailConfirm(@RequestParam("email") String email)throws Exception{
        String code = joinMailService.sendSimpleMessage(email);
        System.out.println("인증코드 : "+code);
        return code;
    }
}

6자리의 임의의 난수를 반환한다. 이메일로 항상 확인하는 번거로움을 줄이기위해서 IDE에 code의 값을 나오도록 했다.

 

 

html

전에 개발했던 join.html의 email 부분을 수정을 했습니다. 

join.html

<div class="form-group">
	<label th:for="email">이메일 입력해주세요</label>
	<input type="text" th:field="*{email}" class="form-control"
		th:class="${#fields.hasErrors('email')} ? 'form-control field-error' : 'form-control field-group'" id="email">
	<button class="btn" type="button" onclick="checkEmail()">인증번호</button>
		<div class="invalid-feedback" th:if="${#fields.hasErrors('email')}">
			<small th:class="text-danger" th:errors="*{email}"></small>
		</div>
</div>

<div class="form-group">
	<label for="emailConfirm">인증번호를 입력해 주세요</label>
	<input type="text" class="form-control" id="emailConfirm">
		<div class="invalid-feedback" id="emailCode">
			<small th:class="text-danger" th:errors="*{email}"></small>
		</div>
</div>

 

.이제는 인증번호를 버튼을 클릭하면 인증번호가 전송되도록 해보겠습니다. 그러면 script를 사용해서 이메일전송시에 인증번호를 보내는 알람을 뜨게하며 인증번호를 실시간으로 일치하는지 구현해보도록하겠습니다.

 

script

<script>
        function checkEmail() {
            var email = $('#email').val();
            $.ajax({
                type: "POST",
                url: "/join/mailConfirm",
                data: { "email": email },
                success: function (data) {
                    alert("해당 이메일로 인증번호 발송이 완료되었습니다. \n 확인 해주시기 바랍니다.");
                    checkMatchCode(data);
                }
            });
        }

        function checkMatchCode(data) {
            $('#emailConfirm').on("keyup", function () {
                if (data !== $('#emailConfirm').val()) {
                    $('#emailCode').html("<span>인증번호가 잘못되었습니다.</span>").css({
                        "color": "#FA3E3E",
                        "font-weight": "bold",
                        "font-size": "10px"
                    });
                } else {
                    $('#emailCode').html("<span>인증 성공</span>").css({
                        "color": "#0D6EFD",
                        "font-weight": "bold",
                        "font-size": "10px"
                    });
                }
            });
        }
    </script>

인증번호 버튼을 클릭시 ajax통신을 통해서 인증번호를 전송하게되며 성공적으로 이메일이 발송되면 checkMatchCode(data)이 실행되면서 인증번호에 일치여부에따라 메시지를 알려줍니다.

 

---

 

실행

 

 

전송된 인증번호가 일치할시에 인증성공이라는 메시지가 출력되것을 확인할수있다.

 

---

 

다음으로

 

다음에는 카카오에서 제공하는 무료주소찾기 api를 이용하여 간편하게 주소를 등록하는법을 구현해보도록하겠습니다. 감사합니다 :)