[SJBoard 프로젝트] 스프링 회원가입 기능 만들기 5 : 아이디 찾기 & 비밀번호 찾기(재설정)

이제 아이디 찾기 & 비밀번호 찾기 기능을 추가해보자.

 

아이디 찾기는 회원 가입 시 입력했던 이메일 주소를 확인하여 이메일 주소가 일치할 시에 아이디를 알려준다.

 

비밀번호 찾기는 사실 비밀번호는 찾는 것이 아니라 재설정하는 것이다. 왜냐하면 회원 가입 시 BCryptPasswordEncoder로 모든 비밀번호가 인코딩 되기 때문에 서버에서도 사용자의 비밀번호를 전혀 알 수 없기 때문이다. 따라서 아이디를 아는 경우에 한해 (아이디를 모르면 아이디 먼저 찾아야 함) 회원 가입 시 입력했던 이메일 주소를 확인하여 서버에서 인증 번호를 메일로 보내고 사용자가 해당 인증 번호를 알맞게 입력한 경우에만 다시 비밀번호를 설정할 수 있도록 구현해야 한다. 

 

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

 

1. 아이디 찾기 

아이디 찾기는 회원 가입 시 입력했던 이메일 주소를 확인하여 일치할 시 아이디를 알려준다. 

 

1) 회원 가입 View 페이지 /member/login.jsp 수정  및 아이디 찾기 View 페이지 /member/findId.jsp 작성 

회원 가입 view 페이지인 /member/login.jsp에 '아이디 찾기', '비밀번호 찾기' 메뉴를 만들어 준다. 

/member/login.jsp 파일을 복사해 /member/findId.jsp를 만들고 '아이디 찾기' 페이지에 맞게 메뉴 일부를 수정해준다. 

 

2) MemberController 수정 

컨트롤러에 아이디 찾기 메서드를 추가한다. 반환 타입은 void로 해주고 위에서 만든 /member/findId.jsp와 잘 맵핑되었는지 확인한다.

 

테스트 후 이상이 없는 것을 확인한 다음 영속 계층과 비즈니스 계층에 아이디 찾기를 위한 메서드 선언 및 구현 등 필요한 코드를 작성한다.   

 

3) MemberMapper & MemberMapper.xml 수정 및 테스트 (영속 계층) 

MemberMapper 인터페이스에 아이디 찾기 메서드를 추가 선언한다. 

 

하나의 이메일로 여러 개의 아이디를 가입했을 수도 있기 때문에 여러 아이디가 조회될 것을 대비해 반환 타입을 MemberVO가 아닌 List<MemberVO>로 작성한다.  

 

MemberMapper.xml에 이메일 주소가 일치할 시 아이디를 찾을 수 있는 쿼리문을 작성한다. 

MemberMapperTests에서 작성한 쿼리문이 잘 동작하는지 확인한다. 

 

* 메일 주소 1개에 아이디 1개인 경우) 

 

* 메일 주소 1개에 아이디가 여러 개인 경우)

 

4) MemberService & MemberServieImpl 수정 및 테스트 (비즈니스 계층) 

MemberService 인터페이스에 아이디 찾기 메서드를 추가 선언한다.

 

MemberServiceImpl에 MemberService에서 추가한 메서드를 오버라이드하여 구현부를 작성한다. 

 

MemberServiceTests에서 MemberServiceImpl 에서 구현한 메서드가 잘 동작하는지 확인한다. 

 

* 메일 주소 1개에 아이디 1개인 경우) 

 

* 메일 주소 1개에 아이디가 여러 개인 경우)

 

5) MemberController 및 아이디 찾기 뷰 페이지 /member/findId.jsp 재수정

 

5-1) MemberController 재수정 

영속 계층과 비즈니스 계층 작업을 다 끝냈다면 다시 MemberController로 돌아와 아이디 찾기 메서드를 수정한다.

실제 회원 아이디 찾기 작업은 Post방식으로 진행하므로 postFindId() 메서드를 추가한다.

회원 아이디 찾기 뷰 페이지인 /member/findId.jsp의 <form> 태그의 속성을 수정하고, 자바스크립트 코드를 작성해 아이디 찾기 버튼 클릭 시 브라우저에서 입력한 이메일 주소가 컨트롤러에 잘 전달 되는지 확인한다.

실제 회원 아이디 찾기 작업이 이루어지는 postFindId() 메서드에 아래와 같이 코드를 추가한다.

화면에서 사용자가 입력한 이메일 주소가 postFindId()의 파라미터 String email로 들어오면 service.findUserId(email) 메소드로 해당 이메일 주소로 가입한 아이디를 검색한다. 그리고 검색한 결과는 userIdList라는 변수에 저장한다.

 

해당 이메일로 가입된 아이디가 없을 경우, List 타입을 가지는 userIdList의 List Size는 0 이거나 아니면 null 값이 된다. 이때의 결과값을 "fail"이라는 이름과 0이라는 값으로 Model 객체를 이용하여 뷰로 전달한다.

 

해당 이메일로 가입한 아이디가 있을 경우, userIdList에 있는 사용자의 아이디 값(userid)만 가지고 와야한다. 이를 위해 반복문(for문)을 이용하여 MemberVO 타입의 객체들을 가지고 있던 userIdList의 요소들을 모두 MemberVO 타입의 memberList로 변환해준다. 그리고나서 MemberVO 반환 타입을 가지는 memberList의 getUserid 메서드를 이용해 실제 사용자의 아이디 값만 뽑아낸다. 

 

그 다음 뽑아낸 아이디 값들을 HashSet 타입의 regIdSet (등록된 아이디 모음)에 저장한다. 해당 이메일 주소로 가입한 아이디를 모두 가져와야하므로 이 작업을 userIdList의 size만큼 반복해준다. 컬렉션 타입 중 List 타입이 아닌 Set 타입을 이용하는 것은 반복문 작업 중 컬렉션에 아이디가 중복으로 들어가는 것을 방지하기 위함이다. 

 

최종 결과값은 "success"라는 이름과 1이라는 값으로 Model 객체를 이용하여 뷰로 전달하며, regIdSet 값 또한 "userid"라는 이름으로 Model 객체를 이용해 뷰로 전달한다. 

 

 

5-2) 뷰 페이지 /member/findId.jsp 재수정 

앞서 MemberController의 postFindId() 메서드에서 추가한 작업들이 Model 객체로 전달되어 뷰 페이지인 /member/findId.jsp에 잘 전달될 수 있도록 아래와 같이 코드를 추가해준다.  

 

success 가 1일 경우 아이디가 존재하는 것이므로 컨트롤러에서 만든 regIdSet이 화면에 출력되고, faill이 0일 경우 아이디가 존재하지 않는 것이므로 아이디가 존재하지 않는다는 메세지가 화면에 출력된다. 

 

테스트를 해보면 아래와 같다.

 

* 아이디가 존재하는 경우) 

* 아이디가 존재하지 않는 경우)

 

마지막으로 아이디를 찾았을 경우에는 바로 로그인을 할 수 있도록 '로그인 하기' 버튼을 추가해주고 자바스크립트로 로그인 페이지로 이동할 수 있게 코드를 작성해준다.

 

2.  비밀번호  찾기 

비밀번호 찾기는 사실 비밀번호를 찾는 것이 아니라 재설정하는 것이다. 왜냐하면 회원 가입 시 BCryptPasswordEncoder로 모든 비밀번호가 인코딩 되기 때문에 서버에서도 사용자의 비밀번호를 알지 못하기 때문이다. 따라서 아이디를 아는 경우에 한해 (아이디를 모르면 아이디 먼저 찾아야 함) 회원 가입 시 입력했던 이메일 주소를 확인하여 서버에서 인증 번호를 메일로 보내면 해당 인증 번호가 일치할 경우에만 다시 비밀번호를 설정할 수 있도록 구현해야한다. 

 

따라서 먼저 비밀번호 찾기 페이지부터 완성시킨 다음 해당 페이지에서 비밀번호 찾기 버튼을 누르면 비밀번호 재설정 페이지로 넘어가는 식으로 구현해보겠다. 비밀번호 재설정은 3. 비밀번호 재설정에서 이어나간다. 

 

1) 비밀번호 찾기 View 페이지 /member/findPwd.jsp 작성 

/member/register.jsp 파일을 복사해 /member/findPwd.jsp를 만들고 '비밀번호 찾기' 페이지에 맞게 메뉴 일부를 수정해준다. 

 

2) MemberController 수정 

컨트롤러에 비밀번호 찾기 메서드를 추가한다. 반환 타입은 void로 해주고 위에서 만든 /member/findPwd.jsp와 잘 맵핑되었는지 확인한다.

 

테스트 후 이상이 없는 것을 확인한 다음 영속 계층과 비즈니스 계층에 아이디 찾기를 위한 메서드 선언 및 구현 등 필요한 코드를 작성한다.  

 

3) MemberMapper & MemberMapper.xml 수정 및 테스트 (영속 계층) 

MemberMapper 인터페이스에 비밀번호을 재설정하는 메서드를 추가한다.

MemberMapper.xml에 비밀번호를 재설정하는 쿼리문을 작성한다.

MemberMapperTests 에서 작성한 메서드가 이상없이 동작하는지 확인한다.

 

4) MemberService & MemberServieImpl 수정 및 테스트 (비즈니스 계층)

 

MemberService 인터페이스에 아이디 찾기 메서드를 추가 선언한다.

 

MemberServiceImpl에 MemberService에서 추가한 메서드를 오버라이드하여 구현부를 작성한다. 

 

MemberServiceTests에서 MemberServiceImpl 에서 구현한 메서드가 잘 동작하는지 확인한다. 

 

5) MemberController 및 비밀번호  찾기 뷰 페이지 /member/findPwd.jsp 재수정

 

회원 가입 시 이메일 인증 번호 확인 기능에 사용했던 인증 번호 메일을 보내는 getCheckMail() 메서드와 인증 번호 일치 여부를 확인하는 postRegCheckNum()메서드를 비밀번호 찾기 기능에서도 그대로 활용한다.  

 

** 이메일 인증 번호 확인 기능 구현 참고

https://seojoo21.tistory.com/146

https://seojoo21.tistory.com/148

 

5-1) MemberController 재수정 1

MemberController에서 실제로 비밀번호 찾기 처리를 하는 postFindPwd() 메서드에 파라미터를 입력해주고 log.info()를 입력한다.

 

그 다음 뷰 페이지인 /member/findPwd.jsp의 <form> 태그의 속성을 변경하고 '비밀번호 찾기' 버튼 클릭 시 작동하는 자바스크립트 코드를 넣어준다.

브라우저에서 아이디 입력란과 이메일 입력란에 값을 입력하여 브라우저에서 입력한 값이 컨트롤러로 잘 들어가는지 확인한다.

 

5-2)  /member/findPwd.jsp 재수정  1

인증 번호 전송 버튼 클릭 시 동작하는 자바스크립트 코드와 인증 번호 일치 시 동작하는 자바스크립트 코드를 작성한다. 

 

 

5-3) MemberController 재수정 2

postFindPwd() 메서드의 코드를 아래와 같이 수정한다.  

인증 번호 일치 시 비밀번호를 재설정할 수 있는 /member/updatePwd.jsp 로 redirect 한다.

인증 번호 불일치 시 다시 현재 페이지인 /member/findPwd.jsp로 redirect 한다.

각각의 처리 안내는 각 페이지에 모달창을 추가하여 모달창을 통해 안내하고자 addFlashAttribute() 메서드를 사용한다.

 

/member/findPwd.jsp 를 수정하기 전에 미리 아래와 같이 MemberController에 비밀번호 재설정 메서드를 추가한다. 

 

/member/findPwd.jsp 에 모달창 코드를 추가한다. 모달창은 비밀 번호 찾기 처리 결과를 알려주며 이 페이지에서의 모달창은 인증 번호 불일치로 findPwd.jsp로 리다이렉트 되었다는 것을 알려주는 역할을 한다. 

                        <!-- Modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
						                	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						                    <h4 class="modal-title" id="myModalLabel">처리 안내</h4>
						                </div>
						                <div class="modal-body">
											처리가 완료되었습니다. 
						                </div>
						               	<div class="modal-footer">
						                  <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
						               	</div>
						            </div>
						         <!-- /.modal-content -->
						        </div>
						      <!-- /.modal-dialog -->
						    </div>
						   <!-- /.modal -->

모달창 동작을 위한 자바스크립트 코드를 추가해주고, 비밀번호 찾기 버튼 클릭 시 입력란에 공란이 없도록 체크해주는 자바스크립트 코드 또한 추가해준다.

코드가 이상 없이 동작하는지 브라우저에서 테스트 해본다. 

* 인증 번호 불일치 시 )

 

* 인증 번호 일치 시 )

비밀번호 재설정 페이지 /member/updatePwd.jsp 에서의 모달창은 /member/updatePwd 페이지를 수정하면서 추가해준다. 

 

 

3.  비밀번호  재설정 

앞서 비밀번호 찾기 기능을 만들면서 아래와 같이 비밀번호 재설정 메서드를 MemberController에 추가하였다.

 

1.  비밀번호 재설정 뷰페이지 /member/updatePwd.jsp 작성  

그럼 이제 비밀번호를 재설정 하는 페이지인 /member/updatePwd.jsp 를 /member/ findPwd.jsp 를 복사하여 필요한 부분만 수정하여 만들어준다. 그리고 자바스크립트의 모달창 동작 코드를 처리해준다. 

 

모달창은 비밀 번호 찾기 처리 결과를 알려주며 이 페이지에서의 모달창은 인증 번호 일치로 비밀번호를 재설정할 수 있는 updatePwd.jsp로 리다이렉트 되었다는 것을 알려주는 역할을 한다. 

그리고 모달창이 제대로 뜨는지 브라우저에서 테스트를 해본다. 

 

 

2. MemberController 수정 

먼저 앞서 작성했던 회원 비밀번호 찾기 기능을 처리하는 postFindPwd() 메서드 내에 사용자 아이디를 세션으로 저장하는 코드를 입력한다. "userid"라는 이름으로 저장된 사용자 아이디 userid는 실제 비밀번호를 재설정하는 /member/updatePwd.jsp 로 전달되어 userid값으로 사용된다. 

그 다음 /member/updatePwd.jsp로 가서 "userid"로 저장한 세션값을 읽어올 수 있도록 jsp 페이지 상단에 아래와 같이 스크립트릿을 작성하고 userid가 출력되는 <input> 태그의 value 값도 아래와 같이 수정해준다.

 

이제 비밀번호 재설정 처리 메서드를 수정한다.

 

실제 비밀번호 재설정 작업을 처리하는 postUpdatePwd() 메소드에 아래와 같이 log.info코드를 추가하고, /member/updatePwd.jsp에는 비밀번호 재설정 버튼 클릭 시 동작하는 자바스크립트 코드를 추가하여 브라우저에서 테스트 시 입력되는 값이 잘 들어오는지 확인한다. 

 

값이 잘 들어오는 것을 확인했다면 입력되어 들어오는 비밀번호인 userpw를 암호화 처리 해주는 코드를 추가하고, 암호화된 비밀번호로 값이 수정되어 서버에 업데이트 될 수 있도록 코드를 작성한다. 

비밀번호 재설정 처리 결과는 모달창으로 안내하기 위해 addFlashAttributes() 메서드를 사용한다.

비밀번호 수정 후에는 기존 세션이 종료되어야 하므로 session.invalidate() 코드를 추가한다.

비밀번호 수정 후에는 로그인 페이지로 갈 수 있도록 return 값으로 redirect 처리하며 postUpdatePwd()의 반환타입을 void에서 String으로 바꿔준다.

 

3. 비밀번호 재설정 뷰페이지 /member/updatePwd.jsp 재수정 

/member/updatePwd.jsp 에 아래와 같이 코드를 추가해준다. 

그리고 /member/login.jsp 내 모달창의 동작을 처리하는 자바스크립트 코드에 아래와 같이 if 조건을 추가한다. 해당 코드는 postUpdatePwd() 메서드로 비밀 번호 수정 처리 완료 후 다시 로그인 페이지로 돌아갔을 때 처리 결과를 안내해주는 모달창이다. 

 

마지막으로 테스트를 해본다. 

* 비밀번호 수정 성공 시 )