Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

Just Do it

[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 4 : 이메일로 인증 번호 전송 1 본문

신입 개발자가 되기 위해 공부했던 독학 자료들/SJBoard 프로젝트를 통한 스프링 공부

[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 4 : 이메일로 인증 번호 전송 1

Seojoo21 2022. 3. 19. 22:14

생각해보니 보통의 웹사이트들을 보면 회원 가입 시 아이디와 사용자 이름(별명) 중복 체크 뿐만 아니라 이메일로 인증번호를 받은 후 해당 인증번호를 입력해야지 회원 가입이 된다. 그래서 그 기능을 추가해보았다. 

 

실제 기능 구현에 앞서 먼저 자바 메일 서버(SMTP Server)를 이용한 메일 전송 방법을 공부해서 정리해두었다.

 

https://seojoo21.tistory.com/144

 

[스프링] 메일서버(SMTP Server)를 이용한 메일 전송

0. 개요 SMTP : Simple Mail Transfer Protocol의 약자로 전자 메일 전송을 위한 표준 프로토콜 SMTP Server : 이메일을 송신하는 서버. (메일 서버는 SMTP Server, POP3 Server가 있는데 POP3 Server는 이메일을..

seojoo21.tistory.com

 

도움 받은 글: 

https://kimvampa.tistory.com/105?category=771727 

https://kimvampa.tistory.com/92

 

https://myhappyman.tistory.com/248

https://gosasac.tistory.com/26

https://moonsiri.tistory.com/39

https://kdhyo98.tistory.com/m/48

---------------------------------------------------------

1. 회원 관리 영속 계층 

- MemberVO : 회원 정보 관련 변수 선언 

- AuthVO: 회원 권한 관련 변수 선언 

- MemberMapper 인터페이스: 회원 정보 처리 관련 SQL 처리를 위한 인터페이스

- MemberMapper.xml : 회원 정보 처리 관련 SQL 파일

- MemberMapperTests : 회원 정보 처리 관련 영속 계층 테스트 파일 

 

2. 회원 관리 비즈니스(서비스) 계층 

- MemberService 인터페이스: 회원 정보 처리 관련 서비스 인터페이스 

- MemberServiceImpl : MemberSerivce 인터페이스 구현 클래스 

- MemberServiceTests : 회원 정보 처리 관련 비즈니스 계층 테스트 파일 

 

3. 회원 관리 프레젠테이션(웹) 계층 

- MemberController: 회원 가입 처리 컨트롤러 

- 각종 뷰 페이지 

------------------------------------------------------------

 

=====================================START!==========================================

 

1. 이메일 전송 환경 설정 

1) pom.xml에 javax.mail 라이브러리와 spring-context-support 라이브러리를 추가한다. 

2) 릴레이 방식이 아닌 '메일 서버 계정 인증 후 메일을 전송하는 방식'으로 회원 가입 인증 메일을 보낼 것이므로 root-context.xml에 mailSender Bean을 등록해준다. 나는 네이버 이메일 계정을 이용하기로 하였다. 

 

2. 뷰 페이지 수정 

회원 가입 페이지인 '/member/register.jsp' 에 가서 기존 코드에 인증 번호 전송에 필요한 폼과 버튼을 추가로 만들어준다.  

 

인증 번호 입력 칸은 처음에는 아무 값도 입력할 수 없는 'disabled'였다가 인증 번호 전송 버튼을 클릭하여 서버에서 메일이 전송되면 그때부터 인증 번호를 입력할 수 있도록 만든다. 그리고 이를 구분하기 위해 값을 입력하지 못할 때는 인증 번호 입력칸을 회색으로, 입력할 수 있을 때는 흰색으로 바뀌도록 만들고자 <head> 부분에 CSS style을 추가한다. 

 

3. 인증 번호 전송 버튼 클릭 시 동작하는 자바스크립트 코드를 추가한다. 

버튼 클릭 시 화면 이동이 일어나면 안되므로 Ajax 비동기 처리를 하고자 $.ajax()안에 type과 url을 먼저 작성한다.

type은 'get'인데 사용자가 입력한 이메일 주소가 url로 들어가고, 해당 url로 들어간 이메일 주소를 컨트롤러에 작성할 이메일 전송 메서드의 파라미터로 받은 다음, 컨트롤러에서 사용자에게 이메일을 전송할 것이다.  

 

3. 컨트롤러 수정 

MemberController에 회원 가입 시 이메일 인증을 위해 메일로 인증 번호를 보내는 메서드를 추가한다. 

반환 타입은 임시로 void로 하여 (추후 String 으로 바꿀 예정) 브라우저에서 입력한 값이 서버로 잘 들어오는지 확인한다.  

 

인증 번호에 사용할 난수를 생성해야 하므로 SecureRandom 클래스를 사용해 인증 번호 여섯 자리 난수를 생성하는 코드를 작성한다. 

 

인증 메일을 보내는 코드를 작성한다.

브라우저에 실제 이메일 주소를 넣고 테스트하여 인증 번호 여섯 자리 이메일이 잘 가는지 확인한다. 

'신입 개발자가 되기 위해 공부했던 독학 자료들 > SJBoard 프로젝트를 통한 스프링 공부' 카테고리의 다른 글

[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 5 : 아이디 찾기 & 비밀번호 찾기(재설정)  (0) 2022.03.22
[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 4 : 이메일로 인증 번호 전송 2 & 인증 번호 일치 여부 확인 처리  (0) 2022.03.21
[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 3 : 아이디 및 사용자 이름 중복 체크  (0) 2022.03.19
[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 2 : 회원 정보 조회, 수정, 삭제 기능 추가  (0) 2022.03.18
[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 1 : 회원가입 기능 구현  (0) 2022.03.16
'신입 개발자가 되기 위해 공부했던 독학 자료들/SJBoard 프로젝트를 통한 스프링 공부' Related Articles more