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

스프링 시큐리티를 사용하지 않는 기존 방식의 로그인 구현

 

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="uname">Username:</label> <input type="text" class="form-control" id="username" placeholder="아이디를 입력해주세요." name="username" required>
		</div>		
		<div class="form-group">
			<label for="pwd">Password:</label> <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력해주세요." name="password" required>
		</div>
		<div class="form-group form-check">
			<label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" required> 로그인 상태 유지
			</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"%>

User.js 수정

let index = {
	init: function() {
		$("#btn-save").on("click", ()=>{
			this.save();
		});
		$("#btn-login").on("click", ()=>{
			this.login();
		});
	},
	
	save: function() {
		let data = {
			username: $("#username").val(),
			password: $("#password").val(),
			email: $("#email").val()
		}; //javascript 오브젝트임.
		
		//ajax 호출시 default가 비동기 호출
		//ajax 통신을 이용하여 위의 data를 json으로 변경하여 insert 요청할 것임.
		//ajax가 통신에 성공해서 서버가 json형태로 응답을 해주면 자동으로 자바 오브젝트로 변환해줌. (dataType을 지정하지 않아도.)
		$.ajax({
			//회원가입 수행 요청
			type: "POST",
			url: "/blog/api/user",
			data: JSON.stringify(data), //js object를 JSON형태로 변경. http body 데이터.
			contentType: "application/json; charset=utf-8" //body 데이터의 타입 지정 (MIME)
			//dataType: "json" //서버에서 응답이 올 때 문자열로 오는데 문자열 형태가 'json'이라면 => js object로 파싱 해줌.			
		}).done(function(resp){			
			alert("회원가입이 완료되었습니다.");
			location.href="/blog";
		}).fail(function(error){
			alert(JSON.stringify(error));			
		}); //ajax 통신을 이용하여 3개의 데이터를 JSON으로 변경하여 insert 요청.
	},
	
		login: function() {
		let data = {
			username: $("#username").val(),
			password: $("#password").val(),			
		}; //javascript 오브젝트임.		
		
		$.ajax({
			//회원가입 수행 요청
			type: "POST",
			url: "/blog/api/user/login",
			data: JSON.stringify(data), //js object를 JSON형태로 변경. http body 데이터.
			contentType: "application/json; charset=utf-8", //body 데이터의 타입 지정 (MIME)
			dataType: "json" //서버에서 응답이 올 때 문자열로 오는데 문자열 형태가 'json'이라면 => js object로 파싱 해줌.			
		}).done(function(resp){			
			alert("로그인이 완료되었습니다.");
			location.href="/blog";
		}).fail(function(error){
			alert(JSON.stringify(error));			
		}); //ajax 통신을 이용하여 3개의 데이터를 JSON으로 변경하여 insert 요청.
	}
}

index.init();

UserApiController.java 수정

package com.pure.blog.controller.api;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.pure.blog.dto.ResponseDto;
import com.pure.blog.model.RoleType;
import com.pure.blog.model.User;
import com.pure.blog.service.UserService;

@RestController
public class UserApiController {

	@Autowired
	private UserService userService;
	
	@PostMapping("/api/user")
	public ResponseDto<Integer> save(@RequestBody User user) {
		System.out.println("UserApiController: save 호출됨");
		//DB에 insert 하기
		user.setRole(RoleType.USER);
		int result = userService.회원가입(user);		
		return new ResponseDto<Integer>(HttpStatus.OK.value(), result); //(status, data)
	}
	
	@PostMapping("/api/user/login")
	public ResponseDto<Integer> login(@RequestBody User user, HttpSession session) {
		System.out.println("UserApiController: login 호출됨");
		User principal = userService.로그인(user); //principal (접근주체)
		int result = 0;
		if(principal != null) {
			session.setAttribute("principal", principal);
			result = 1;
		}else {
			result = -1;
		}
		return new ResponseDto<Integer>(HttpStatus.OK.value(), result);
	}
}

UserService.java 수정

package com.pure.blog.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.pure.blog.model.User;
import com.pure.blog.repository.UserRepository;

//component-scan으로 Bean에 등록. (IoC)
@Service
public class UserService {

	@Autowired
	private UserRepository userRepository;
	
	@Transactional //내부 기능이 모두 정상작동 하면 commit, 하나라도 실패하면 rollback
	public int  회원가입(User user) {
		try {
			userRepository.save(user);
			return 1;
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("UserService: 회원가입() : " + e.getMessage());
		}
		return -1;
	}

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

UserRepository.java 수정

package com.pure.blog.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import com.pure.blog.model.User;

//DAO와 같음
//자동으로 Bean 등록이 되기 때문에 @Repository 생략이 가능.
public interface UserRepository extends JpaRepository<User, Integer> { //User 테이블이 관리하는 repo, PK는 Integer
	// JPA Naming 쿼리
	// select * from user where username = ? and password = ?; 
	// ?에는 각각의 파라미터가 들어감.
	User findByUsernameAndPassword(String username, String password);
	
	/*
	 * //Native Query를 쓰는 방식
	 * 
	 * @Query(value="select * from user where username = ?1 and password = ?2",
	 * nativeQuery = true) User login(String username, String password);
	 */
}