쇼핑몰 프로젝트 비밀번호 찾기 기능 - 이메일 임시 비밀번호 발송

메일 보낼 수 있는 기능을 사용하기 위해 build.gradle에 아래 코드 추가

implementation 'org.springframework.boot:spring-boot-starter-mail'

메일 서버 설정을 위해 application.properties에 아래 코드 추가

#메일 smtp 설정 (메일서버)
spring.mail.host=smtp.gmail.com
spring.mail.port=587
#발신자의 메일과 패스워드(별도의 인증을 받은)
spring.mail.username=구글id@gmail.com
spring.mail.password=생성된 비밀번호
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.auth=true

구글 접속해서 계정 설정 2단계 인증 설정 > 앱 비밀번호 설정 

생성된 비밀번호를  password 칸에 넣으면 됨.

Util 패키지 MailService 클래스 생성

메일 보내는 메소드 생성

 

- 단순 문자 메일 보내기

 

수신자 세팅할 때 매개변수로 String 하나만 받는 메소드와 String 배열이 들어가는 메소드 있음

String 배열을 매개변수로 받으면 한명이든, 여러명이든 수신자 지정 가능!

1. 수신자를 한명만 지정하는 경우

@Service("mailService")
public class MailService {
	
	@Autowired //객체 불러옴 (gradle에서 추가한 코드가 객체를 만들어줌)
	private JavaMailSender javaMailSender;
	
	
	//단순 문자 메일 보내기
	public void sendSimpleEmail() {
		//단순 문자 메일을 보낼 수 있는 객체 생성
		SimpleMailMessage message = new SimpleMailMessage();
		message.setSubject("[book shop] 임시 비밀번호 발송"); //메일 제목
		message.setTo("메일주소@naver.com"); //수신자
		message.setText("임시 비밀번호입니다."); //내용
		
		javaMailSender.send(message);
	}

}

 

test로 상품 목록 페이지 올 때 메일 보내는 메소드 실행.

ItemController에서 메소드 실행시켜주기.

아래처럼 상품 목록 페이지 올 때 메일 발송됨.

 

메일의 제목, 수신자, 내용은 매번 바뀌기 때문에 변수로 만들어서 매개변수로 주는 것이 좋음.

MailService의 메소드에 매개변수 추가

ItemController에서 메소드 실행 시 매개변수로 메일의 제목, 수신자, 내용 세팅 해주면 됨.

 

 

메일의 제목, 수신자, 내용을 VO로 받아서 매개변수로 사용 가능.

MailVO 생성

package com.study.shop.util;

@Getter
@Setter
public class MailVO {
	
	private String title;
	private String recipient;
	private String content;
	
}

MailService의 sendSimpleEmail 메소드 매개변수에 MailVO를 줌.

ItemController에서 상품 목록 페이지 올 때 매개변수로 MailVO 받음

mailVO에 메일 관련 정보 세팅해주고 메소드 실행할 때 MailVO 매개변수 사용.

 

2.수신자를 여러명으로 지정하는 경우

리스트를 생성해서 수신자들을 세팅하여 배열로 바꿔서 사용하면 됨.

MailVO에서 수신자 변수를 List형태로 바꿔줌.

@Getter
@Setter
public class MailVO {
	
	private String title;
	private List<String> recipientList;
	private String content;

}

 

MailService

수신자 설정 코드에서 우선 mailVO의 수신자 리스트를 가져옴.

가져온 수신자 리스트를 배열로 바꾼다 배열로 바꿀 때 배열의 크기를 지정해줘야함.

배열의 크기 = 가져온 수신자 리스트 사이즈 

위처럼 설정해주면 됨!

배열로 바꿀 때 toArray 메소드가 여러개 있는데 그 중 아래 표시된 것으로 사용해야 함.

@Service("mailService")
public class MailService {
	
	@Autowired //객체 불러옴 (gradle에서 추가한 메일 관련 코드가 객체를 만들어줌)
	private JavaMailSender javaMailSender;
	
	//단순 문자 메일 보내기
	public void sendSimpleEmail(MailVO mailVO) {
		//단순 문자 메일을 보낼 수 있는 객체 생성
		SimpleMailMessage message = new SimpleMailMessage();
		message.setSubject(mailVO.getTitle()); //메일 제목
		//리스트를 배열로 바꿔서?
		message.setTo(mailVO.getRecipientList().toArray(new String[mailVO.getRecipientList().size()])); //여러명의 수신자 가능
		message.setText(mailVO.getContent()); //내용
		
		
		javaMailSender.send(message);
	}
}

ItemController에서 mailVO에 메일 수신자 정보 세팅하기 전에

여러 수신자 정보를 담는 리스트를 생성

그 리스트에 여러 수신자들 담은 후 리스트를 수신자 정보 세팅할 때 사용.

 

 

- HTML 형식으로 6자리 랜덤한 임시 비밀번호 메일 보내기

 

https://unlayer.com/templates

Free HTML Email Templates and Editor

이용하여 만들어진 템플릿 사용 가능

템플릿 서치해서 선택하면 기존 템플릿 수정도 가능

 

templates 폴더에 mail.html 생성

타임리프 문법 코드만 두고 나머지 코드 삭제 후 템플릿 코드 main.html에 붙여넣기

남겨둔 타임리프 문법 코드 html에 붙여넣기

복사한 코드 중 password 부분은 매번 바뀌어야 됨.

password 지워주고 th문법 사용하여 password 변수로 설정.

MailService에서 메소드 작성

우선 HTML로 메일 보내는 코드 작성 전에

랜덤한 6글자의 임시 비밀번호를 만드는 메소드 작성.

	//6자리의 랜덤 비밀번호 생성
	public String createRandomPw() {
        String[] StringSet = new String[]{ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
                "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N",
                "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
                "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n",
                "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"
                };
        
        //랜덤한 임시 비밀번호 변수
        String pwd = "";

        //문자 배열 길이의 값을 랜덤으로 6개를 뽑아 조합
        int randIndex = 0;
        for(int i = 0; i < 6; i++){
        	randIndex = (int)(StringSet.length * Math.random()); //0 <= x < 1 실수 리턴
            pwd += StringSet[randIndex];
        }

        return pwd;
	}

 

//HTML 메일 보낼 시 내용 세팅
public String setContext(String password) {

    Context context = new Context();
    //변수 세팅
    context.setVariable("password", password); //mail.html의 password 이름의 변수를 password로 채워줌(?
        //templates안의 mail.html을 다룸 (mail.html이 폴더 안에 있다면 폴더까지 넣어주면 됨)
    return templateEngine.process("mail", context); //변수 작업 후 mail.html의 내용을 return
}

 

//HTML 메일 보내기
public void sendHTMLEmail() {

    MimeMessage message = javaMailSender.createMimeMessage();
    String password = createRandomPw();

    try {
        message.setSubject("임시 제목");
                        //html 보냄
        message.setText(setContext(password), "UTF-8", "html"); //이 내용을 html로 보냄
        message.addRecipients(MimeMessage.RecipientType.TO, "byuuuuul@naver.com");
        javaMailSender.send(message);
    } catch (MessagingException e) {
        e.printStackTrace();
    }

}

 

header.html로 가서 로그인모달창 하단에 비밀번호 찾기 버튼 생성

비밀번호 찾기 글자 클릭 시 모달창 뜨게 코드 작성

 

모달창 작성 시 아래 코드  넣어주고 target과 id 동일하게 맞춰주면 됨.

data-bs-toggle="modal" data-bs-target="#findPwModal"

비밀번호 찾는 모달창 코드 작성

<!-- 비밀번호찾기 Modal -->
<div class="modal fade" id="findPwModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
		<form id="findPwForm" >
      				<!-- mb-3 :margin-bottom -->
        <div class="row mb-3">
        	<div class="col-12">
				<input type="text" id="findPwMemId" name="memId" class="form-control" placeholder="Input your ID">        	
        	</div>
        </div>
        <div class="row mb-3">
        	<div class="col-12" id="findPwErrorDiv">
				<input type="text" id="findPwMemName" name="memName" class="form-control" placeholder="Input your Name">        	
        	</div>
        </div>
        <div class="row mb-3">
        	<div class="col-12 d-grid">
				<input type="button" class="btn btn-primary" value="비밀번호 찾기" onclick="findPw();">
				<!-- validation 하려면 button / 바로 페이지 이동 : submit -->     	
        	</div>
        	<div class="col" style="font-size: 0.8rem; color: red;">
        		* 가입 시 입력한 이메일로 임시 비밀번호가 발송됩니다.
        	</div>
        </div>
      	</form>
      </div>
    </div>
  </div>
</div>

onclick 속성 사용하여 비밀번호 찾기 클릭 시 함수 연결

 

 

header.js 함수 작성

페이지 이동 없이 작동을 위해 ajax 이용

//비밀번호 찾기 버튼 클릭 시
function findPw(){
	
	//ID, 이름 input이 있는 form 태그
	//const findPwForm = $('#findPwForm') Jquery 문법으로 태그 선택
	
	//ajax start
	$.ajax({
		url: '/member/findPwAjax', //요청경로
		type: 'post',
		//findPwForm.serialize() : form 태그 데이터 가져가는 Jquery 코드, 가져갈 때 name속성으로 데이터 가져감(submit과 동일)
		data: $('#findPwForm').serialize(), //필요한 데이터
		async : true, //default 
		//contentType : 'application/json; charset=UTF-8', //json 방식
		contentType: "application/x-www-form-urlencoded; charset=UTF-8", //default 방식
		success: function(result) {
			alert('ajax 통신 성공');
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end
	
}

주의사항

현재 시큐리티 코드로 페이지 인증 인가 설정 되어 있기 때문에

SecurityConfig 클래스에 비밀번호 찾기 위한 이동 경로도 모든 사용자 접근 가능하게 인가 허용 코드 추가.

MemberController 작성

//비밀번호 찾기 
@ResponseBody
@PostMapping("/findPwAjax")
public void findPw(MemberVO memberVO) {


}

 

비밀번호 찾기 버튼 클릭 시 이메일 조회하는 쿼리 작성

<!-- 비밀번호 찾기 이메일 전송 -->
<select id="getMemEmail" resultType="String">
    SELECT MEM_EMAIL
    FROM SHOP_MEMBER
    WHERE MEM_ID = #{memId}
    AND MEM_NAME = #{memName}
</select>

현재 DB에 SHOP_MEMBER 테이블에 이메일 컬럼 없음.

SHOP_MEMBER에 MEM_EMAIL 컬럼 추가

--SHOP_MEMBER 테이블 MEM_EMAIL 컬럼 추가
ALTER TABLE SHOP_MEMBER ADD MEM_EMAIL VARCHAR2(100);

암호화된 비밀번호 가진 사용자 중 MEM_EMAIL 업데이트

UPDATE SHOP_MEMBER
SET MEM_EMAIL = 'byuuuuul@naver.com'
WHERE MEM_ID = 'user';

MemberVO에도 데이터 받아올 수 있게 memEmail 변수 추가

resultMap도 추가

MemberService 메소드 작성

//비밀번호 찾기
String getMemEmail(MemberVO memberVO);

MemberServiceImpl 작성

//비밀번호 찾기 버튼 클릭 시 회원 이메일 조회
@Override
public String getMemEmail(MemberVO memberVO) {

    return sqlsession.selectOne("memberMapper.getMemEmail", memberVO);
}

 

MemberController 메소드 실행

//비밀번호 찾기 버튼 클릭 시 
@ResponseBody
@PostMapping("/findPwAjax")
public boolean findPw(MemberVO memberVO) {

   //해당 회원 이메일 조회
   String memEmail = memberService.getMemEmail(memberVO);

    //이메일 찾았으면 true 못 찾은 경우 false 데이터 ajax success 구문으로
    return memEmail != null ? true : false;

}

회원의 이메일이 있는 경우 임시비밀번호를 이메일로 전송해주면 됨.

메일 발송 메소드 실행을 위해 mailService 객체 불러오기

이메일 전송 전에 임시 비밀번호를 생성하고 임시 비밀번호 역시 암호화 되어 있어야 함.

mailService에 랜덤한 임시 비밀번호 생성하는 메소드를 실행하여 임시 비밀번호를 만든 후

그 비밀번호를 암호화 작업 해줌.

또한, 이메일로 발송된 임시비밀번호로 실제 로그인이 가능하게 작업해줘야 함.

임시 비밀번호로 비밀번호를 변경하는 쿼리 작성

<!-- 임시 비밀번호로 비밀번호 변경 -->
<update id="updateMemPw">
    UPDATE SHOP_MEMBER
    SET
    MEM_PW = #{memPw}
    WHERE MEM_ID = #{memId}
</update>

MemberService 메소드 작성

//임시 비밀번호로 비밀번호 변경
void updateMemPw(MemberVO memberVO);

MemberServiceImpl 작성

//임시 비밀번호로 비밀번호 변경
@Override
public void updateMemPw(MemberVO memberVO) {
    sqlsession.update("memberMapper.updateMemPw", memberVO);

}

 

MemberController 메소드 실행

메소드 실행하려면 memberVO에서 쿼리 빈값 2개 채워줘야 함.

memId는 회원 이메일 조회할 때 memberVO에 세팅되어 있는 상태

memPw는 암호화한 임시비밀번호를 memberVO에 데이터 세팅해주면 됨.

비밀번호 변경하는 메소드 실행.

비밀번호 세팅 작업이 다 되면 메일 전송 메소드 실행.

비밀번호 찾기 버튼 클릭 시 controller 전체 코드

//비밀번호 찾기 버튼 클릭 시 
@ResponseBody
@PostMapping("/findPwAjax")
public boolean findPw(MemberVO memberVO) {

   //해당 회원 이메일 조회
   String memEmail = memberService.getMemEmail(memberVO);

   //임시 비밀번호 생성
   String imsiPw = mailService.createRandomPw();
   //암호화 작업
   String encodedPw = encoder.encode(imsiPw);
   memberVO.setMemPw(encodedPw);
   //임시비밀번호로 비밀번호 변경
   memberService.updateMemPw(memberVO);


   //회원의 이메일 찾은 경우 메일 보내는 기능
   if(memEmail != null) {
       MailVO mailVO = new MailVO();
       mailVO.setTitle("[BOOK SHOP] 임시 비밀번호 발송");
       List<String> emaiList = new ArrayList<>();
       emaiList.add(memEmail);
       mailVO.setRecipientList(emaiList);
       mailVO.setContent(imsiPw);

       mailService.sendSimpleEmail(mailVO);

   }

//이메일 찾았으면 true 못 찾은 경우 false 데이터 ajax success 구문으로
return memEmail != null ? true : false;

}

메일로 임시 비밀번호 확인 가능!

 

**마이페이지에서 임시 비밀번호 로그인 후 비밀번호 변경하는 기능 있어야 함.

 

 

js의 success 구문으로 돌아와서 result가 true면(이메일 있는 경우) alert으로 이메일 발송 메시지 띄워줌

result false면(이메일 없는 경우) 에러 문구 띄워줌

 

 

header.js의 init 함수 수정

비밀번호 찾기 모달창 닫히면 비밀번호 찾을 때 입력한 내용 지워주는 이벤트 작성

1. form 태그 안의 input 태그의 내용을 초기화 시켜주는 reset 코드

2. 에러 문구 div 선택하여 지워줌

 

비밀번호 찾기 버튼 클릭 후 이메일 전송 로딩 표시해주기

bootstrap의 spinners보면 buttons를 보면 버튼에 로딩 표시 가능한 코드 있음!

아래 코드 활용

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

한 번 누르면 버튼 비활성화 되게하고 로딩 표시 주기.

 

header.html 비밀번호 찾기 모달에서 비밀번호 찾기 버튼 찾아감.

이전에 작성한 비밀번호 찾기 버튼 수정.

버튼 클릭 시 함수에 매개변수로 this로 버튼 넘겨주고 input 태그의 버튼을 button 태그로 수정

 

header.js
비밀번호 찾기 버튼 클릭 시 실행되는 함수 수정

처음 비밀번호 찾기 버튼 활성화 버튼 눌렀을 때 disabled 속성 추가 되면 되고,

span 태그에 감싸진 spinner 추가 되면 됨

 

모달창 닫힐 때 위에서 바꿔준 버튼(비밀번호 찾기 버튼) 다시 이전 상태로 돌아와야 함.

init 함수 수정

모달창 닫힐 때 이벤트 발생하게 코드 작성

코드 작성 시 함수에 매개변수(event)를 추가할 수 있음.

매개변수.target을 하면 this와 동일한 역할로 쓸 수 있다.

모달 태그 자체를 선택하여 모달 태그 안의 버튼 선택

버튼 이전 상태로 바꿔주는 코드 실행하면 됨.

 

버튼이 이전 상태로 돌아와야 하는 경우 이메일 찾은 경우, 이메일 오류난 경우 둘 다

ajax success문의 이메일 없는 경우 코드의 if문 코드 끝난 후 

버튼 이전 상태로 돌리는 코드 추가.

비밀번호 찾기 버튼 클릭 시 실행되는 함수 전체 코드

//비밀번호 찾기 버튼 클릭 시
function findPw(btn){
	
	btn.disabled = true;

	//버튼 글자 바꿔주기
	btn.querySelector('span').textContent = 'Loading';
	
	const spinner = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
	btn.insertAdjacentHTML('afterbegin', spinner);
	
	
	
	//ID, 이름 input이 있는 form 태그
	//const findPwForm = $('#findPwForm') Jquery 문법으로 태그 선택
	
	//ajax start
	$.ajax({
		url: '/member/findPwAjax', //요청경로
		type: 'post',
		//findPwForm.serialize() : form 태그 데이터 가져가는 Jquery 코드, 가져갈 때 name속성으로 데이터 가져감(submit과 동일)
		data: $('#findPwForm').serialize(), //필요한 데이터
		async : true, //default 
		//contentType : 'application/json; charset=UTF-8', //json 방식
		contentType: "application/x-www-form-urlencoded; charset=UTF-8", //default 방식
		success: function(result) {
			
			if(result){
				alert('이메일로 임시 비밀번호를 발송하였습니다.\n반드시 비밀번호 변경 후 사용하십시오.');
				
			}
			//email 없는 경우
			else{
				let str = '';
				
				str += '<div class="col-12 error-findPw">';
				str += '<span style="font-size: 0.8rem; color: red;">';
				str += '* 일치하는 ID와 이름이 없습니다. 확인 후 다시 입력하십시오.';
				str += '</span>';
				str += '</div>';
				
				document.querySelector('#findPwErrorDiv').insertAdjacentHTML('afterend', str);
				
				
			}
				//버튼 클릭 후 결과 나온 후 버튼 이전 상태로 돌리기
				btn.disabled = false;
				btn.querySelector('span:first-child').remove();
				btn.querySelector('span').textContent = '비밀번호 찾기';
			
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end
	
}