기능소개(아이디 비밀번호 찾기) - lee-geon-hee/pandang GitHub Wiki

📃 아이디 찾기 페이지

📌 아이디 찾기, 비밀번호 변경

  • 아이디 찾기 질문 답변이 맞으면 아이디 보여주기
  • 비밀번호 변경 시 해당 회원의 비밀번호 변경 질문 자동 입력
  • 비밀번호 정규식 검사 후 변경 완료

💻 코드

Controller

MemberFrontController.java 
public class MemberFrontController extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doProcess(req, resp);
	}
	
	protected void doProcess(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String target = req.getRequestURI().substring(req.getContextPath().length());
		switch(target) {
		case "/member/findId.me":
			req.getRequestDispatcher("/app/member/findId.jsp").forward(req, resp);
			break;
		case "/member/findIdOk.me":
			new FindIdOkController().execute(req, resp);
			break;
		case "/member/findPw.me":
			new FindPwController().execute(req, resp);
			break;
		case "/member/findPwOk.me":
			new FindPwOkController().execute(req, resp);
			break;
		case "/member/findPwAsk.me":
			req.getRequestDispatcher("/app/member/findPwAsk.jsp").forward(req, resp);
			break;
		case "/member/findPwAskOk.me":
			new ChangePwOkController().execute(req, resp);
			break;
		}
	}
}
ChangePwOkController.java 
public class ChangePwOkController implements Execute {
	@Override
	public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		MemberDAO memberDAO = new MemberDAO();
		MemberDTO memberDTO = new MemberDTO();
		
		req.setCharacterEncoding("utf-8");

		String memberPassword = req.getParameter("memberPassword");

		memberDTO.setMemberAsk(req.getParameter("memberAsk"));
		memberDTO.setMemberAnswer(req.getParameter("memberAnswer"));
		memberDTO.setMemberPassword(req.getParameter("memberPassword"));

		memberDAO.changePw(memberDTO);

		resp.sendRedirect("/member/login.me");

	}
}
FindIdOkController.java 
public class FindIdOkController implements Execute {
	@Override
	public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		MemberDAO memberDAO = new MemberDAO();
		MemberDTO memberDTO = new MemberDTO();
		Map<String, String> map = new HashMap();

		String memberName = req.getParameter("memberName");
		String memberBirth = "";
		String memberPhoneNumber = req.getParameter("memberPhoneNumber");

		req.getParameter("memberBirth");
		for (int i = 0; i < req.getParameter("memberBirth").length(); i++) {
			if (i == 4 || i == 6) {
				memberBirth += '-';
			}
			memberBirth += req.getParameter("memberBirth").charAt(i);
		}
		;

		map.put("memberName", memberName);
		map.put("memberBirth", memberBirth);
		map.put("memberPhoneNumber", memberPhoneNumber);

		resp.setContentType("text/html; charset=utf-8");

		PrintWriter out = resp.getWriter();
		out.print(memberDAO.findId(map));
		out.close();

	}
}
FindPwController.java 
public class FindPwController implements Execute {

	@Override
	public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.setAttribute("memberId", req.getParameter("memberId"));
		req.getRequestDispatcher("/app/member/findPw.jsp").forward(req, resp);
	}

}
FindPwOkController.java 
public class FindPwOkController implements Execute {
	@Override
	public void execute(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		req.setCharacterEncoding("utf-8");
		MemberDAO memberDAO = new MemberDAO();
		MemberDTO memberDTO = new MemberDTO();
		Map<String, String> map = new HashMap();

		String memberId = req.getParameter("memberId");
		String memberName = req.getParameter("memberName");
		String memberBirth = "";
		String memberPhoneNumber = req.getParameter("memberPhoneNumber");

//		'19990101' 같은 형식으로 받은 생년월일을 '1999-01-01'로 바꿔준다.
//		DB에 들어있는 형식과 같아야한다. '1999.01.01'(X)
		req.getParameter("memberBirth");
		for (int i = 0; i < req.getParameter("memberBirth").length(); i++) {
			if (i == 4 || i == 6) {
				memberBirth += '-';
			}
			memberBirth += req.getParameter("memberBirth").charAt(i);
		}
		;

		map.put("memberId", memberId);
		map.put("memberName", memberName);
		map.put("memberBirth", memberBirth);
		map.put("memberPhoneNumber", memberPhoneNumber);

		String memberAsk = memberDAO.findPw(map);

//		비밀번호 찾기 질문을 가져옴.
		req.setAttribute("memberAsk", memberAsk);

		req.getRequestDispatcher("/app/member/findPwAsk.jsp").forward(req, resp);
	}
}

DAO

MemberDAO.java 
public class MemberDAO {
	public SqlSession sqlSession;

	public MemberDAO() {
		sqlSession = MyBatisConfig.getSqlSessionFactory().openSession(true);
	}	
	
	public String findId(Map<String, String> map) {
		return sqlSession.selectOne("member.findId", map);
	}
	
	public String findPw(Map<String, String> map) {
		return sqlSession.selectOne("member.findPw", map);
	}			
}

Mapper

MemberMapper.xml 
	<select id="findId" parameterType="map" resultType="string">
		select member_id from tbl_member
		where member_name = #{memberName} and member_birth = #{memberBirth}
		and member_phone_number = #{memberPhoneNumber}
	</select>
	
	<select id="findPw" parameterType="map" resultType="string">
		select member_ask from tbl_member
		where member_id = #{memberId} and member_name = #{memberName}
		and member_birth = #{memberBirth} and member_phone_number = #{memberPhoneNumber}
	</select>

JavaScript

findId.js 
let $prevBtn = $(".button1");
let $nextBtn = $(".button2");

let nameInput = $("#name");
let birthInput = $("#birth");
let phoneNumberInput = $("#phoneNumber");

let checkIdMsg = $(".id-msg");

// 이름, 생년월일, 전화번호 input에 정보입력.
// '다음' 버튼 클릭하면 3개의 값이 DB의 회원정보와 일치하는지 확인.
// 일치하면 .id-msg에 "아이디는 {memberId} 입니다."라는 텍스트 표시.
// 일치하지 않으면 "입력하신 정보와 일치하는 회원이 없습니다."라는 텍스트 표시.


$nextBtn.on("click", function() {
	
	$.ajax({
	  url: '/member/findIdOk.me',
      type: 'POST',
      data: {
        memberName: $("#name").val(),
        memberBirth: $("#birth").val(),
        memberPhoneNumber: $("#phoneNumber").val()
      },
      success: function(result) {
        $(".id-msg").text("아이디는 " + result + "입니다.");
		// 아이디찾기 성공 후 '로그인'/'비밀번호찾기' 버튼을 누르면 해당 url에 memberId 추가
		$(".login-btn").attr("href", "/member/login.me?memberId=" + result);
		$(".changePw-btn").attr("href", "/member/findPw.me?memberId=" + result);
		},
		error: function(a, b, c) {
			console.log(c);
		}

	});
});
findPwAsk.js 
let $checkPw = $("#check-pw-msg");
let $checkPw2 = $("#check-pw-msg2");
let $checkAnswer = $("#check-answer-msg");
let $pwInput = $("#password");
let $pwInput2 = $("#password2");
let $answerInput = $("#answer");

// 답변 ajax를 이용하여 일치, 불일치 판단후 답변 밑 span에 알려주기
$answerInput.on("blur", function () {
  // ajax 이용하여 답변 일치 불일치 확인
	$idInput.on('change', function() {
	
	$.ajax({
		url : '/member/findPwAskOk.me',
		type : 'post',
		data : {memberAnswer : answer},
		success : function(result) {
			$checkAnswer.text(result);
		},
		error : function(a, b, c) {
			console.log(c);
		}
	});
});
});


// 비빌번호 검사
const regex =
  /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[a-zA-Z\d!@#$%^&*()_+]{8,}$/;

// 비밀번호 정규식 8자 이상, 영어 숫자 특수문자 하나 이상 포함
$pwInput.on("blur", function () {
  if (regex.test($(this).val())) {
    $checkPw.text("사용 가능한 비밀번호입니다.");
    // 비밀번호 일치 검사(1차 정규식 통과한 후에만 일치 검사)
    $pwInput2.on("blur", function () {
      if ($(this).val() != $pwInput.val()) {
        $checkPw2.text("비밀번호가 일치하지 않습니다.");
      } else {
        $checkPw2.text("비밀번호가 일치합니다.");
      }
    });
  } else {
    $checkPw.html(
      "사용 불가능한 비밀번호입니다. <br>영어, 숫자, 특수문자를 포함하여 8글자 이상 작성하세요!"
    );
  }
});
⚠️ **GitHub.com Fallback** ⚠️