준비중..
09 JSP를 만나다: 로그인 / 로그아웃
# JSP를 만나다: 로그인 / 로그아웃
앞서 배운 내용들을 토대로 로그인/로그아웃 서비스를 만들어 보자.
## 목차
1. 학습 목표
2. 흐름 설계
3. 화면 설계
4. 코드 구현
5. 추가 구현
## 학습 목표
+ Bootstrap을 활용한 프론트엔드 구현
+ form 태그의 이해 및 활용
+ JSP 문법의 이해 및 활용
+ request 객체와 response 객체의 활용
## 흐름 설계
로그인 / 로그아웃 서비스를 만들려면 어떻게 해야할까? 고민해보고 사용자의 상태 흐름을 페이지로 설계해보자.
.
.
.
충분히 고민 했다면 아래 흐름과 비교 후, 수정해본다.
## 화면 설계
사용자의 입장에서 화면은 어떻게 설계해야할까? 아래를 참고한다.
## 코드 구현
위의 설계 내용을 토대로 코드를 작성하자.
`form.jsp` - 로그인 폼
```
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Hello JSP</title>
</head>
<body class="container">
<div class="jumbotron">
<h1>Form</h1>
<p>폼을 통해 데이터 전송해봅시다.</p>
</div>
<!-- 로그인 실패 시 경고: https://getbootstrap.com/docs/4.1/components/alerts/#dismissing -->
<% if (request.getParameter("error") != null) { %>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>로그인 에러!</strong> 이메일 또는 비밀번호가 일치하지 않습니다.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<% } %>
<!-- 로그인 폼: https://getbootstrap.com/docs/4.1/components/forms/ -->
<form action="auth.jsp" method="post">
<div class="form-group">
<label>이메일</label>
<input name="email" type="email" class="form-control" />
</div>
<div class="form-group">
<label>비밀번호</label>
<input name="password" type="password" class="form-control" />
</div>
<button type="submit" class="btn btn-primary">전송</button>
</form>
<!-- Optional JavaScript -->
<Script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
```
`auth.jsp` - 폼 데이터를 받고, 페이지를 이동
```
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
class User {
private String email;
private String password;
public User(String email, String password) {
this.email = email;
this.password = password;
}
public boolean check(String email, String password) {
// 이메일이 같지않다면?
if (!email.equalsIgnoreCase(this.email))
return false;
// 비밀번호가 다르다면?
if (!password.equals(this.password))
return false;
// 모두 통과했다면?
return true;
}
}
%>
<%
/* 1. 폼 데이터를 받아오시오. (구글링: jsp request form 값 받기) */
String inputEmail = request.getParameter("email");
String inputPassword = request.getParameter("password");
// 등록된 사용자 데이터.
String[] emails = {"[email protected]", "[email protected]", "[email protected]"};
String[] passwords = {"admin123", "tester123", "user123"};
User[] users = new User[emails.length];
for (int i = 0; i < emails.length; i++) {
users[i] = new User(emails[i], passwords[i]);
}
// 폼 데이터 정보가 등록된 사용자들 중 있는지 검사.
for (User u: users) {
// 이메일과 패스워드가 일치한다면?
if (u.check(inputEmail, inputPassword)) {
/* 2. welcome.jsp로 이동시키시오. (구글링: jsp response 페이지 redirect)*/
response.sendRedirect("welcome.jsp?email=" + inputEmail);
return;
}
}
// 사용자 인증을 못받았다면?
/* 3. form.jsp 페이지로 이동시키시오. (구글링: jsp response 페이지 redirect) */
response.sendRedirect("form.jsp?error=login-failed");
%>
```
`welcome.jsp` - 이메일 정보를 출력
```
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Hello JSP</title>
</head>
<body class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p><%= request.getParameter("email") %>님 반갑습니다.</p>
<a href="form.jsp" class="btn btn-primary">로그아웃</a>
</div>
<!-- Optional JavaScript -->
<Script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
```
## 추가 구현
로그아웃 시, 로그인이 되었습니다 문구를 출력해보자.
## 요약
1. 폼 태그의 input은 name 속성을 변수로 하여 전달된다.
2. request 객체의 getParameter() 메소드는 폼 태그로부터 전달된 데이터를 반환한다.
3. response 객체의 sendRedirect() 메소드는 클라이언트를 다른 url로 이동시킨다.