전통적인 방식의 로그인 구현하기
loginForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form>
<div class="form-group">
<label for="userName">UserName</label> <input type="text" class="form-control" placeholder="username" id="username">
</div>
<div class="form-group">
<label for="pwd">Password</label> <input type="password" class="form-control" placeholder="password" id="password">
</div>
<div class="form-group form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
</form>
<button id="btn-login" class="btn btn-primary">로그인</button>
</div>
<script src="/blog/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>
userController.java
@GetMapping("/user/loginForm")
public String loginForm() { // 로그인 폼 띄우는 메서드
return "user/loginForm";
}
userApiController.java
// 전통적인 방식의 로그인 방법
@PostMapping("/api/user/login")
public ResponseDto<Integer> login(@RequestBody User user, HttpSession session) {
System.out.println("UserApiController : login 호출됨");
User principal = userService.로그인(user); // principal (접근주체)
System.out.println(principal);
if(principal != null) {
session.setAttribute("principal", principal);
}
return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
}
UserService.java
@Transactional(readOnly = true) // Select 할 때 트랜잭션 시작, 서비스 종료시에 트랜잭션 종료(정합성)
public User 로그인(User user) {
return userRepository.findByUserNameAndPassword(user.getUserName(), user.getPassword());
}
UserRepository.java
// DAO
// 자동으로 bran 등록이 된다.
//-> @Repository 생략 가능하다.
public interface UserRepository extends JpaRepository<User, Integer>{
// 해당 JpaRepository는 user테이블이 관리하고 이 테이블의 PK는 숫자형이다.
// 이 JpaRepository는 findAll()이라는 함수를 갖고 있는데 이 함수는 테이블의 모든행을 리턴하는 함수이다.
// 이 함수는 데이터 CRUD를 처리할 수 있다.
// JPA Naming 전략
// SELECT * FROM user Where username = ?1 AND password = ?2;
User findByUserNameAndPassword(String username, String password);
// 얘도 가능
// @Query(value="SELECT * FROM user Where username = ?1 AND password = ?2", nativeQuery = true)
// User login(String userName, String password);
}
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>lwj blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<link rel="shortcut icon" href="#"> <!-- GET http://localhost:8001/favicon.ico 404 (Not Found) 개발자모드에 안뜨게 하기 -->
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/blog/">LWJ</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<c:choose> <!-- JSTL 태그 라이브러리 -->
<c:when test="${ empty sessionScope.principal }"> <!-- 로그인이 안돼있을때 -->
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/blog/user/loginForm">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/blog/user/joinForm">회원가입</a></li>
</ul>
</c:when>
<c:otherwise>
<ul class="navbar-nav"> <!-- 로그인 돼 있을때 -->
<li class="nav-item"><a class="nav-link" href="/blog/user/writeForm">글쓰기</a></li>
<li class="nav-item"><a class="nav-link" href="/blog/user/userForm">회원정보</a></li>
<li class="nav-item"><a class="nav-link" href="/blog/user/logout">로그아웃</a></li>
</ul>
</c:otherwise>
</c:choose>
</div>
</nav>
<br>
<!-- 스크립트는 바디가 끝나는 제일 마지막에 넣는다. -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
참고 유튜브 (메타코딩님 강의)
https://youtu.be/GAy3my6Yroc?si=K40ndZE1-CgV8BLt