SPRING [#1.5] 로그인 기능 구현(페이지, 메서드, 데이터 처리)

 

 

포스팅 해야 할 것

 

아이디, 비번 -> 서버 제출

DB에 아이디, 비번 일치 확인

일치시 메인 페이지 

불일치시 로그인 페이지 

 

 

순서 

 

1. 로그인 페이지(login.jsp) 아이디, 비번 전송

2. 로그인 처리 메서드 작성(LoginController.java)

 

이후

 

1. login1.jsp (로그인 실패)

2. main1.jsp (로그인 성공)

 

 

 

로그인 페이지(log.jsp) 아이디, 비밀번호 전송

 

 

로직은 회원가입과 같음.

아이디, 비밀번호 항목란에 데이터를 입력하고 로그인 버튼을 누르면 데이터가 서버에 전송됨과 함께 로그인 기능을 수행하는 메서드를 요청하도록 작성

 

 

1. email, password 속성 추가 

 

 

 

아이디와 비밀번호를 입력해야 할 div 태그에 속성추가 

로그인 페이지에서 요청할 로그인 메서드에 데이터를 전달하기 위해 파라미터로 JoinDTO 클래스를 이용할 것. 따라서 JoinDTO에서 정의한 변수명과 반드시 속성명 name이 반드시 동일해야 함

 

 

2. 로그인 버튼 작동 메서드 추가

 

 

jquery 사용을 위해 <script>태그를 추가해준다

 

 

 

<!-- JS -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

 

 

 

body태그 내부 제일 아래에 script 태그를 추가 해준 후,

회원가입 클릭 시 회원가입 기능 작동을 위한 jquery 코드를 추가.

 

코드의 의미는 '가입하기 버튼'(<div class="login_btn_box">로그인</div>)을

클릭하였을때 (url 경로)이 추가되고, 서버에 제출이 된다는 의미.(제출 방식 post)

 

 

<script>	

$(window).load(function() { 
	$('.login_btn_box').click(function(){
		ajax_login();								
	});
});

function ajax_login(){

	var email = $('#email').val();
	var password = $('#password').val();
	// email, password  NULL 인 것 잡아야함.(22.08.11)
	
	$.LoadingOverlay("show");
	$.ajax({
        type : "POST",            // HTTP method type(GET, POST) 형식이다.
        url : "/login1/ajax_login",      // 컨트롤러에서 대기중인 URL 주소이다.
        data : 'join.email='+email+'&join.password='+password,            // Json 형식의 데이터이다.
        success : function(res){ // 비동기통신의 성공일경우 success콜백으로 들어옵니다. 'res'는 응답받은 데이터이다.
        	var master = $.parseJSON(res);  
        	if(master.join.user_count == 1){
        		alert('로그인이 정상 처리 되었습니다.');
         		window.location = '/1';
         	}else{
        		alert('아이디 비번을 확인 해 주세요');
        	} 
        },
        error : function(XMLHttpRequest, textStatus, errorThrown){ // 비동기 통신이 실패할경우 error 콜백으로 들어옵니다.
            alert("통신 실패.")
        }
    });
		$.LoadingOverlay("hide");
}

</script>

 

 

로그인 정보들을 입력하고 '로그인' 버튼을 클릭,

정상적으로 완료가되었다면 버튼 작동 

 

 

 

 

 

 

 

 

 

로그인 처리 메서드 작성(Login1Controller.java)

 

 

Login1Controller.java 에 로그인 기능을 수행하는 메서드를 작성. 파라미터로는

HttpServletRequest, HttpServletResponse, MasterDTO를 사용.

 

 

MasterDTO는 데이터를 전달받기 위해, HttpServletRequest는 로그인 성공 시 회원 정보를 저장하기 위해 사용

 

 

	// 이메일과 비번 다 입력하고 로그인하기 버튼을 누르면 수행할 내용들..
	@RequestMapping(value = "/ajax_login", method = RequestMethod.POST, produces = "application/text; charset=utf8")
	public @ResponseBody String ajax_login(HttpServletRequest req, HttpServletResponse res, Master master) {			
		
		// 로그인페이지에서 적은 정보가 기존에 우리 db에 있는 회원정보인지 가져와서 확인하는 작업을 수행하고, 
		// db에 있는 정보의 유저 count가 1이라면 로그인을 성공시켜준다.
		master.getJoin().setUser_count(login1Service.select_user_count(master.getJoin()));
		
		// 세션 처리 
		if(master.getJoin().getUser_count() == 1) {
			HttpSession session = req.getSession();
			session.setAttribute("join", master.getJoin());
		}
		return new Gson().toJson(master);
	}

 

 

 

 

 

 

로그인 실패 -> Login1.jsp (alert창)

 

 로그인 페이지는 서버로부터 받은 result 변수에 담긴 데이터를 활용하여 로그인에 실패하였다는 경고 문구가 뜨도록 만들 것입니다.

 

 먼저 경고문구를 포함한 ajax 코드를 추가합니다. jquery를 통해 div 태그 안에 login_btn_box라는 id를 주어 호출 합니다.

 

 

// 유효성 완료 회원가입
	var email = $('#email').val();
	var password = $('#password').val();
	// email, password  NULL 인 것 잡아야함.(22.08.11)
	
	$.LoadingOverlay("show");
	$.ajax({
        type : "POST",            // HTTP method type(GET, POST) 형식이다.
        url : "/login1/ajax_login",      // 컨트롤러에서 대기중인 URL 주소이다.
        data : 'join.email='+email+'&join.password='+password,            // Json 형식의 데이터이다.
        success : function(res){ // 비동기통신의 성공일경우 success콜백으로 들어옵니다. 'res'는 응답받은 데이터이다.
        	var master = $.parseJSON(res);  
        	if(master.join.user_count == 1){
        		alert('로그인이 정상 처리 되었습니다.');
         		window.location = '/1';
         	}else{
        		alert('아이디 비번을 확인 해 주세요');
        	} 
        },

 

 

 

 

 

로그인 성공 -> main1.jsp

 

 

마찬가지로 로그인 성공을 위한 ajax 코드를 추가합니다. jquery를 통해 div 태그 안에 login_btn_box라는 id를 주어 호출 합니다.

 

 

$.LoadingOverlay("show");
	$.ajax({
        type : "POST",            // HTTP method type(GET, POST) 형식이다.
        url : "/login1/ajax_login",      // 컨트롤러에서 대기중인 URL 주소이다.
        data : 'join.email='+email+'&join.password='+password,            // Json 형식의 데이터이다.
        success : function(res){ // 비동기통신의 성공일경우 success콜백으로 들어옵니다. 'res'는 응답받은 데이터이다.
        	var master = $.parseJSON(res);  
        	if(master.join.user_count == 1){
        		alert('로그인이 정상 처리 되었습니다.');
         		window.location = '/1';
 }

 

 

if 태그를 통해 로그인이 성공시 BaseController(1)로 리턴 합니다.

 

 

public class BaseController1 {
	//private Logger logger = Logger.getLogger(BaseController1.class);

	// BaseController가 필요한 이유 
	// 로그인버튼 누르고 우리가 로그인을 성공했다면 그 상태를 세션(session)으로 저장하고, 로그인된 상태를(ajax_isLogin) header가 알고있어야만
	// 로그인버튼이 사라지고 로그아웃버튼만 헤더에 남게됩니다.
	@RequestMapping(value = "/1")
	public String index(HttpServletRequest req, HttpServletResponse res, Master master) throws Exception {		
		return "redirect:/main1/index";    // 그냥 깡통페이지 --> return "main1/index" 로 코드 작성하게되면 로그인 했다는 정보를 master에 담았지만 header에 전달을 못하는 상황
	}
}

 

 

 

 

정리

 

1. log.jsp 에 데이터 입력 후 '로그인' 버튼 클릭

 

2. Controller ajax_islogin (POST 컨트롤러 실행) -> 로그인 메서드 호출 @Service를 이용해 

 

3. Login1Service(인터페이스) 들어가 메서드 호출 -> Impl

 

4. DAO 에서 (Join join) 

 

5. XML에서 id 실행

 

6. DB에서 쿼리 실행 

 

7. log.jsp에서 ajax 검사 실행  

 

 

---

 

Appendix