Spring MVC 일반 로그인 구현.

Spring MVC 로그인

Spring MVC 일반 로그인 구현.

개발자 박현준 2022. 8. 29. 20:20

728x90

목록
1. Spring MVC 일반 로그인 구현
2. Spring MVC 구글 로그인 구현
3. Spring MVC 카카오 로그인 구현
4. Spring MVC 네이버 로그인 구현

jsp 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<c:set var="contextPath" value="${pageContext.request.contextPath}" />    
<%
	request.setCharacterEncoding("UTF-8");
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="../resources/css/login_phj/login.css" />
<script type="text/javascript" src="../resources/js/login_phj/login.js"></script>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'>
</head>
<body>
	<div class="login_form">
            <h1>People in Trip</h1>
                <-- form값을 보낼 페이지로 설정. -->
            <form action="${contextPath}/signup_phj/signupcomplete_phj" name="loginFrm" method="post">
                <div>
                    <input type="text" placeholder="아이디" id="login_id" name="id" onfocus="this.placeholder='';" onblur="this.placeholder='아이디'" /><br>
                    <input type="password" placeholder="비밀번호" id="login_pw" name="pwd" onfocus="this.placeholder='';" onblur="this.placeholder='비밀번호'" />
                    <!-- 로그인할때 데이터베이스에서 id pw를 가져와야 하기떄문에 id랑 pwd name이 DTO에 있는 name이랑 select문 작성한 이름과 같아야한다!  -->
                    <ul>
                        <li id="login_menu"><a href="../search_kjh/idSearch.jsp" id="login_menu">아아디 찾기</a></li>
                        <li id="login_menu"><a href="../search_kjh/pwSearch.jsp" id="login_menu">비밀번호 찾기</a></li>
                        <li id="login_menu"><a href="../signup_lst/signup_input.jsp" id="login_menu">회원가입</a></li>
                    </ul>
                    <button type="submit" id="login_bt" onclick="loginChk();"><strong>로그인</strong></button>
                    <c:if test="${message == 'error'}">
                     <div style="color:red;"> 아이디 또는 비밀번호가 일치하지 않습니다.</div>
                    </c:if>
           	 </div>
            </form>
            <div>
                <p id="login_ez">간편하게 로그인 하기</p><br>
                    <!-- 점차 하나씩 소셜로그인 구현 예정 -->
                <a href="#"><img src="../resources/images/login_phj/google.png" /></a> 
                <a href="#"><img src="../resources/images/login_phj/kakao.png" /></a>
                <a href="#"><img src="../resources/images/login_phj/naver.png" /></a> 
            </div>
	</div>
</body>
</html>

css 코드

@charset "UTF-8";


.login_form {
	text-align: center;
	margin-top: 7%;
}

#login_menu {
	text-decoration: none;
	list-style: none;
	display: inline-block;
	color: black;
	font-size: 12px;	
	border-left: 1px solid black;
	padding: 0px 40px 0px 20px;
	margin: 0px -23px 0px -22px;
}
#login_menu:first-child {
	border-left: none;
}

h1 {
	color: #9966ff;
	font-family: Pacifico;
	font-size: 45px;
	margin-bottom: 10px;
}

#login_id {
	border-radius: 25px;
	height: 40px;
	width: 300px;
	padding-left: 15px;
	border: 2px solid #d0cece;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	outline: none;
	
}

#login_pw {
	border-radius: 25px;
	height: 40px;
	width: 300px;
	margin-top: 10px;
	padding-left: 15px;
	border: 2px solid #d0cece;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);	
	outline: none;
}

#login_bt {
	border-radius: 25px;
	height: 50px;
	width: 320px;
	margin-top: 10px;
	background-color: #9966ff;
	border: #9966ff;
	color: white;
	cursor: pointer;
	font-size: 20px;
}

#login_ez {
	display: inline-flex;
	align-items: center;
	color: black;
	font-size: 13px;
	margin: 20px 0px;
	width: 330px;
}
#login_ez::before,
#login_ez::after {
	content: "";
	flex-grow: 1;
	background: black;
	height: 2px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 6px;
}

img {
	width: 30px;
	height: 30px;
	margin-right: 20px;
	margin-left: 20px;
}

js 코드

function loginChk() {
    var form = document.loginFrm;
    if (!form.login_id.value) {
        alert("아이디를 입력해 주십시오.");
        form.login_id.focus();
        return false;
    }
 
    if (!form.login_pw.value) {
        alert("비밀번호를 입력해 주십시오.");
        form.login_pw.focus();
        return false;
    }
    form.submit(); 
}

완성한 화면단

이제부터 로그인 구현을 위한 코드를 확인해보자.

시작하기전에 데이터베이스랑 mybatis jdbc를 연결해주도록 하자!

연결 방법은 링크로 들어가서 확인하면 된다!

Oracle DB MyBatis jdbc 연결 방법

fom.xml에 mybatis DB jdbc 라이브러리 코드를 추가해주자. org.mybatis mybatis 3.5.10 org.mybatis mybatis-spring 2.0.7 com.oracle.database.jdbc ojdbc8 21.6.0.0.1 system ${basedir}/src/main/webapp/WEB-I..

ks12b0000.tistory.com

MySQL MyBatis 연결 방법

fom.xml 에 DB연동에 필요한 라이브러리 의존 설정 추가 org.mybatis mybatis 3.5.10 org.mybatis mybatis-spring 2.0.7 mysql mysql-connector-java 8.0.30 org.springframework spring-jdbc 5.0.7.RELEASE WEB-I..

ks12b0000.tistory.com

연결이 다 완료되었으면 이제 java 코드들을 작성해주자 나는 Controller.java, DAO.java, DTO.java, Service.java, ServiceImpl.java를 만들어 주었다 내가 만든 경로랑 코드로 확인해보자.

MVC 흐름을 먼저 이해하고 넘어가보자!

>> 방향 흐름은 그 다음 영역을 호출하는 것!

<< 방향 흐름은 그 영역에 return한 값을 받아오는 것!!

전체적인 흐름

사진의 흐름처럼 Web Browser가 데이터를 요청하면 DB에서 데이터를 return해서

Web Browser가 데이터를 받을 수 있는 것임!

이제 각각 코드들로 확인해보자! 원래 Controller에서 비지니스 로직 수행을 하면 안되고 Service에서 수행해야되는데 일단 Controller에서 수행하고 나중에 Service로 옮길 예정임!

DTO.java 코드 (Data Transfer Object 각 계층이 데이터를 주고 받을 때 사용하는 객체 각 계층은 뷰,컨트롤러,서비스,DAO,DB를 말함)

package kr.co.intrip.login_signup.dto;

import java.sql.Date;

import org.springframework.stereotype.Component;

import lombok.Data;

// Getter,Setter,toString 을 대신해주는 애노테이션
// lombok라이브러리를 추가해야함!
@Data
public class MemberDTO {	
	private String id;
	private String pwd;
	private String nick_nm;
	private String email;
	private Date join_Date;	
	private Date last_update;
	private String grade;
}

Lombok 라이브러리 추가 방법

롬복 홈페이지에 들어가서 jar 파일 다운로드. Download projectlombok.org lombok.jar 다운로드 후 명령 프롬포트(cmd)실행 lombok.jar 다운로드 받아진 경로에 들어가서 java -jar lombok.jar 입력! "Specify..

ks12b0000.tistory.com

Controller.java 코드(Controller의 역할은 웹 브라우저의 요청을 전담하여 처리, Service를 호출함)

package kr.co.intrip.login_signup.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import kr.co.intrip.login_signup.dto.MemberDTO;
import kr.co.intrip.login_signup.service.MemberService;
import lombok.extern.slf4j.Slf4j;

// 로그를 확인하기 위한 애노테이션 추가
@Slf4j
// 이 애노테이션은 이 클래스가 컨트롤러 클래스라는 것을 알려주고 사용자 요청이 들어오면 이 컨트롤러가 호출됨!
@Controller
public class LoginController {
	

	// @Autowired를 설정한 메서드가 자동으로 호출되고, 인스턴스가 자동으로 주입
	// 즉 Bean을 자동으로 주입해줌 / 의존관계 자동 주입
	@Autowired
	private MemberService memberService;
	
	// 로그인 페이지
	// baseurl/login_signup/login 로 접속하면 이 애노테이션을 가진 메소드로 매핑됨.
	@GetMapping("login_signup/login")
	public String login()  {
		return "login_signup/login";
	}

	// 로그인 검사
	@PostMapping("login_signup/login") 
	public String login(@ModelAttribute MemberDTO memberDTO, HttpSession session)throws Exception {
	// 이 부분이 Service를 호출하기 위한 코드임
	MemberDTO user = memberService.Login(memberDTO, session);	
	ModelAndView mav = new ModelAndView();
		if (user != null) {
			log.info("로그인 성공");
			// Service에 호출한 user값을 session에 저장
			session.setAttribute("user", user);
			session.setAttribute("isLogIn", true);
			log.info("user : " + user);
			mav.setViewName("redirect:/mainpage/main");
			// 로그인 성공하면 return값으로 메인페이지로 이동하게 작성.
			
		}
		else {
         log.info("로그인 실패");
         mav.addObject("message", "error");
         mav.setViewName("login_signup/login");
				// 실패하면 return값으로 다시 로그인페이지로 이동하게 작성.
      }
      return mav;
   }

	// 로그아웃
       @GetMapping("logout")
       public ModelAndView logout(HttpSession session)throws Exception {
          ModelAndView mav = new ModelAndView();
          session.invalidate();
          log.info("로그아웃 성공");
          mav.setViewName("redirect:/mainpage/main");
          return mav;
       }

@GetMapping, @PostMapping 을 사용하려면 밑에 코드처럼

fom.xml에 springframework-version이 5 이상이여야 사용 가능하다!

<properties>
    <java-version>1.6</java-version>
    <org.springframework-version>5.0.7.RELEASE</org.springframework-version>
    <org.aspectj-version>1.6.10</org.aspectj-version>
    <org.slf4j-version>1.6.6</org.slf4j-version>
</properties>

혹시라도 위에 버전 수정해줬으면 아래에 spring-jdbc도 버전을 맞춰주자.

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>5.0.7.RELEASE</version>
</dependency>

Service.java 코드

package kr.co.intrip.login_signup.service;

import javax.servlet.http.HttpSession;

import kr.co.intrip.login_signup.dto.MemberDTO;

public interface MemberService {
	public MemberDTO Login(MemberDTO memberDTO, HttpSession session) throws Exception;
}

ServiceImpl.java 코드 (service interface를 구현한 클래스임, DAO를 호출, 비지니스 로직을 수행)

package kr.co.intrip.login_signup.service;

import javax.servlet.http.HttpSession;

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

import kr.co.intrip.login_signup.dao.MemberDAO;
import kr.co.intrip.login_signup.dto.MemberDTO;
import lombok.extern.slf4j.Slf4j;
@Slf4j
// 이 애노테이션은 이 클래스가 서비스 클래스라는 것을 알려줌
@Service
public class MemberServiceImpl implements MemberService {

	// 의존관계 자동 주입
	@Autowired
	private MemberDAO memberDAO;

	@Override
	public MemberDTO Login(MemberDTO memberDTO, HttpSession session) throws Exception {
		// DAO를 호출하는 코드
		return memberDAO.Login(memberDTO, session);
	}

	
}

DAO.java 코드(데이터베이스에 접속하여 비즈니스 로직에 필요한 쿼리문 호출)

package kr.co.intrip.login_signup.dao;

import javax.servlet.http.HttpSession;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import kr.co.intrip.login_signup.dto.MemberDTO;
import lombok.extern.slf4j.Slf4j;
@Slf4j
@Repository
public class MemberDAO {
	// 의존관계 자동주입
	@Autowired
	SqlSession sqlSession;


	public MemberDTO Login(MemberDTO memberDTO, HttpSession session) {
		return sqlSession.selectOne("mapper.member.Login", memberDTO);
		// 내가 xml형식에서 작성한 쿼리문 select실행
		// "mapper.member.Login"은 xml에namespace + 원하는 쿼리문 id를 작성해주면 됨 
	}
}

쿼리문 작성 member.xml

<?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의 전체 경로 -->
<mapper namespace="mapper.member"> 	
<resultMap type="memberDTO" id="memberResult">
		<result property="id" column="id" />
		<result property="name" column="name" />
		<result property="pwd" column="pwd" />
		<result property="nick_nm" column="nick_nm" />
		<result property="email" column="email" />
		<result property="join_Date" column="join_Date" />
		<result property="last_update" column="last_update" />
		<result property="grade" column="grade" />
	</resultMap>

	<-- id = DAO와 XML파일을 매칭 시키기 위함임 DAO와XML의 id를 동일 작성 해야함 
	resultType = SQL문 실행하고 결과값을 어떤 형식으로 반환할지 작성 -->
	<select id="Login" resultType="memberDTO" parameterType="memberDTO">
		<![CDATA[
                    SELECT * 
                    FROM P_MEMBER 
                    WHERE ID = #{id} AND PWD = #{pwd}
		]]>	
	</select>
</mapper>

나는 경로를 이렇게 설정해주었다!

728x90

저작자표시 비영리 변경금지 (새창열림)