[Spring] 로그인 페이지 만들기

로그인 폼

 

<main>
<div class="form-wrapper">
    <form id="loginForm">
        <h3>AC LEARN</h3>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="text" id="userId" name="userId" placeholder=" ID" required>
        </div>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="password" id="userPw" name="userPw" placeholder=" Password" required>
        </div>
        <div style="display:block; margin:20px auto;">
            <button type="button" id="btnLogin">LOGIN</button>
        </div>

        <div class="login_append">
        <span class="txt_find">
           <a href="/user/searchId.do" class="link_find">아이디 찾기</a>
            |
           <a href="/user/searchPw.do" class="link_find">비밀번호 찾기</a>
            |
           <a href="/user/join.do" class="link_find">회원가입</a>
         </span>
       </div>

    </form>
</div>
</main>

로그인 화면에 아이디 찾기, 비밀번호 찾기, 회원가입 페이지로 넘어갈 수 있게 구현

 

 

< Controller >

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserService userService;
    
	// 로그인 화면으로 이동
	@GetMapping("/login.do")
	public String loginView() {
		return "user/login";
	}
	// 로그인 처리
	@PostMapping("/login.do")
	@ResponseBody
	public String login(UserVO userVO, HttpSession session) {
		
		// 1. 아이디 체크
		int idCheck = userService.idCheck(userVO.getUserId());
		System.out.println(idCheck);
	   	 if(idCheck < 1) {
		   return "idFail";
	   	 } else {
		   UserVO loginUser = userService.login(userVO);
		   
		   // 2. 비밀번호 체크
		   if(loginUser == null) {
			   return "pwFail";
		   }
		   // 3. 로그인 성공
		   session.setAttribute("loginUser", loginUser);
		   return "loginSuccess";
	    }
	}
}

아이디가 1개 보다 적을 때(즉, 존재 하지 않을 때) 로그인 실패

 

 

< service >

public interface UserService {
	// 로그인
	UserVO login(UserVO userVO);	
}

 

< serviceimpl >

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UserDAO userDAO;

	// 로그인
	@Override
	public UserVO login(UserVO userVO) {
		return userDAO.login(userVO);
	}
}

 

< DAO >

@Repository
public class UserDAO {
	@Autowired
	private SqlSessionTemplate mybatis;
	

	// 로그인 
	public UserVO login(UserVO userVO) {
		return mybatis.selectOne("UserDAO.login",userVO);
	}

}

 

mapper.xml 파일에 쿼리문 작성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="UserDAO">
	<!-- 쿼리 작성 영역 -->
	<select id="login" parameterType="user" resultType="user">
	<![CDATA[
		SELECT USER_ID
			,USER_PW
			,USER_NAME
			,USER_NICKNAME
			,USER_BIRTH
			FROM AL_USER
			WHERE USER_ID = #{userId}
			  AND USER_PW = #{userPw}
			  AND USER_USE_YN = 'Y'
	]]>
	</select>
</mapper>

 

 

< script >

<script>  
  $(function() {
     //로그인 시 아이디나 비밀번호가 틀렸을 경우에 대비하여 폼 서브밋 대신 ajax로 처리
     $("#btnLogin").on("click", function() {
        $.ajax({
           url: "/user/login.do",
           type: "post",
           data: $("#loginForm").serialize(),
           success: function(obj) {
              console.log(obj);
              if(obj =="idFail") {
                 alert("존재하지 않는 아이디입니다.");
                 $("#userId").focus();
                 return;
              }

              if(obj == "pwFail") {
                 alert("비밀번호가 틀렸습니다. 비밀번호를 확인해주세요");
                 $("#userPw").focus();
                 return;
              }
              // 로그인 성공시 홈화면으로 처리
              location.href="/index.jsp";
           },
           error: function(e) {
              console.log(e);
           }
        });
     });
  });
 </script>

 

 

아이디가 존재하지 않을 때

 

비밀번호가 틀렸을 때