53일차 내용 정리
JAVA & JSP & JavaScript
로그인 정보 저장
- login.jsp 코드 추가
<%
//GET 방식 파라미터 url 이라는 이름으로 전달되는 값이 있는지 읽어와 본다
String url=request.getParameter("url");
//만일 넘어오는 값이 없다면
if(url==null){
//로그인 후에 인덱스 페이지로 갈수 있도록 한다.
String cPath=request.getContextPath();
url=cPath+"/index.jsp";
}
%>html,
body {
height: 100%;
}
.form-signin {
max-width: 330px;
padding: 1rem;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}<body class="d-flex align-items-center py-4 bg-body-tertiary">
<main class="form-signin w-100 m-auto">
<form action="login.jsp" method="post">
<%-- 로그인 성공 후에 이동할 url 정보를 추가로 form 전송되도록 한다 --%>
<input type="hidden" name="url" value="<%=url %>"/>
<h1 class="h3 mb-3 fw-normal">로그인 양식</h1>
<div class="form-floating">
<input type="text" class="form-control" id="userName" name="userName" placeholder="아이디 입력..." >
<label for="userName">아이디</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" name="password" placeholder="비밀번호 입력..." >
<label for="password">비밀번호</label>
</div>
<div class="form-check text-start my-3">
<input class="form-check-input" type="checkbox" name="isSave" value="yes" id="flexCheckDefault" >
<label class="form-check-label" for="flexCheckDefault">
로그인 정보 저장
</label>
</div>
<button class="btn btn-primary w-100 py-2" type="submit">로그인</button>
<p class="mt-5 mb-3 text-body-secondary">© 2017–2023</p>
</form>
</main>
</body>⭐ 체크박스가 check 된 상태로 로그인 하면 isSave 라는 키값으로 yes 가 전송되고
check 하지 않고 로그인 하면 isSave 라는키값으로 전송되는 값은 없다쿠키
쿠키 응답
- HttpServletRequest 객체의 .addCookie() 메소드 사용
쿠키 읽어 내기
-
HttpServletRequest 객체의 .getCookies() 메소드 사용
➜ Cookie[ ] 객체가 리턴된다 -
login.jsp 코드 추가
<%
if(isValid){
// HttpSession 객체에 "userName" 이라는 키값으로 userName 을 저장
session.setAttribute("userName", userName);
// role 정보도 저장한다
session.setAttribute("role", dto.getRole());
// 세션 유지시간 설정 (초단위)
session.setMaxInactiveInterval(60*60); // 설정하지 않으면 기본 30분
}
// 체크박스를 체크한 상태로 로그인 버튼을 누르면 null 이 아니다 (체크하지 않으면 null)
String isSave = request.getParameter("isSave");
if(isSave != null){
// 입력한 아이디 비밀번호를 쿠키로 응답하고 1주일 동안 유지 되도록 한다
// 아이디 비밀번호를 쿠키로 응답하고 1주일 동안 유지되도록 한다
Cookie cook1 = new Cookie("savedUserName", userName);
Cookie cook2 = new Cookie("savedPassword", password);
// 쿠키 유지시간 초단위로 설정
cook1.setMaxAge(60*60*24*7);
cook2.setMaxAge(60*60*24*7);
// 쿠키 경로
// cook1.setPath("/"); // 모든 경로에서 사용할 수 있는 쿠키
// cook1.setPath("/user/"); // user 경로에서만 사용할 수 있는 쿠키
// 설정하지 않으면 현재 경로에서만 사용할 수 있다
// HttpServletResponse 객체에 Cookie 객체를 담으면 응답할 때 알아서 쿠키가 응답한다
response.addCookie(cook1);
response.addCookie(cook2);
} else{ // 체크 박스를 체크하지 않았으면 쿠키를 삭제한다
// 특정 키값으로 저장된 쿠키값 삭제하기 (value 에는 아무 값이나 넣어도 상관없다)
Cookie cook1 = new Cookie("savedUserName","");
Cookie cook2 = new Cookie("savedPassword", null);
// 쿠키 유지시간을 0로 설정해서 응답하면 쿠키가 삭제되는 효과를 낸다
cook1.setMaxAge(0);
cook2.setMaxAge(0);
response.addCookie(cook1);
response.addCookie(cook2);
}
%>➜ 검사로 애플리케이션에서 쿠키를 확인하면 아이디와 비밀번호가 저장되어 있다
- loginform.jsp 코드 추가
<%
// 쿠키게 저장된 아이디와 비밀번호를 담을 변수
String savedUserName = "";
String savedPassword = "";
// HttpServletRequest 객체의 메소드를 이용해서 전달된 쿠키 목록을 얻어낼 수 있다
Cookie[] cooks = request.getCookies();
if(cooks != null){
// 반복문 돌면서 쿠기 개체를 하나씩 참조해서
for(Cookie tmp : cooks){
// 저장된 키값을 읽어온다
String key = tmp.getName();
// 만일 키값이 savedUserName 라면
if(key.equals("savedUserName")){
// 쿠기 value 값을 savedUserName 라는 지역변수에 저장
savedUserName = tmp.getValue();
}
if(key.equals("savedPassword")){
savedPassword = tmp.getValue();
}
}
}
%><div class="form-floating">
<input value="<%=savedUserName%>" type="text" class="form-control" id="userName" name="userName" placeholder="아이디 입력..." >
<label for="userName">아이디</label>
</div>
<div class="form-floating">
<input value="<%=savedPassword%>" type="password" class="form-control" id="password" name="password" placeholder="비밀번호 입력..." >
<label for="password">비밀번호</label>
</div>
<div class="form-check text-start my-3">
<input class="form-check-input" type="checkbox" name="isSave" value="yes" id="flexCheckDefault" <%=savedUserName.equals("") ? "":"checked"%>>
<label class="form-check-label" for="flexCheckDefault">
로그인 정보 저장
</label>
</div>
학원 공부 내용 정리