스프링 쇼핑몰 만들기 #3. 기본화면, 회원가입과 로그인

스프링 쇼핑몰 만들기

회원가입과 로그인 기능입니다. 회원가입간에 간단한 암호화를 이용하겠습니다.

공통으로 적용되는 header.jsp, nav.jsp, footer.jsp파일을 별도의 폴더에 생성합니다.

그리고 회원가입때 사용할 쿼리를 테스트해봅니다.

쿼리가 정상적으로 작동한다면 src/main/resourses → mappers → memberMapper.xml에 추가합니다.

<!-- 회원 가입 -->
<insert id="signup">
 insert into tbl_member(userId, userPass, userName, userPhon)
  values(#{userId}, #{userPass}, #{userName}, #{userPhon}) 
</insert>

다음은 DAO와 Service를 생성합니다.

MemberController를 추가하고, 회원가입용 메서드를 작성합니다.

@Inject
MemberService service;

@Autowired
BCryptPasswordEncoder passEncoder;
  
// 회원 가입 get
@RequestMapping(value = "/signup", method = RequestMethod.GET)
public void getSignup() throws Exception {
 logger.info("get signup");
}

// 회원 가입 post
@RequestMapping(value = "/signup", method = RequestMethod.POST)
public String postSignup(MemberVO vo) throws Exception {
 logger.info("post signup");
  
 String inputPass = vo.getUserPass();
 String pass = passEncoder.encode(inputPass);
 vo.setUserPass(pass);

 service.signup(vo);

 return "redirect:/";
}

입력받은 패스워드를 BCrypt로 암호화시키고 다시 MemberVO에 넘겨주는 방식입니다.

매퍼 → DAO → Service → Controller 순서로 작업되었고, 다음은 JSP입니다.

회원기능은 모두 member폴더에 통합하여 보관하며, 회원가입용 페이지인 signup.jsp를 작성합니다.

모든 jsp파일을 하나하나 입력하지말고 home.jsp를 복사한 뒤 <div id="container_box"> ~ </div> 내부만 수정하는 방식으로 합니다.

이런식으로 모든 페이지가 똑같이 구성되어있다면 추가/편집이 용이하기 때문에 매우 편리합니다. 더 나아가서 타일즈(tiles)를 이용하는 방법도 있는데, 타일즈는 나중에 사용하겠습니다.

<section id="content">
 <form role="form" method="post" autocomplete="off">
  <div class="input_area">
   <label for="userId">아이디</label>
   <input type="email" id="userId" name="userId" placeholder="example@email.com" required="required" />      
  </div>
  
  <div class="input_area">
   <label for="userPass">패스워드</label>
   <input type="password" id="userPass" name="userPass" required="required" />      
  </div>
  
  <div class="input_area">
   <label for="userName">닉네임</label>
   <input type="text" id="userName" name="userName" placeholder="닉네임을 입력해주세요" required="required" />      
  </div>
  
  <div class="input_area">
   <label for="userPhon">연락처</label>
   <input type="text" id="userPhon" name="userPhon" placeholder="연락처를 입력해주세요" required="required" />      
  </div>
  
  <button type="submit" id="signup_btn" name="signup_btn">회원가입</button>
  
 </form>   
</section>

아이디 인풋박스(input)의 타입을 이메일로하여서, 메일 형식으로만 받을 수 있도록 설정합니다. 마찬가지로 패스워드도 타입을 설정하여 *모양으로 표시하도록 하고, 모든 인풋박스에 필수입력(required) 설정을 해둡니다.

이렇게 jsp에서 미리 설정을 해두었지만, 나중에 한번 더 작업하겠습니다.

이제 프로젝트를 실행하고 회원가입 페이지로 이동해봅니다.

실제로 회원가입을 해보겠습니다.

인풋박스에 설정을 해두었기 때문에, 아이디는 이메일 형식으로만 입력할 수 있으며, 인풋박스가 공란이면 진행되지 않습니다. 아이디의 이메일이 실제로 존재하는지 확인할 방법은 없으며, 스페이스는 공란이 아니라 진행이 가능한 문제가 있습니다.

데이터베이스를 확인해보니, 회원가입이 잘 된것을 알 수 있습니다.

이번엔 로그인 쿼리를 매퍼에 추가합니다.

<!-- 로그인 -->
<select id="signin" resultType="com.kubg.domain.MemberVO">
 select
     userId, userName, userPass, userPhon, userAddr1, userAddr2, userAddr3, regiDate
 from
     tbl_member
 where userId = #{userId}
</select>

BCrypt 암호화는 매번 그 값이 바뀌기 때문에, 입력한 아이디를 이용해 패스워드를 가져온 뒤, 로그인할 때 입력한 패스워드와 데이터 베이스에 저장된 패스워드를 비교하는 방식으로 합니다.

DAO와 Service에 코드를 추가합니다.

Service에 로그아웃을 위한 메서드가 하나 더 있습니다.

다음은 Controller에 코드를 추가합니다.

// 로그인  get
@RequestMapping(value = "/signin", method = RequestMethod.GET)
public void getSignin() throws Exception {
 logger.info("get signin");
}

// 로그인 post
@RequestMapping(value = "/signin", method = RequestMethod.POST)
public String postSignin(MemberVO vo, HttpServletRequest req, RedirectAttributes rttr) throws Exception {
 logger.info("post signin");
   
 MemberVO login = service.signin(vo);  
 HttpSession session = req.getSession();
 
 boolean passMatch = passEncoder.matches(vo.getUserPass(), login.getUserPass());
 
 if(login != null && passMatch) {
  session.setAttribute("member", login);
 } else {
  session.setAttribute("member", null);
  rttr.addFlashAttribute("msg", false);
  return "redirect:/member/signin";
 }  
 
 return "redirect:/";
}
  
// 로그아웃
@RequestMapping(value = "/signout", method = RequestMethod.GET)
public String signout(HttpSession session) throws Exception {
 logger.info("get logout");
 
 service.signout(session);
   
 return "redirect:/";
}

passMatch 는 사용자가 입력한 패스워드와 데이터 베이스에 저장된 패스워드를 비교해서 동일하면 true, 그렇지않다면 false를 반환합니다.

login 에 값이 없는 경우는 아이디를 잘못입력한 경우이므로, 아이디나 패스워드가 모두 맞아야 session.setAttribute("member", login);코드가 실행됩니다.

아이디나 패스워드 중 하나라도 틀리다면 else { } 부의 코드가 실행되는데 session.setAttribute("member", null); 로 세션값을 제거하고 rttr.addFlashAttribute("msg", false); 는 특정 페이지로 이동될 때 msg의 값(false)를 부여합니다. 이때 특정 페이지는 return "redirect:/member/signin"; 가 됩니다.

nav.jsp의 코드를 추가합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<ul>
<c:if test="${member == null}">
 <li>
  <a href="/member/signin">로그인</a>
 </li>
 <li>
  <a href="/member/signup">회원가입</a>
 </li>
</c:if>
<c:if test="${member != null}">
 <li>
  ${member.userName}님 환영합니다.
 </li>
 <li>
  <a href="/member/signout">로그아웃</a>
 </li>
</c:if>
</ul>

조건문을 이용하여 로그인 안했을 때와 로그인할 때 나오는 목록이 달라지게 됩니다.

이제 signin.jsp를 작성합니다. signup.jsp를 복사해서 이름을 바꾸고, 내부 코드를 조금 수정합니다.

<section id="content">
 <form role="form" method="post" autocomplete="off">
  <div class="input_area">
   <label for="userId">아이디</label>
   <input type="email" id="userId" name="userId" required="required" />      
  </div>
  
  <div class="input_area">
   <label for="userPass">패스워드</label>
   <input type="password" id="userPass" name="userPass" required="required" />      
  </div>
       
  <button type="submit" id="signin_btn" name="signin_btn">로그인</button>
  
  <c:if test="${msg == false}">
   <p style="color:#f00;">로그인에 실패했습니다.</p>
  </c:if>
  
 </form>   
</section>

조건문을 이용하여, msg의 값이 false라면 실패 메시지가 출력되도록합니다.

제대로 작동되는지 확인하기 위해, 프로젝트를 실행하고 로그인해봅니다.

로그인하게되면 회원가입 때 입력했던 닉네임이 표시되고, 로그아웃 링크도 보입니다. 로그아웃은 미리 코드를 입력해놨기 때문에 지금 클릭해도 잘 작동됩니다.

로그인간에 아이디 또는 패스워드가 틀렸을 경우 메시지가 출력됩니다.

로그인간에 아이디가 잘못되었을 경우(=데이터 베이스에 없는 아이디를 입력한 경우), Null값을 반환하게되어 최종적으로 500 에러가 발생합니다.

로그인 부분에 대해서는 차후 다른 게시물로 보완하겠습니다.