# 세션과 로그인/로그아웃
세션을 사용한 보안강화 로그인/로그아웃 페이지 만들기!!
---
<a name="design"></a>
### 로그인/로그아웃 설계하기
세션을 통한 로그인/로그아웃 페이지를 설계해봅시다. 시나리오는 다음과 같습니다.
1. 로그인 화면을 통해 데이터를 전달하여 인증을 시도합니다.
2. 인증을 성공하면 성공의 결과물로 **세션값(인증키)을 등록**하고 웰컴페이지로 이동합니다.
- welcome 페이지는 인증키가 있는 사용자만 볼 수 있도록 하여 **보안을 강화**합니다.
3. 로그아웃을 하면 모든 세션데이터를 삭제(무효화)하고 로그인 페이지로 이동하게 됩니다.
![Imgur](https://i.imgur.com/QntFGRR.png)
화면 설계는 이전 수업과 동일합니다.
![Imgur](https://i.imgur.com/pcYByMy.png)
---
<a name="implementation"></a>
### 구현하기
이클립스에서 프로젝트(Dynamic Web Project)를 생성합니다.
![Imgur](https://i.imgur.com/8Fmt0YO.png)
프로젝트명은 `LogInOout`으로 만들었습니다.
![Imgur](https://i.imgur.com/mb7CNES.png)
생성된 프로젝트의 구조입니다.
![Imgur](https://i.imgur.com/SGZ54wQ.png)
`WebContent`에 **JSP File**을 생성해주세요(우클릭 > New > JSP File)
![Imgur](https://i.imgur.com/VXuMP3J.png)
아래의 4가지 파일을 만들어 줍니다.
+ **form.jsp**: 사용자 정보를 입력받는 페이지
+ **authentication.jsp**: 사용자 인증과정을 처리하는 페이지
+ **logout.jsp**: 로그아웃을 처리하는 페이지
+ **welcome.jsp**: 인증 성공시 보여지는 월컴 페이지
![Imgur](https://i.imgur.com/XZLVM0V.png)
로그인 화면(form.jsp)은 아래와 같습니다.
```html
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="authentication.jsp" method="post">
<label>ID: </label>
<input name="id" type="text"><br>
<label>PW: </label>
<input name="pw" type="password"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>
```
> form 태그의 **action 속성**: 폼 데이터의 수령대상을 나타냅니다.
![Imgur](https://i.imgur.com/2Q7Ex3Y.png)
다음은 인증처리 로직(authentication.jsp)입니다.
```java
<%
// 0: 인증 가능 사용자 및 비밀번호 목록.
String[] users = { "ninja", "knight", "elf" };
String[] passwords = { "ak74", "m4", "pgs11" };
// 1: form 으로부터 전달된 데이터를 변수에 저장.
String id = request.getParameter("id");
String pw = request.getParameter("pw");
// 2: 사용자 인증
String redirectUrl = "form.jsp"; // 인증 실패시 재요청 될 url
for (int i = 0; i < users.length; i++) {
if (users[i].equals(id) && passwords[i].equals(pw)) {
session.setAttribute("signedUser", id); // 인증되었음 세션에 남김
redirectUrl = "welcome.jsp"; // 인증 성공 시 재요청 url
}
}
response.sendRedirect(redirectUrl);
%>
```
> 세션 값 등록하기: **`session.setAttribute(String name, Object obj);`**
웰컴 페이지(welcome.jsp)입니다.
```java
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% // 인증된 세션이 없는경우, 해당페이지를 볼 수 없게 함.
if (session.getAttribute("signedUser") == null) {
response.sendRedirect("logout.jsp");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1><%= session.getAttribute("signedUser") %>님 <small>반갑습니다.</small></h1>
<a href="logout.jsp">로그아웃</a>
</body>
</html>
```
> 세션 값 가져오기: **`session.getAttribute(String name;`**
![Imgur](https://i.imgur.com/FuWhYmi.png)
마지막으로 로그아웃 로직(logout.jsp)입니다.
```java
<%
// 1: 기존의 세션 데이터를 모두 삭제
session.invalidate();
// 2: 로그인 페이지로 이동시킴.
response.sendRedirect("form.jsp");
%>
```
> 세션 값 초기화하기: **`session.invalidate();`**
---
### 결과 화면
로그인 성공
![Imgur](https://i.imgur.com/HRQ28xM.png)
로그인 실패
![Imgur](https://i.imgur.com/IHmYUTd.png)
로그아웃
![Imgur](https://i.imgur.com/GowBVKt.png)
---
### 핵심 키워드
+ [로그인/로그아웃 설계하기](#design)
+ [로그인/로그아웃 구현하기](#implemetation)
---
### Next..
데이터베이스를 연동한 페이지를 만들어봅시다.