본문 바로가기
공부/[Project] J2P

[J2P] 로그인/로그아웃 기능

by 맴썰 2022. 5. 14. 
CREATE TABLE User(
	ID varchar(20) PRIMARY KEY,
	Password varchar(1000) NOT NULL,
	Name varchar(20)
);

사용자의 테이블 구조이다. 사용자의 정보를 유일하게 식별하는 ID 이외의 컬럼을 추가해야한다.

package com.Jim2Pack.main.Mappers;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import com.Jim2Pack.main.VO.User;

@Repository
@Mapper
public interface UserMapper {
	public void SignUp(User user);
	public User GetUser(String ID);
	public User SignIn(String ID, String Password);
}

 

로그인에서 Mapper에서 사용하는 메소드는 SignIn인데 사용자의 ID와 Password를 입력으로 받아 확인을 수행한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.Jim2Pack.main.Mappers.UserMapper">
    <insert id = "SignUp" parameterType = "User">
    	INSERT INTO USER(ID, Password, Name) 
    	VALUES(#{ID},HEX(AES_ENCRYPT(#{Password},'J2P')),#{Name})
    </insert>
    <select id = "GetUser" parameterType = "String" resultType = "User">
    	Select * from User Where ID = #{ID}
    </select>
    <select id = "SignIn" parameterType = "String" resultType = "User">
    	Select * from User Where ID = #{ID} AND Password = HEX(AES_ENCRYPT(#{Password},'J2P'))
    </select>
</mapper>

Mapper xml file에 SignIn을 보게 되면 입력된 ID가 존재하고, 입력된 Password를 AES 방식으로 암호화한 값이 일치하는지 여부를 확인한다. 

package com.Jim2Pack.main.Service;

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

import com.Jim2Pack.main.Mappers.UserMapper;
import com.Jim2Pack.main.VO.User;

@Service
public class UserSignInService {
	@Autowired
	UserMapper usermapper;
	
	public int SignIn(String id, String pass) {
		User user = usermapper.SignIn(id, pass);
		if(user!=null) {
			return 1;
		}
		else return 0;
	}
}

 

원래는 Service Interface를 구현한 후 ServiceImpl 클래스에서 해당 인터페이스를 구현하는 방식이 보다 좋지만 무지한 관계로 Concrete 클래스의 형태로 서비스를 구현했다. 서비스에서는 mapper 객체에 객체를 주입하고, 해당 mapper의 SignIn 메소드를 실행하여 그 결과에 따른 값을 return 하는 함수를 작성했다.

package com.Jim2Pack.main;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.Jim2Pack.main.Service.UserSignInService;
import com.Jim2Pack.main.VO.User;
import com.Jim2Pack.main.config.Message;

@Controller
public class UserSignInController {
	@Autowired
	UserSignInService uss;
	
	@RequestMapping(value = "/SignIn" , method = {RequestMethod.GET})
	public String view(Model model) {
		String result = "SignIn";
			return result;
	}
	@RequestMapping(value = "/SignIn" , method = {RequestMethod.POST})
	public String SignIn(User user, Model model) {
		String url = "Alert";
		int num = uss.SignIn(user.getID(), user.getPassword());
		if(num==1) {
		//로그인 성공
			model.addAttribute("loggedID",user.getID());
			url = "/Home";
		}
		else{
		//로그인 실패
			Message msg = Message.builder().message("로그인 정보가 일치하지 않습니다.").url("/SignIn").build();
			model.addAttribute("mess", msg);
		}
		return url;
	}
}

컨트롤러에서는 사용자가 POST형식으로 전송한 로그인 정보를 받아 서비스 객체의 SignIn 함수를 실행하여 나온 결과 값(성공시 int 1, 실패시 0)에 따른 결과를 model에 담아 url로 이동하게 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Jim2Pack</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="/resources/css/styles.css">
	<link rel="stylesheet" href="/resources/css/JimList.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
	
</head>
<body class="pt-5">
<%
	String id = (String)request.getAttribute("loggedID");
	if(id==null){
		id = (String)session.getAttribute("loggedID");
	}
	if(id!=null&&!id.equals("null")){
	session.setAttribute("loggedID", id);
%>
	<nav
		class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
		<div class="container">
			<a class="navbar-brand" href="/">Jim2Pack</a>
			<button class="navbar-toggler navbar-toggler-right" type="button"
				data-toggle="collapse" data-target="#navbarResponsive"
				aria-controls="navbarResponsive" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarResponsive">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#"
						id="navbarDropdownPortfolio" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false"> Jim </a>
						<div class="dropdown-menu dropdown-menu-right"
							aria-labelledby="navbarDropdownPortfolio">
							<a class="dropdown-item" href="AddJim">Add Jim Set</a>
							<% 
							   request.setAttribute("ID", id);
							%>
							<a class="dropdown-item" href="JimList">View Jim List</a> 
						</div></li>
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog"
						data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Blog </a>
						<div class="dropdown-menu dropdown-menu-right"
							aria-labelledby="navbarDropdownBlog">
							<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
							<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
							<a class="dropdown-item" href="blog-post.html">Blog Post</a>
						</div></li>
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#" id="navbarDropdownPages"
						data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Other Pages </a>
						<div class="dropdown-menu dropdown-menu-right"
							aria-labelledby="navbarDropdownPages">
							<a class="dropdown-item" href="full-width.html">Full Width
								Page</a> <a class="dropdown-item" href="sidebar.html">Sidebar
								Page</a> <a class="dropdown-item" href="faq.html">FAQ</a> <a
								class="dropdown-item" href="404.html">404</a> <a
								class="dropdown-item" href="pricing.html">Pricing Table</a>
						</div></li>
					<li class="nav-item"><a class="nav-link" href="MyPage">My page</a></li>
					<li class="nav-item"><a class="nav-link" href="Logout">Logout</a>
					</li>
					
				</ul>
			</div>
		</div>
	</nav>
<%
} else{session.setAttribute("loggedID", "null");
%>	
	<nav
		class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
		<div class="container">
			<a class="navbar-brand" href="/">Jim2Pack</a>
			<button class="navbar-toggler navbar-toggler-right" type="button"
				data-toggle="collapse" data-target="#navbarResponsive"
				aria-controls="navbarResponsive" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarResponsive">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#"
						id="navbarDropdownPortfolio" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false"> Jim </a>
						<div class="dropdown-menu dropdown-menu-right"
							aria-labelledby="navbarDropdownPortfolio">
							<a class="dropdown-item" href="AddJim">Add Jim Set</a>
							<a class="dropdown-item" href="JimList">View Jim List</a> 
						</div></li>
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog"
						data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Blog </a>
						<div class="dropdown-menu dropdown-menu-right"
							aria-labelledby="navbarDropdownBlog">
							<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
							<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
							<a class="dropdown-item" href="blog-post.html">Blog Post</a>
						</div></li>
					<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#" id="navbarDropdownPages"
						data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Other Pages </a>
						<div class="dropdown-menu dropdown-menu-right"
							aria-labelledby="navbarDropdownPages">
							<a class="dropdown-item" href="full-width.html">Full Width
								Page</a> <a class="dropdown-item" href="sidebar.html">Sidebar
								Page</a> <a class="dropdown-item" href="faq.html">FAQ</a> <a
								class="dropdown-item" href="404.html">404</a> <a
								class="dropdown-item" href="pricing.html">Pricing Table</a>
						</div></li>
					<li class="nav-item"><a class="nav-link" href="SignIn">Sign In</a>
					</li>
					<li class="nav-item"><a class="nav-link" href="SignUp">Sign Up</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<%
	}
%>
</body>
</html>

모든 화면의 상단에 존재하는 header file에서 먼저 request에 저장된 ID가 있는지 확인한 후, 없다면, Session에 저장된 ID를 받아온다. Logout된 상태인 "null" ID가 아닌 값이 저장될 경우 로그인 된 상태로 판단하고 그에 따른 UI가 출력되도록 했다.

 

package com.Jim2Pack.main;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LogoutController {
	@RequestMapping("/Logout")
	public String logout() {
		return "Logout";
	}
}

로그아웃은 별도의 서비스나 DB접속이 필요 없으므로 컨트롤러만 구현하였다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>logout</title>
</head>
<body>
<% session.setAttribute("loggedID", "null");
		out.println("<script>");
 		out.println("alert('로그아웃이 완료되었습니다.')");
 		out.println("location.href = '/'");
 		out.println("</script>");
 %>
</body>
</html>

로그아웃을 수행하게되면 세션에 저장되어있던 로그인된 아이디를 저장하는 Key에 "null"이라는 ID를 덮어씌우고 로그아웃 완료를 알리는 alert를 띄운 후 메인화면으로 이동하도록 구현하였다.

로그인을 하기 전 메인화면
로그인 화면
로그인 후 화면, 상단 네비게이션 바에 변화가 생긴다.
로그아웃 시 위와 같은 alert가 발생하고 초기화면으로 돌아간다.

 

'공부 > [Project] J2P' 카테고리의 다른 글

[J2P] 저장한 물품 리스트를 확인하는 기능  (0) 2022.05.14
[J2P] 특정 이벤트에 챙겨야 할 물품 리스트 저장 기능  (0) 2022.05.14
[J2P] 회원가입 기능  (0) 2022.03.14
[J2P] MySQL + MyBatis 연동  (0) 2022.03.08
[J2P] MySQL 연결 테스트  (0) 2022.03.08

관련글

티스토리툴바