Spring Boot로 간단한 ID와 비밀번호 찾기 기능 구현하기

id, pwd 찾기 버튼

ID 찾기

// 아이디 찾기 화면

function findId() {

     // ID찾기 버튼 클릭 시 새 창을 열어 ID 찾기 페이지를 표시합니다.

     window.open('/find-id', '아이디찾기', 'width=400,height=300');

}

// 아이디 찾기 화면

@GetMapping("/find-id")

public String findIdView() {

     return "login/findId";

}

 

• 사용자가 "ID 찾기" 버튼을 클릭하면, findId() 함수가 호출되고 /find-id 경로의 새로운 팝업 창이 열립니다.
• 팝업 창이 열리며 서버에 /find-id GET 요청을 보내고, Spring Boot Controller는 findIdView() 메서드를 통해 login/findId.html 뷰를 반환합니다.
• 사용자는 팝업 창에서 ID 찾기 화면을 확인할 수 있습니다.

 

findID.html ( 아이디 찾기 )

<div class="find-id-container">

     <h1>아이디 찾기</h1>

      <form id="find-id-form" method="post">

            <input type="text" name="name" id="name" placeholder="Name" />

            <input type="email" name="email" id="email" placeholder="Email" />

            <button type="button" onclick="findIdResult()">아이디 찾기</button>

      </form>

</div>

 

아이디 찾기 버튼 클릭 시 호출되는 함수

// 아이디 찾기 결과

function findIdResult() {

     if ($("#name").val() == "") {

            swal.fire({

                  title: 'Name을 입력해 주세요',

                  icon: 'warning'

            });

            $("#name").focus();

            return false;

      } else if ($("#email").val() == "") {

            swal.fire({

                  title: 'Email을 입력해 주세요',

                  icon: 'warning'

            });

            $("#email").focus();

            return false;

      }

      $("#find-id-form").attr("action", "/findidresult").submit();

}

 

• 입력된 이름과 이메일을 검사하여 미입력 시 경고 메시지를 표시하고, 입력에 오류가 없으면 서버에 요청을 전송합니다.
• $("#find-id-form").attr("action", "/findidresult").submit(); 을 통해 find-id-form 폼 데이터를 /findidresult 경로로 POST 요청합니다.

이름을 입력하지 않았을 때

 

이메일을 입력하지 않았을 때

Controller에서 ID 찾기 요청 처리

// 아이디 찾기 처리

@PostMapping("/findidresult")

public String findIdAction(Member vo, Model model) {

     Member member = memberService.findId(vo.getName(), vo.getEmail());

      if(member != null) {

            model.addAttribute("message", 1);

            model.addAttribute("id", member.getId());

      } else {

            model.addAttribute("message", -1);

      }

      return "login/findIdResult";

}

 

• Member vo 객체를 통해 사용자가 입력한 이름과 이메일 정보를 받고, Service의 findId 메서드를 호출하여 ID를 조회합니다.
• 조회 결과에 따라:
  • 계정을 찾았으면 message에 1을 설정하고, id에는 찾은 ID를 담아 뷰 템플릿으로 전달합니다.
  • 계정을 찾지 못했으면 message에 -1을 설정하여 실패 메시지를 전달합니다.

 

Repository - ID 찾기 쿼리

@Query(value="SELECT * FROM member WHERE id =:id", nativeQuery=true)

Member findByLoginId(String id);

Native Query를 사용해 DB에서 id 필드에 일치하는 데이터를 조회할 수 있도록 설정합니다.

 

Service - findId 메서드

@Override

public Member findId(String name, String email) {

     return memberRepo.findByNameAndEmail(name, email);

}

 

View Template (HTML) - 결과 화면 표시

<div class="find-id-container">

      <h1>아이디 찾기 결과</h1>

      <th:block th:if="${message == 1}">

            <h3>가입한 계정의 ID는 '[[${id}]]'입니다.</h3>

      </th:block>

      <th:block th:if="${message == -1}">

            <h3>입력하신 이름과 이메일이 일치하는 계정을 찾을 수 없습니다.</h3>

      </th:block>

      <button type="button" onclick="ok()">확인</button>

</div>

입력한 정보와 일치하는 회원이 없을 때

입력한 정보와 일치하는 회원이 있을 때

PassWord 찾기

// 비밀번호 찾기 화면

function findPwd() {

     // pwd찾기 버튼 클릭 시 새 창을 열어 pwd 찾기 페이지를 표시합니다.

     window.open('/find-pwd', '비밀번호찾기', 'width=400,height=350');

}

// 비밀번호 찾기 화면

@GetMapping("/find-pwd")

public String findPwdView() {

     return "login/findPwd";

}

 

• 사용자가 비밀번호 찾기 버튼을 클릭하면 findPwd JavaScript 함수가 실행됩니다.
• JavaScript의 window.open()을 통해 /find-pwd 경로로 GET 요청을 보냅니다.
• Spring Boot Controller의 findPwdView 메서드가 호출되어 비밀번호 찾기 뷰를 반환합니다.

 

 

 

findPwd.html (비밀번호 찾기 )

<div class="find-pwd-container">

     <h1>비밀번호 찾기</h1>

      <form id="find-pwd-form" method="post">

            <input type="text" name="id" id="id" placeholder="ID" />

            <input type="text" name="name" id="name" placeholder="Name" />

            <input type="email" name="email" id="email" placeholder="Email" />

            <button type="button" onclick="findPwdResult()">비밀번호 찾기</button>

      </form>

</div>

 

 

비밀번호 찾기 버튼 클릭 시 호출되는 함수

// 비밀번호 찾기 결과

function findPwdResult() {

      if ($("#id").val() == "") {

            swal.fire({

                  title: 'ID를 입력해 주세요',

                  icon: 'warning'

            });

            $("#id").focus();

            return false;

      } else if ($("#name").val() == "") {

            swal.fire({

                  title: 'Name을 입력해 주세요',

                  icon: 'warning'

            });

            $("#name").focus();

            return false;

      } else if ($("#email").val() == "") {

            swal.fire({

                  title: 'Email을 입력해 주세요',

                  icon: 'warning'

            });

            $("#email").focus();

            return false;

      }

      $("#find-pwd-form").attr("action", "/findpwdresult").submit();

}

 

• findPwdResult 함수는 사용자가 비밀번호 찾기 요청을 할 때, 필요한 정보를 모두 입력했는지 확인합니다.
• 각 입력 필드(ID, Name, Email)를 검사하여 비어 있는 필드가 있을 경우 경고 메시지를 보여줍니다.
• 모든 필드가 채워졌다면, #find-pwd-form의 action URL을 /findpwdresult로 설정하여 폼을 서버에 제출합니다.

ID를 입력하지 않았을 때

이름을 입력하지 않았을 때

 

이메일을 입력하지 않았을 때

 

 

Controller에서 비밀번호 찾기 요청 처리

// 비밀번호 찾기 처리

@PostMapping("findpwdresult")

public String findPwdAction(Member vo, Model model) {

     Member member = memberService.findPwd(vo.getId(), vo.getName(), vo.getEmail());

      if(member != null) {

            model.addAttribute("message", 1);

            model.addAttribute("id", member.getId());

            model.addAttribute("pwd", member.getPwd());

      } else {

            model.addAttribute("message", -1);

      }

      return "login/findPwdResult";

}

• Service의 findPwd 메서드를 호출해 입력된 정보에 맞는 Member 객체를 검색하고, 찾은 결과에 따라 Model에 정보를 추가합니다.
  • member가 존재하면 message에 1을, id와 pwd를 모델에 추가하여 뷰 템플릿에서 사용할 수 있게 합니다.
  • 회원 정보가 없을 경우 message에 -1을 설정하여, 뷰에서 에러 메시지를 표시하도록 합니다.
• login/findPwdResult 템플릿을 반환하여 검색 결과를 화면에 보여줍니다.

Repository - pwd 찾기 쿼리

// 비밀번호 찾기 (id, name, email)

@Query(value="SELECT * FROM member WHERE id = :id AND name = :name AND email = :email", nativeQuery = true)

Member findByIdAndNameAndEmail(String id, String name, String email);

 

 

Service - findPwd 메서드

@Override

public Member findPwd(String id, String name, String email) {

     return memberRepo.findByIdAndNameAndEmail(id, name, email);

}

 

HTML 템플릿 - findPwdResult.html

<div class="find-pwd-container">

     <h1>비밀번호 찾기 결과</h1>

     <th:block th:if="${message == 1}">

            <h3>가입한 계정의 ID는 '[[${id}]]'입니다.</h3>

            <h3>가입한 계정의 Password는 '[[${pwd}]]'입니다.</h3>

      </th:block>

      <th:block th:if="${message == -1}">

            <h3>입력하신 내용과 일치하는 계정을 찾을 수 없습니다.</h3>

      </th:block>

      <button type="button" onclick="ok()">확인</button>

</div>