본문 바로가기
2023.11.21-2024.05.31

20240305 스프링(쿠키-아이디 자동로그인, 세션)

sukgi094 2024. 3. 5. 12:47

쿠키와 세션

https://interconnection.tistory.com/74

 

쿠키와 세션 개념

노션 페이지(아래 내용과 동일) 개요 쿠키와 세션은 개발자 말고도 인터넷 사용자라면 누구나 많이 들어본 단어입니다. 하지만 개념에 대해서는 많은 사람들이 헷갈려 하기에 쉽고 간단하게 정

interconnection.tistory.com

  세션 쿠키
사용예 로그인 쇼핑정보
저장위치 서버 브라우저
속도 느림 빠름
보안 높음 낮음

 

세션과 쿠키의 차이점

 

쿠키는 이름, 값, 유효시간, 도메인, 경로등을 저장합니다.

클라이너트에 총 300개의 쿠키를 저장할 수 있습니다.

쿠키는 도메인당 20개만 가질 수 있습니다.

쿠키 크기는 4096byte(4KB)까지만 저장할 수 있습니다.

 

쿠키/세션은 캐쉬와 다릅니다.

https://dev-coco.tistory.com/61

 

쿠키(Cookie)와 세션(Session)의 차이 (+캐시(Cache))

쿠키와 세션을 사용하는 이유? HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다. HTTP 프로토콜의 특징 1. Connectionless 프로토콜 (비연결 지향) 클라이언트가 서버에 요청(Request)을 했을

dev-coco.tistory.com

 

어딘지 모르겠지만 누군가 알려준 정보

 

 

자동로그인

 

login.jsp >체크박스로 아이디저장 만들기(쿠키에 저장)

<div class="mb-3 row">
	<div class="col-sm-12 text-start">
		<input type="checkbox" class="saveID" id="saveID">
		<label for="saveID">아이디 저장</label>
	</div>
</div>

 

 

 

아이디와 패스워드가 비어있지 않고, 아이디저장(체크박스)에 체크가 되어있는 사람 -> 아이디 저장되게 만들기

form 태크 부분 스크립트 하나도 안짜서 이것 먼저 만들러간다. 

<form action="./login" method="post">

 

 

 

 

스크립트로 체크를 할거라서 버튼에 체크를 추가해 준다. 

<button type="submit" class="btn btn-primary check">로그인</button>

 

 

 

 

헤드안에 스크립트 만들기. =</head> 위에 만들기

<script type="text/javascript">
$(function(){
	 alert("구동하려면 제이쿼리가 필요합니다. ")
});
</script>

제이쿼리가 없어서 구동이 안된다.

 

 

 

제이쿼리 3.7.1 버전

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==
" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

제이쿼리 넣었을때 구동되는 스크립트

 

 

 

id칸, pw칸 검사

스크립트만들기

<script type="text/javascript">
$(function(){
	// alert("구동하려면 제이쿼리가 필요합니다. ")/* 제이쿼리가 아래쪽에 있어서 구동이 안돼 */
	//아이디칸, pw칸 검사
	$('.check').click(function(){
        let id = $('#id').val();
        let pw = $('#pw').val();

		if(id == ''|| id.length < 3){
			Swal.fire("", "올바른 아이디를 입력하세요.","warning");
			//alert('아이디 문제');
			$('#id').focus();
			return false;
		}	
		if(pw == ''|| pw.length < 3){
			Swal.fire("", "올바른 비밀번호를 입력하세요.","warning");
			//alert('비밀번호 문제');
			$('#pw').focus();
			return false;
		}
		//쿠키에 id저장하기
		//if문으로 사용자가 아이디 저장 눌렀어?
		if($('#saveID').is(':checked')){
			alert("아이디 저장을 눌렀어요");
		}		
		$('#loginForm').submit();
	});

});
</script>

 

 

 

버튼 수정

<button type="button" class="btn btn-primary check">로그인</button>

 

 

 

form id 추가

<form action="./login" method="post" id="loginForm">

 

 

$('.check').click(function(){ 안에 $('#loginForm').submit(); 추가 >실제로 로그인 된다.

 

 

 

if문으로 사용자가 아이디 저장 눌렀어? 만들기

	//쿠키에 id저장하기
		//if문으로 사용자가 아이디 저장 눌렀어?
		if($('#saveID').is(':checked')){
			alert("아이디 저장을 눌렀어요");

		$('#loginForm').submit();
	});

이렇게 나오면 된다.

 

 

내가 했을때 나온거

 

 

 

 

ID불러와서 저장하기

>setCookie("userInputId" , id, 60);

		//쿠키에 id저장하기
		//if문으로 사용자가 아이디 저장 눌렀어?
		if($('#saveID').is(':checked')){
			//alert("아이디 저장을 눌렀어요");
			//ID불러와서 저장하기
			setCookie("userInputId" , id, 60); //쿠키 저장하는 함수
		}		
		$('#loginForm').submit();
	});

 

 

 

 

쿠키 저장하는 함수 (쿠키이름, 값, 기한)

	//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
	function setCookie(cookieName, valuem exdays){
		
	}

 

 

 

 

오늘 날짜 뽑기

	//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
	function setCookie(cookieName, value, exdays){
		//오늘 날짜 뽑기
		let date = new Date();
		alert(date);
		
	}

 

내 거

 

 

 

60더한 날짜 출력하기

	//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
	function setCookie(cookieName, value, exdays){
		//오늘 날짜 뽑기
		let date = new Date();
		alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
		
	}

> 5+60 =560으로 나옴

5+60

 

 

 

 

 

정확한 값 계산

	//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
	function setCookie(cookieName, value, exdays){
		//오늘 날짜 뽑기
		let date = new Date();
		//alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
		alert(date.setDate(date.getDate()));
		alert(date.setDate(date.getDate() + exdays));
		
	}

 

 

 

 

쿠키는=value(사용자가 입력한 아이디)

 

	//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
	function setCookie(cookieName, value, exdays){
		//오늘 날짜 뽑기
		let date = new Date();
		//alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
		//alert(date.setDate(date.getDate()));
		//alert(date.setDate(date.getDate() + exdays));
		doucument.cookie = cookieName + "=" + value;
		
	}

 

 

 

 

 

여기까지 했는데 로그인 카운터가 갑자기 되지 않음

 

	//쿠키값 가져오기(가져올 쿠키 이름)
	 function getCookie(cookieName){
        	let x, y;
        	let val = document.cookie.split(';');
        	for(let i = 0; i < val.length; i++){
        		x = val[i].substr(0, val[i].indexOf('='));//저장한 쿠키이름
        		y = val[i].substr(val[i].indexOf('=') + 1);//쿠키 값
        		x = x.replace(/^\s+|\s+$/g, ''); // 앞과 뒤의 공백 제거하기
        		if(x == cookieName){
        			return y;
        		}
        	}
        }

 

 

 

쿠키 값 가져오기

$(function(){
	
	//cookie 가져오기 = getCookie
	let userInputId = getCookie('userInputId');
	
	}

 

 

내가 확인한 창

 

 

$(function(){
	
	//cookie 가져오기 = getCookie
	let userInputId = getCookie('userInputId');
	 $('#id').val(userInputId);
		
	}

 

 

 

if문 만들어주기

	//쿠키값 가져오기(가져올 쿠키 이름)
	 function getCookie(cookieName){
        	let x, y;
        	let val = document.cookie.split(';');
        	for(let i = 0; i < val.length; i++){
        		x = val[i].substr(0, val[i].indexOf('='));//저장한 쿠키이름
        		y = val[i].substr(val[i].indexOf('=') + 1);//쿠키 값
        		if(x == cookieName){
        			return y;
        		}
        	}
        }

 

 

 

들어가면 아이디가 되어있음

 

 

 

아이디 저장을 클릭했는지 저장합니다. 

사용자가 id 저장을 누르지 않음

 

아이디 저장을 클릭했는지 저장합니다.  > setCookie('setCookieYN','Y', 60); 추가

		//쿠키에 id저장하기
		//if문으로 사용자가 아이디 저장 눌렀어?
        		if($('#saveID').is(':checked')){
        			//ID불러와서 저장하기
        			setCookie('setCookieYN', 'Y', 60); // 아이디 저장을 클릭했는지 저장합니다.
        			setCookie("userInputId", id, 60);  //쿠키 저장하는 함수
        		} else {
        			//사용자가 id 저장을 누르지 않음. = 저장 안 함.
        			delCookie('userInputId');

        		}
        				
        		$('#loginForm').submit();//form 실행
        	});
        });

 

 

 

 

date.setDate(date.getDate() +exdays);
let value2 = escape(value) + "; expires=" + date.toGMTString(); 추가

	//쿠키 저장하는 함수 (쿠키이름, 값, 기한)
	  function setCookie(cookieName, value, exdays){
		//오늘 날짜 뽑기
		let date = new Date();
		//alert("오늘날짜:"+date.getDate() + "/60더한 날짜 : " +date.getDate()+exdays);
		//alert(date.setDate(date.getDate()));
		//alert(date.setDate(date.getDate() + exdays));
		date.setDate(date.getDate() + exdays);
    	let value2 = escape(value) + "; expires=" + date.toGMTString();
    	//escape() 아스키문자에 해당하지 않는 문자들은 모두 유니코드 형식으로 변환
    	document.cookie = cookieName + "=" + value2;
    }

 

 

 

else 지우기

//cookie 가져오기 = getCookie
let userInputId = getCookie("userInputId");
let setCookieYN = getCookie('setCookieYN');

if(setCookieYN == 'Y'){
$('#id').val(userInputId);
$('#saveID').prop("checked","true")
}

 

 

 

 

유저인풋아이디 앞뒤로 생기는 공백 제거>x = x.replace(/^\s+|\s+$/g,''); 추가

		for(let i = 0; i< val.length; i++){
			x = val[i].substr(0, val[i].indexOf('='));//저장한 쿠키이름
			y = val[i].substr(val[i].indexOf('=')+1);//쿠키값
			x = x.replace(/^\s+|\s+$/g,'');//유저인풋아이디 앞뒤로 생기는 공백 제거
			if(x == cookieName){
				return y;
			}

 

 

아이디 저장을 클릭하면 저장.

사용자가 id 저장을 누르지 않음 = 저장 안 함.

		//쿠키에 id저장하기
		//if문으로 사용자가 아이디 저장 눌렀어?
        		if($('#saveID').is(':checked')){
        			//ID불러와서 저장하기
        			setCookie('setCookieYN', 'Y', 60); // 아이디 저장을 클릭했는지 저장합니다.
        			setCookie("userInputId", id, 60);  //쿠키 저장하는 함수
        		} else {
        			//사용자가 id 저장을 누르지 않음. = 저장 안 함.
        			delCookie('userInputId');
        			delCookie('setCookieYN');
        		}
        				
        		$('#loginForm').submit();//form 실행
        	});
        });

 

 

 

삭제하기(삭제할 쿠키 이름) 스크립트

>아이디저장 체크 안하면 삭제된다.

	//삭제하기(삭제할 쿠키 이름)
	function delCookie(cookieName){
		let date = new Date();
		date.setDate(date.getDate()-1);
		document.cookie = cookieName + "=; expires="+date.toGMTString();
		document.cookie = cookieName + "=; max-age=0";
		
	}

 

	//삭제하기(삭제할 쿠키 이름)
	function delCookie(cookieName){
		//let date = new Date();
		//date.setDate(date.getDate()-1);
		//document.cookie = cookieName + "=; expires="+date.toGMTString();
		document.cookie = cookieName + "=; max-age=0";
		
	}

 

 

체크박스에 아이디 저장 해제하면 아래처럼 쿠키에 userInputId 없어진다.

 

 

 

 

아이피 잡아주기> 아이피를 검색하면 넘어가도록

화면에 아이피 보여주기

어드민매퍼>ip 있음

 

 

 

 

admin/board

 

 

 

admin-mapper

<select id="boardList" parameterType="searchDTO" resultType="boardDTO">
      SELECT b.board_no, b.board_title, m.mname, m.mid,
      if(date_format(current_timestamp(),'%Y-%m-%d') = 
         date_format(b.board_date,'%Y-%m-%d'),date_format(b.board_date,'%h:%i'),
         date_format(b.board_date,'%m-%d')) AS board_date, b.board_ip, b.board_del
      FROM board b JOIN member m ON b.mno=m.mno
      <where>
         <if test="searchTitle == 1">
            b.board_title LIKE CONCAT('%', #{search}, '%')
         </if>
         <if test="searchTitle == 2">
            b.board_content LIKE CONCAT('%', #{search}, '%')
         </if>
         <if test="searchTitle == 3">
            m.mname LIKE CONCAT('%', #{search}, '%')
         </if>
      </where>
      ORDER BY b.board_no DESC 
      LIMIT #{pageNo}, #{recordCountPerPage};
   </select>

 

 

 

<thead>, <tbody> 안에 ip 추가 하고, 너비조정

<thead>
	<tr class="row">
		<th class="col-1 text-center">번호</th>
		<th class="col-4 text-center">제목</th>
		<th class="col-2 text-center">글쓴이</th>
		<th class="col-1 text-center">날짜</th>
		<th class="col-2 text-center">ip</th>
		<th class="col-1 text-center">읽음</th>
		<th class="col-1 text-center">보기</th>
	</tr>
	</thead>
<tbody>
	<c:forEach items="${list }" var="row">
		<tr class="row<c:if test="${row.board_del eq 0}"> bg-dark</c:if>"">
			<td class="col-1 text-center">${row.board_no }</td>
            <td class="col-4">${row.board_title }</td>
			<td class="col-2"><a href="./board?searchTitle=3&search=${row.mname }">${row.mname }</a></td>
			<td class="col-1 text-center">${row.board_date }</td>
			<td class="col-2 text-center">${row.board_ip }</td>
			<td class="col-1 text-center">${row.board_count }</td>
			<td class="col-1 text-center">
		<c:choose>
		<c:when test="${row.board_del eq 1 }">
			<i class="fa fa-eye" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
		</c:when>
		<c:otherwise>
			<i class="fa fa-eye-slash" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
		</c:otherwise>
		</c:choose>
			</td>
			</tr>
		</c:forEach>
</tbody>

 

ip검색 넣어주기

<div class="input-group col-6">
	<select name="searchTitle" id="searchTitle" class="form-control col-3">
		<option value="1" <c:if test="${searchTitle eq 1 }">selected="selected"</c:if>>제목 검색</option>
		<option value="2" <c:if test="${searchTitle eq 2 }">selected="selected"</c:if>>본문 검색</option>
		<option value="3" <c:if test="${searchTitle eq 3 }">selected="selected"</c:if>>작성자 검색</option>
		<option value="3" <c:if test="${searchTitle eq 3 }">selected="selected"</c:if>>ip 검색</option>
	</select>

 

 

 

<tbody> 안에 바꾸기

<tbody>
	<c:forEach items="${list }" var="row">
		<tr class="row<c:if test="${row.board_del eq 0}"> bg-dark</c:if>"">
			<td class="col-1 text-center">${row.board_no }</td>
			<td class="col-4" onclick="detail(${row.board_no })">
			${row.board_title }</td>
			<td class="col-2"><a href="./board?searchTitle=3&search=${row.mname }">${row.mname }</a></td>
			<td class="col-1 text-center">${row.board_date }</td>
			<td class="col-2 text-center">
			<a href="./board?searchTitle=4&search=${row.board_ip }">${row.board_ip }</a>
			</td>
			<td class="col-1 text-center">${row.board_count }</td>
			<td class="col-1 text-center">
	<c:choose>
		<c:when test="${row.board_del eq 1 }">
			<i class="fa fa-eye" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
		</c:when>
		<c:otherwise>
			<i class="fa fa-eye-slash" aria-hidden="true" onclick="postDel(${row.board_no })"></i>
		</c:otherwise>
		</c:choose>

 

 

admin-mapper

totalRecordCount>  searchTitle == 4 추가

<select id="boardList" parameterType="searchDTO" resultType="boardDTO">
      SELECT b.board_no, b.board_title, m.mname, m.mid,
      if(date_format(current_timestamp(),'%Y-%m-%d') = 
         date_format(b.board_date,'%Y-%m-%d'),date_format(b.board_date,'%h:%i'),
         date_format(b.board_date,'%m-%d')) AS board_date, b.board_ip, b.board_del
      FROM board b JOIN member m ON b.mno=m.mno
      <where>
         <if test="searchTitle == 1">
            b.board_title LIKE CONCAT('%', #{search}, '%')
         </if>
         <if test="searchTitle == 2">
            b.board_content LIKE CONCAT('%', #{search}, '%')
         </if>
         <if test="searchTitle == 3">
            m.mname LIKE CONCAT('%', #{search}, '%')
         </if>
         <if test="searchTitle == 4">
           b.board_ip = #{search}
         </if>
      </where>
      ORDER BY b.board_no DESC 
      LIMIT #{pageNo}, #{recordCountPerPage};
  </select>

 

 

 

totalRecordCount> searchTitle == 4 추가 

<select id="totalRecordCount" parameterType="String" resultType="Integer">
	SELECT COUNT(*)
	FROM board b JOIN member m ON b.mno=m.mno
	<where>
		<if test="searchTitle == 1">
			b.board_title LIKE CONCAT('%', #{search}, '%')
		</if>
		<if test="searchTitle == 2">
			b.board_content LIKE CONCAT('%', #{search}, '%')
		</if>
		<if test="searchTitle == 3">
			m.mname LIKE CONCAT('%', #{search}, '%')
		</if>
		<if test="searchTitle == 4">
        	b.board_ip = #{search}
       	</if>
	</where>
</select>

 

 

 

 

 

 

페이징할때 또 안됨> jsp에서 서치타이틀 같이 보내주기

    function linkPage(pageNo){
    	location.href = "./board?pageNo="+pageNo+"&perPage=${perPage}&searchTitle=${searchTitle}&search=${search}";
    }

저작자표시

'2023.11.21-2024.05.31' 카테고리의 다른 글

20240307 전자정부(프로젝트 만들기, board, detail)  (0) 2024.03.07
20240305 스프링(관리자 페이지-상세보기 창으로 열기)  (0) 2024.03.05
20240304 스프링(페이징, 검색, 게시글 수,searchTitle,postDel)  (0) 2024.03.04
20240304 스프링(관리자페이지-adminboard, 페이징, 검색, 게시글 수 )  (0) 2024.03.04
20240229 스프링(아이디중복체크(idCheck), 페이징, 검색(search )  (3) 2024.02.29

'2023.11.21-2024.05.31' Related Articles

티스토리툴바