Cookie / 로그인 전,후 연결/ cookie 정보 저장,삭제

easyliving·2022년 12월 30일

FRONT_END (JAVA_SCRIPT)

목록 보기
18/55

mainpage

		1. mainpage에서는 로그인 후/전의 정보가 달라야한다. 
       

                로그인이 후 페이지 정보이다. 
                COOKIE를 가져와서 로그인하고 있는 cookieId(NAME값)과 
                모든 쿠키의 정보를 비교해서(FOR/IF/int check사용)
                cookieId값이 있으면, 로그인 후 정보를 띄운다.
                
                +)int check에 1값을 넣어줘서 나중에 로그인 전 페이지를 띄울 때
                사용한다.
                

				만약 int check 값이 0이라면, 로그인 전 페이지를 띄워준다.

main-CODE


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8"); %>    
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>쿠키 로그인</title>
		<style type="text/css">
		a:link{text-decoration: none;}
		a:link,a:visited,a:hover,a:active{color:#000;}
		</style>
	</head>
	<body>
		<h2>메인페이지</h2>
		<ul>
			<%
				Cookie[] getCookie =request.getCookies();
				int check=0;
				if(getCookie !=null){
					for(int i=0;i<getCookie.length;i++){
						if(getCookie[i].getName().equals("cookieId")){
							check=1;
			%>
						<!-- 로그인 후 -->
					<h3>이지리빙 님 환영합니다.</h3>
					<li>회원정보수정</li>
					<li><a href="doNaver_logout.jsp">로그아웃</a></li>
			<% 				
						}//if
					}//for
					
				}//if 
				if(check==0){					
			%>
						<!-- 로그인 전 -->
					<h3>로그인을 하셔야 게시판 글쓰기가 가능합니다.</h3>
					<li>회원가입</li>
					<li><a href="naver_login.jsp">로그인</a></li>
			<%
				}
			%>
			
			
			
			<li>자유게시판</li>			
		</ul>
	</body>
</html>

naver_login (로그인) 페이지

		1. css는 생략하고 중요한 부분만 코드를 올리겠다.
		2. 제이쿼리를 사용할 것이기 때문에 제이쿼리 최신 주소를 붙여줘야한다.
		3. function frmCheck()에서는 아이디 길이만 check하는 것이지 로그인이 가능한지 불가능한지 
        CHECK하는 function이 아니다. frm.submit();을 통해서 모든 정보를 
        "doNaver_login.jsp"로 보낸 후 거기서 로그인이 가능한지 불가능한지를 check할 예정이다. 
        (심지어 길이가 짧아도 "doNaver_login.jsp"로 입력정보를 보낸다.)

login-CODE

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    	function frmCheck(){
    		if($("#uId").val().length<2){
    			alert("아이디를 입력하셔야 로그인이 가능합니다.");
    		}
    		frm.submit();
    	}
    </script>


</head>
<body>
           <form action="doNaver_login.jsp" method="post" name="frm">
                <fieldset style="border: 0">
                    <div class="id_area">
                        <div class="input_row" id="id_area">
                            <span class="input_box">
                                <input type="text" name="id" id="uId" class="int" placeholder="아이디">
                            </span>
                        </div>
                    </div>
                    <div class="pw_area">
                        <div class="input_row" id="pw_area">
                            <span class="input_box">
                                <input type="text" name="pw" id="uPw" class="int" placeholder="비밀번호">
                            </span>
                        </div>
                    </div>
                    <input class="btn_login" type="button" onclick="frmCheck()" value="로그인">
                </fieldset>
            </form>
</body>
</html>

doNaver_login

			1.로그인 정보를 쿠키로 받아오는 코드이다.
            2.naver_login.jsp로부터 파일을 받아오기 때문에,request로 id와 pw정보를 받아온다. 
            (사실상 쿠키로 pw같은 개인정보를 받아서 쓸 일은 없다.)
            3.쿠키 객체를 만들어줘서 정보를 담아준다. 
            "cookieId",id (name,value)
            "cookieNname","이지리빙" (name,value)
            이 코드에서 이 두가지 정보를 쿠키 객체에 담아주었다.
            4.쿠키이름.setMaxAge로 저장 시간을 지정해주었다.
            5.response.addCookie(쿠키이름)으로 쿠키 관련 정보를 다른 페이지에서
            받아 쓸 수 있게 만들어준다.
            6.로그인하면 MAINPAGE로 이동하게 만들고
            7.정보가 일치하지 않으면, "naver_login.jsp" 로 보내서 다시 로그인 할 수 있게 만들었다.
            8.이 페이지는 MAIN과 LOGIN페이지 사이에 있지만 웹상으로는 보이지 않는 페이지이라 할 수 있다.

login-cookie-CODE

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8"); %>    
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>doNaver_login</title>
	</head>
	<body>
		<%
			String id=request.getParameter("id");
		    String pw=request.getParameter("pw");		    
		    if(id.equals("admin") && pw.equals("1111")){
		    	//쿠키 또는 섹션에 저장 (아이디,닉네임)
		    	Cookie loginCookie=new Cookie("cookieId",id);
		    	Cookie loginNickName=new Cookie("cookieNname","easyliving");
		    	loginCookie.setMaxAge(60*60);
		    	loginNickName.setMaxAge(60*60);
		    	response.addCookie(loginCookie);
		    	response.addCookie(loginNickName);    	
		%>    	
		    	<!-- html태그 가능  -->
		    	<script>alert("로그인이 되었습니다."); location.href="jsp1227_01.jsp";</script>
		<%}else{ //아이디 또는 패스워드가 틀린경우%>	
			   <!-- html태그 가능  -->
				<script type="text/javascript">
					alert("아이디 또는 패스워드가 일치하지 않습니다. 다시 로그인하세요");
					location.href="naver_login.jsp";
				</script>
		<%}%>
	</body>
</html>

doNaver_logout

	1.쿠키 값을 받아와 getCookie객체에 넣어준다.
    2.for/if문을 통해서 id와 닉네임을 체크해서 해당 값의 
    쿠키 유지 시간을 0으로 지정해줘서 삭제해준다.
    3.response.addCookie()를 통해서 업데이트 된 쿠키의 정보를 저장해준다.
    4.<script>안에서는 로그아웃 메세지를 띄워주고 mainpage로 이동시켜준다.

logout-cookie-CODE


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>doNaver_logout</title>
	</head>
	<body>
		<%
			Cookie[] getCookie=request.getCookies();
			for(int i=0;i<getCookie.length;i++){
				if(getCookie[i].getName().equals("cookieId") || getCookie[i].getName().equals("cookieNname")){
					getCookie[i].setMaxAge(0);
					response.addCookie(getCookie[i]);
				}
			}
		%>
		<script type="text/javascript">
			alert("로그아웃이 되었습니다.");
			location.href="jsp1227_01.jsp";
		</script>
	</body>
</html>
profile
가끔져요

0개의 댓글