웹 서버 만들기 (8) 회원가입 구현

회원 가입 버튼 누르기 전

회원가입 버튼 추가

---

로그인 페이지에 회원가입 버튼 추가

회원가입 버튼 부분(클라이언트)

• 회원 가입 페이지로 연결해준다.

회원가입 페이지 연결(서버)

String formAction = "/sign_in_page/authentication";
request.setAttribute("formAction", formAction);
request.setAttribute("signUpLink", "/sign_in_page/sign_up_page");
// session id 가 만료되었거나 없어서 새롭게 로그인 해 줘야한다.
// 로그인 페이지를 보여준다.
gotoForwardPage(request, response, "/WEB-INF/sign_in_page/sign_in_page.jsp");

• 서버에서 signUpLink 변수를 넣은후 sign_in_page.jsp 로 forward 해야지만 회원가입 링크 부분이 완성이 된다.
• 만약 signUpLink 변수를 안주면 회원가입 버튼이 안보인다.
  

회원가입 페이지

---

회원가입 페이지

구성

• Username
  • 유저 아이디를 입력한다.
• 중복확인
  • 서버로 유저가 입력한 아이디를 보내 중복하는 아이디인지 확인한다.
• Email
  • 유저 이메일을 입력한다.
  • 이메일 패턴에 맞게 입력하여야 한다.
• Password
  • 유저 비밀번호를 입력한다.
• Password 확인
  • 유저 비밀번호를 동일하게 입력한다.
• 회원가입
  • 중복확인, 이메일 패턴 일치 여부, 비밀번호 일치 여부를 확인한 후 각각 입력한 데이터를 서버로 전송한다.

아이디 중복 확인

---

유저 아이디 중복 확인 (클라이언트)

• 중복확인 버튼을 누르면 Http get 요청을 통해 username에 사용자가 입력한 id를 넣어 중복확인 서버 주소를 이용하여 보낸다.
• 서버에서 보내온 응답을 통해 아이디가 중복하는지 확인한다.
  
  

유저 아이디 중복 확인 (서버)

• 클라이언트에서 보낸 username을 확인해 볼 수 있다.
• LoginAuthentication.isExistUserName(getServletContext(), username); 를 통해 존재하는 유저인지 판단할 수 있다.
  

UsersDAO class에서 isExistUserName 함수 부분 코드

• 이미 존재하는 유저면 true를 리턴하고 존재안하는 유저면 false를 리턴한다.

회원가입 JSP 전체 코드(클라이언트)

이메일 형식인지 확인

---

자바스크립트를 통해 이메일 형식인지 확인하다.

• 이메일을 입력하고 다음 입력창으로 넘어가면 onchange='email_change()' 옵션을 통해 자동으로 위의 함수가 실행된다.
• 정규식을 통해 이메일 형식인지 확인한다.
  

비밀번호 일치 확인

---

자바스크립트를 통해 비밀번호가 서로 일치하는지 확인한다.

• 비밀번호를 입혁하고 다음 입력창으로 넘어가면 onchange='pwd_confirm()' 옵션을 통해 자동으로 위의 함수가 실행된다.
• 두개의 비밀번호를 비교하여 일치하면 성공이고 다르면 “일치안함” 메세지를 사용자에게 보여준다.
  
  

회원가입 버튼 누른 후

회원가입 (클라이언트)

---

회원가입 버튼 누른 후 동작 이벤트

• 회원정보를 전부 입력한 후 회원가입 버튼을 누르면 onclick="sign_up()" 옵션에 의해 위의 함수가 동작한다.
• 서버로 입력한 정보를 보내기전 id 중복 확인을 했는지, email 형식이 맞는지, 비밀번호가 서로 일치하는지 확인한다.
• 모두 통과가 되면 post 형식으로 입력한 데이터를 서버로 전달한다.
• 자바스크립트에서 post 형식으로 전송하는 방법은 없다. 따라서 form과 input 요소를 만들어주고 body에 추가한 후 post 전송을 해 줘야한다.

회원가입 (서버)

---

회원가입

• 서버는 클라이언트에서 post 전송한 아이디, 이메일, 비밀번호, 비밀번호 확인을 받는다.
• SignUp 클래스의 아이디, 이메일, 비밀번호, 비밀번호 확인를 인자로 받는 createUser 함수를 이용하여 유저를 만들어준다.
• 계정생성에 실패를 하면 fail 경고 창을 보여준다. 그 다음 회원가입 창으로 다시 돌아온다.
  
  
• 계정생성에 성공하면 success 창을 보여준다. 그 다음 로그인 창으로 이동한다.
  
  

전체코드

로그인 페이지 전체 코드

LoginAuthentication 클래스 코드

UsersDAO 클래스 코드

SignUp 클래스 코드

참고 사이트

---

• Email Validation in Java
• 자바스크립트에서 http 요청하기 - fetch에 대한 고찰 – yceffort
• JSP 아이디 중복 체크 기능 구현 동기 방식 (tistory.com)
• JavaScript에서 가장 잘 알려진 HTTP 요청 방법 (freecodecamp.org)
• 회원가입 창 만들기 (HTML, CSS, JS / 입력형식체크, 문자인증 기능추가)
• JavaScript - 이메일 유효성 검사 (회원가입) (tistory.com)
• location href를 POST로 보내는 방법
• CSS div 안보이게 하는 방법, div hidden, display none