48. 전통적인 방식의 로그인 방법

loginForm.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8 " pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>

<div class="container">
  <h2>Stacked form</h2>
  <form>

    <div class="form-group">
      <label for="username">username:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
    </div>

  </form>
	<button id="btn-login" class="btn btn-primary">로그인</button>

</div>

<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

 

user.js

#btn-login 눌렀을 때, login()함수 추가한다.

$("#btn-login").on("click",()=>{ 
    this.login();
});

login: function(){
    // alert('user의 save호출됨');
    let data = {
        username: $("#username").val(),
        password: $("#password").val()
    }
    // console.log(data);

    $.ajax({
        type: "POST",
        url: "/api/user/login",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function(resp){
        // alert(resp);
        alert("로그인이 완료 되었습니다.")
        location.href="/";
    }).fail(function(error){
        alert(JSON.stringify(error));
    });

},// login end

 

UserApiController

@PostMapping("/api/user/login")
public ResponseDto<Integer> login(@RequestBody User user){
    System.out.println("UserApiController login() 호출");
    User principal = userService.로그인(user);

    return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
}

 

UserService

@Transactional(readOnly = true) // Select 할 때 트랜잭션 시작, 해당 서비스 종료시에 트랜잭션 종료(정합성)
public User 로그인(User user) {
    return userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
}

 

UserRepository

Select * from user Where username = ? and password = ?;쿼리문으로 조회하고자한다.

JPA Naming 전략 ⇒ 강의에서는 JPA Naming 전략 사용

User findByUsernameAndPassword(String username,String password);

 

Native Query 전략

@Query(value="Select * from user Where username = ? and password = ?",nativeQuery = true)
User login(String username, String password);

 

UserApiController

@Autowired
private HttpSession session;

@PostMapping("/api/user/login")
public ResponseDto<Integer> login(@RequestBody User user){
    System.out.println("UserApiController login() 호출");
    User principal = userService.로그인(user);

    if(principal !=null){
        session.setAttribute("principal",principal);
    }

    return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
}

 

header.jsp

• jstl을 사용하기 위해 아래 태그라이브러리 추가한다.

jsp 상단에 추가(전체 코드보면서 상단 어디에 추가했는지 확인하기)

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>

• pom.xml - jstl 라이브러리 있는지 확인한다.

<!-- JSTL -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

<c:choose>

    <c:when test="${empty principal}">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/auth/loginForm">로그인</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/auth/joinForm">회원가입</a>
            </li>
        </ul>
    </c:when>
    <c:otherwise>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/board/saveForm">글쓰기</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/user/updateForm">회원정보</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/logout">로그아웃</a>
            </li>
        </ul>
    </c:otherwise>
</c:choose>