모의해킹에 사용할 게시판의 인덱스 페이지 구현
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HackTheBox</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-light my-5">HACK THE BOX</h2>
<p class="text-light">회원님, 안녕하세요. HACK THE BOX는 로그인한 회원님만 사용 가능한 서비스입니다. 로그인을 하시면 더 많은 서비스를 경험하실 수 있습니다.</p>
<button type="button" class="btn btn-light my-3" data-toggle="modal" data-target="#loginModal">로그인</button>
<button type="button" class="btn btn-light my-3" onclick="location.href='/hackthebox/api/signup.jsp'">회원가입</button>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered d-flex align-items-center" role="document" style="margin-top: -13%">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">HACK THE BOX</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="login-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="아이디" name="user_id" id="username" required />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name="user_pw" id="password" required />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="login-button">로그인</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<%= request.getContextPath() %>/js/login.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
</body>
</html>
IndexController
인덱스 페이지에 접근했는데 로그인 상태면 게시판으로 이동하고 그렇지 않다면 인덱스 페이지로 이동한다.
@WebServlet("/index.html")
public class IndexController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
HttpSession session = req.getSession(false);
if (session != null && session.getAttribute("UserId") != null) {
RequestDispatcher dispatcher = req.getRequestDispatcher(
"community"
);
dispatcher.forward(req, resp);
} else {
RequestDispatcher dispatcher = req.getRequestDispatcher("index.jsp");
dispatcher.forward(req, resp);
}
}
}login.js
form 대신 fetch와 JSON을 사용해보고 싶어 시도했지만.. 정말 너무 어려웠다..
fetch를 처음 써 보는 거라 모던 자바스크립트 fetch 파트 읽으면서 구현했는데 에러가 펑펑 터져서 멘붕..ㅋㅋㅋㅋㅋ 그래도 디버깅하면서 하나씩 에러 해결!
새로운 경험이었다. 😎
const form = document.getElementById("login-form");
form.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(form);
const username = formData.get("user_id");
const password = formData.get("user_pw");
fetch("/hackthebox/loginprocess", {
method: "POST",
headers: [["Content-Type", "application/json; charset=utf-8"]],
body: JSON.stringify({
user_id: username,
user_pw: password,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((result) => {
if (result.login === "success") {
alert("로그인에 성공했습니다.");
location.href = "/hackthebox/community";
} else if (result.login === "fail") {
alert("로그인에 실패했습니다. 아이디 또는 패스워드를 확인해주세요.");
location.href = "/hackthebox/api/login.jsp";
}
})
.catch((error) => {
console.error(error);
alert("로그인 중 오류가 발생했습니다. 다시 시도해주세요.");
});
});
출처
하루하루 성실하게, 인생 전체는 되는대로.