[웹프로젝트] 4. 로그인, 로그아웃, 회원가입

ㅁ 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" %>

<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<style>

header{height: 50px}

header a{color:black;}

header .profile-img{width:30px;}

</style>

</div>

<c:choose>

<c:when test="${ empty loginUser }">

<a href="">회원가입</a>  | 

</c:when>

<c:otherwise>

<div>

<a href="">홍길동님</a>  | 

</div>

</c:otherwise>

</c:choose>

</div>

</header>

</li>

</li>

<a class="nav-link" href="#">일반게시판</a>

</li>

<a class="nav-link" href="#">사진게시판</a>

</li>

</ul>

</nav>

<h4 class="modal-title">Login</h4>

</div>

<label for="userPwd" class="mr-sm-2">Password:</label>

</div>

</div>

</form>

</div>

<%@ 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}" />

<style>

header{height: 50px}

header a{color:black;}

header .profile-img{width:30px;}

</style>

</div>

<c:choose>

<c:when test="${ empty loginUser }">

<a href="">회원가입</a>  | 

</c:when>

<c:otherwise>

<div>

<a href="">${loginUser.userName}님</a>  | 

</div>

</c:otherwise>

</c:choose>

</div>

</header>

</li>

</li>

<a class="nav-link" href="#">일반게시판</a>

</li>

<a class="nav-link" href="#">사진게시판</a>

</li>

</ul>

</nav>

<h4 class="modal-title">Login</h4>

</div>

<label for="userPwd" class="mr-sm-2">Password:</label>

</div>

</div>

</form>

</div>

- 로그인 인증방식은 세션 방식이다.

- 현재 로그인 요청을 할수있는 form은 구현되어있지 않다. modal로 연결해놨다.

그 안에 form요소가 있다.

- 아이디, 비번을 userId, userPwd로 MemberDto의 필드명과 맞췄다. 그러면 이제 매개변수의 MemberDto에 바로 담긴다.

- 로그인 id, 비번에 required 속성을 추가했다.

- 로그인 form의 action을 작성했다.

- 로그인은 url에 데이터가 노출되면 안되니 post방식으로 넘어온다.

- 홍길동님 바꿨다. 이름.

- 이미지는 2가지 경우다.

프로필 url 경로가 없으면 "${ contextPath }/resources/images/defaultProfile.png"이 보여진다. 기본 이미지다.

프로필 url 경로가 있으면 존재하는 프로필 url 경로가 들어가야 한다.

- <c:out />은 ~다.

ㅁ MemberController

package com.br.spring.controller;

import org.springframework.stereotype.Controller;

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

import com.br.spring.service.MemberService;

import lombok.RequiredArgsConstructor;

@RequestMapping("/member")

@RequiredArgsConstructor

@Controller

public class MemberController {

private final MemberService memberService;

}

- 이게 현재 상태다.

ㅁ MemberService

package com.br.spring.service;

public interface MemberService {

}

package com.br.spring.service;

import com.br.spring.dto.MemberDto;

public interface MemberService {

// 로그인

MemberDto selectMember(MemberDto m);

// 회원가입

int insertMember(MemberDto m);

// 아이디중복체크

int selectUserIdCount(String checkId);

// 회원정보변경

int updateMember(MemberDto m);

// 회원탈퇴

int deleteMember(MemberDto m);

}

ㅁ MemberServiceImpl

package com.br.spring.service;

import org.springframework.stereotype.Service;

import com.br.spring.dao.MemberDao;

import lombok.RequiredArgsConstructor;

@RequiredArgsConstructor

@Service

public class MemberServiceImpl implements MemberService {

private final MemberDao memberDao;

}

package com.br.spring.service;

import org.springframework.stereotype.Service;

import com.br.spring.dao.MemberDao;

import com.br.spring.dto.MemberDto;

import lombok.RequiredArgsConstructor;

@RequiredArgsConstructor

@Service

public class MemberServiceImpl implements MemberService {

private final MemberDao memberDao;

@Override

public MemberDto selectMember(MemberDto m) {

return memberDao.selectMember(m);

}

@Override

public int insertMember(MemberDto m) {

return memberDao.insertMember(m);

}

@Override

public int selectUserIdCount(String checkId) {

return memberDao.selectUserIdCount(checkId);

}

@Override

public int updateMember(MemberDto m) {

return memberDao.updateMember(m);

}

@Override

public int deleteMember(String userId) {

return memberDao.deleteMember( userId );

}

- 마지막 메소드 수정필요.

ㅁ MemberController

package com.br.spring.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PostMapping;

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

import com.br.spring.dto.MemberDto;

import com.br.spring.service.MemberService;

import lombok.RequiredArgsConstructor;

@RequestMapping("/member")

@RequiredArgsConstructor

@Controller

public class MemberController {

private final MemberService memberService;

@PostMapping("/signin.do")

public void signin(MemberDto m, HttpServletResponse response, HttpSession session, HttpServletRequest request) throws IOException {

MemberDto loginUser = memberService.selectMember(m);

// 로그인 성공시 => 세션에 회원정보를 담고, alert와 함께 메인 페이지로 이동

// 로그인 실패시 => alert와 함께 기존에 보던 페이지 유지(아이디, 비번 입력하는 로그인 폼 유지. 작성하던 입력데이터도 그대로.)

// script문을 응답데이터로 돌려줘서 흐름제어

response.setContentType("text/html; charset=utf-8");

PrintWriter out = response.getWriter();

out.println("<script>");

if(loginUser != null) { // 로그인 성공

session.setAttribute("loginUser", loginUser);

out.println("alert('" + loginUser.getUserName() + "님 환영합니다~');");

out.println("location.href = '" + request.getHeader("referer") + "';"); // 메인페이지가 아닌 이전에 보던 페이지로 이동

}else { // 로그인 실패

out.println("alert('로그인에 실패하였습니다. 아이디 및 비밀번호를 다시 확인해주세요.');");

out.println("history.back();"); // modal이 띄워진 상태였으면 modal도 유지된다.

}

out.println("</script>");

}

- 시크릿창으로 테스트하세요. 자동저장때문에. ctrl shift n

ㅁ

ㅁ

- sample_script 다시 한번 실행해서 초기의 db로 돌아왔다.

======================================================

ㅁ 로그아웃

ㅁ MemberController

package com.br.spring.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PostMapping;

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

import com.br.spring.dto.MemberDto;

import com.br.spring.service.MemberService;

import lombok.RequiredArgsConstructor;

@RequestMapping("/member")

@RequiredArgsConstructor

@Controller

public class MemberController {

private final MemberService memberService;

@PostMapping("/signin.do")

public void signin(MemberDto m, HttpServletResponse response, HttpSession session, HttpServletRequest request) throws IOException {

MemberDto loginUser = memberService.selectMember(m);

// 로그인 성공시 => 세션에 회원정보를 담고, alert와 함께 메인 페이지로 이동

// 로그인 실패시 => alert와 함께 기존에 보던 페이지 유지(아이디, 비번 입력하는 로그인 폼 유지. 작성하던 입력데이터도 그대로.)

// script문을 응답데이터로 돌려줘서 흐름제어

response.setContentType("text/html; charset=utf-8");

PrintWriter out = response.getWriter();

out.println("<script>");

if(loginUser != null) { // 로그인 성공

session.setAttribute("loginUser", loginUser);

out.println("alert('" + loginUser.getUserName() + "님 환영합니다~');");

out.println("location.href = '" + request.getHeader("referer") + "';"); // 메인페이지가 아닌 이전에 보던 페이지로 이동

}else { // 로그인 실패

out.println("alert('로그인에 실패하였습니다. 아이디 및 비밀번호를 다시 확인해주세요.');");

out.println("history.back();"); // modal이 띄워진 상태였으면 modal도 유지된다.

}

out.println("</script>");

}

@GetMapping("/singout.do")

public String signout(HttpSession session) {

session.invalidate();

return "redirect:/";

}

==========================================================================

ㅁ singup.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}" />

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

.smallfont {font-size: 0.8em;}

.uncheck {display: none;} /* 유효성 검사 전일 경우 */

.unusable {color: red;} /* 사용 불가능인 경우 */

.usable {color: green;} /* 사용 가능인 경우 */

</style>

</head>

<body>

<jsp:include page="/WEB-INF/views/common/header.jsp"/>

<br>

<br>

<label for="userPwd">* Password :</label>

<br>

<label for="checkPwd">* Password Check :</label>

<br>

<br>

<label for="email">   Email :</label>

<label for="phone">   Phone :</label>

<label for="address">   Address :</label>

<label for="">   Gender : </label>   

</div>

<br>

</div>

</form>

// 각 항목의 값들이 유효한 값으로 입력되면 true로 변경된다.

let idResult = false;

let pwdResult = false;

let pwdEqualResult = false;

let nameResult = false;

// input 요소들 유효성검사때마다 회원가입 버튼을 활성화 또는 비활성화 처리하는 함수

function validate(){

if(idResult && pwdResult && pwdEqualResult && nameResult){ // 각각이 true 또는 false이므로 조건으로 쓸 수도 있다. // 모든 값들이 다 유효한 값으로 입력되는 순간

$('#signup_form :submit').removeAttr('disabled'); // 회원가입버튼 활성화

}else {

$('#signup_form :submit').attr('disabled', true); // 회원가입버튼 비활성화

}

// input 요소에 작성된 값이 없는지 체크하는 함수

function noValueCheck($input, $result){ // 비교할 input 요소 객체, 메세지 출력되는 div요소객체

if($input.val().trim().length == 0){ // 값이 비어있을 경우

$result.removeClass("usable unusable")

.addClass("uncheck")

.text(""); // uncheck활성화 (결과 영역 출력 숨기기)

return false; // 유효성 검사를 진행할 필요가 없기 때문에 false 반환

}

return true; // 유효성 검사를 진행하도록 true 반환

}

// input 요소에 작성된 값이 정규식(유효한패턴)에 만족하는지 체크하는 함수

function regExpCheck($input, $result, regExp, msg1, msg2){

if(regExp.test($input.val())){ // 유효한 값으로 잘 입력됐을 경우

$result.removeClass("uncheck unusable")

.addClass("usable")

.text(msg1);

return true;

}else { // 유효하지 않은 값으로 입력됐을 경우

$result.removeClass("uncheck usable")

.addClass("unusable")

.text(msg2);

return false;

}

$(function(){

// 아이디 유효성검사

$('#signup_form #userId').on("keyup", function(){

let regExp = /^[a-z\d]{5,12}$/;

idResult = noValueCheck( $(this), $("#idCheck_result") )

&& regExpCheck( $(this), $("#idCheck_result")

,regExp, "사용가능한 아이디입니다."

, "영문, 숫자 포함 5~12자리로 작성해주세요.");

if(idResult){

$.ajax({

url: '${contextPath}/member/idcheck.do',

async: false,

data: "checkId=" + $(this).val(),

success: function(resData){

if(resData == "NNNN"){

$("#idCheck_result").removeClass("uncheck usable")

.addClass("unusable")

.text("중복된 아이디가 존재합니다. 다시 입력해주세요.");

idResult = false;

}

})

}

validate();

})

// 비밀번호 유효성검사

$('#signup_form #userPwd').on("keyup", function(){

let regExp = /^[a-z\d!@#$%^&*]{8,15}$/i;

pwdResult = noValueCheck( $(this), $("#pwdCheck_result") ) // true아니면 false가 돌아온다.

&& regExpCheck( $(this), $("#pwdCheck_result") // 자바스크립트의 short-circuit. 위의 조건이 true일 경우 실행할 내용을 뒤에 작성한다.

, regExp, '사용가능한 비밀번호입니다.'

, '영문, 숫자, 특수문자 포함 8~15자리로 작성해주세요.' );

validate();

})

// 비밀번호확인 유효성검사

$('#signup_form #checkPwd').on("keyup", function(){

//일치하는지 비교 할 거임

//비교할 패턴이 위(pwd유효성 검사)와 동일한지 비교

let regExp = new RegExp("^" + $("#signup_form #userPwd").val() + "$");

pwdEqualResult = pwdResult && noValueCheck($(this),$("#pwdEqualCheck_result"))

&& regExpCheck($(this),$("#pwdEqualCheck_result")

, regExp,'비밀번호가 일치합니다.'

,'비밀번호가 일치하지 않습니다.');

validate();

})

// 이름 유효성검사

$('#signup_form #userName').on("keyup", function(){

let regExp = /^[가-힣]{2,5}$/;

nameResult = noValueCheck( $(this), $("#nameCheck_result") )

&& regExpCheck( $(this), $("#nameCheck_result")

, regExp, "사용가능한 이름입니다."

, "한글 2~%글자로 작성해주세요.");

validate();

}) // name check end

})

</script>

</div>

</section>

<jsp:include page="/WEB-INF/views/common/footer.jsp"/>

</div>

</body>

</html>

- 아이디 유효성검사는 ajax로 중복체크도 한다.

- form의 action값으로 "${contextPath}/member/insert.do"를 줬다.

- 각 input에 name을 줬다.

ㅁ MemberController

package com.br.spring.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PostMapping;

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

import org.springframework.web.bind.annotation.ResponseBody;

import com.br.spring.dto.MemberDto;

import com.br.spring.service.MemberService;

import lombok.RequiredArgsConstructor;

import lombok.extern.slf4j.Slf4j;

@Slf4j

@RequestMapping("/member")

@RequiredArgsConstructor

@Controller

public class MemberController {

private final MemberService memberService;

@PostMapping("/signin.do")

public void signin(MemberDto m, HttpServletResponse response, HttpSession session, HttpServletRequest request) throws IOException {

MemberDto loginUser = memberService.selectMember(m);

// 로그인 성공시 => 세션에 회원정보를 담고, alert와 함께 메인 페이지로 이동

// 로그인 실패시 => alert와 함께 기존에 보던 페이지 유지(아이디, 비번 입력하는 로그인 폼 유지. 작성하던 입력데이터도 그대로.)

// script문을 응답데이터로 돌려줘서 흐름제어

response.setContentType("text/html; charset=utf-8");

PrintWriter out = response.getWriter();

out.println("<script>");

if(loginUser != null) { // 로그인 성공

session.setAttribute("loginUser", loginUser);

out.println("alert('" + loginUser.getUserName() + "님 환영합니다~');");

out.println("location.href = '" + request.getHeader("referer") + "';"); // 메인페이지가 아닌 이전에 보던 페이지로 이동

}else { // 로그인 실패

out.println("alert('로그인에 실패하였습니다. 아이디 및 비밀번호를 다시 확인해주세요.');");

out.println("history.back();"); // modal이 띄워진 상태였으면 modal도 유지된다.

}

out.println("</script>");

}

@GetMapping("/singout.do")

public String signout(HttpSession session) {

session.invalidate();

return "redirect:/";

}

@GetMapping("/signup.do")

public void signupPage() { } //WEB-INF/views/member/signup.jsp

@ResponseBody

@GetMapping("/idcheck.do")

public String idCheck(String checkId) {

return memberService.selectUserIdCount(checkId) == 0 ? "YYYY" : "NNNN";

}

@PostMapping("/insert.do")

public void signup(MemberDto m) {

log.debug("암호화 전 member: {}", m);

}

- idCheck 메소드를 만든다.

- 반환되는 문자열이 응답 뷰가 아닌 응답 문자열이므로 @ResponseBody를 붙여야 한다.

- 여기서 반환되는 문자열이 화면단으로 응답되어 success의 매개변수(resData)에 담긴다.

- signup 메소드를 만든다.

- 비밀번호 확인은 굳이 넘길 필요는 없다.

- 그런데 비밀번호를 db에 사용자가 있는 그대로(평문값으로) 기록하면 안된다.

암호화처리를 해서 암호문으로 기록해야 한다.

- 로그를 찍어보기 위해 @Slf4j를 쓴다.

debug로 멤버 객체를 찍어본다. 지금은 평문값으로 보여질 것이다.

'Spring' 카테고리의 다른 글

[웹프로젝트] 6. 회원가입(2) - 암호화 (0)	2024.10.28
[웹프로젝트] 5. 회원가입 (1)	2024.10.28
[웹프로젝트] 3. 단위테스트? 멤버 mapper (0)	2024.10.25
[웹프로젝트] 2. 헤더, 푸터, 메인페이지, 에러페이지 (0)	2024.10.25
[웹프로젝트] 1. 세팅 (0)	2024.10.25

공부 블로그

[웹프로젝트] 4. 로그인, 로그아웃, 회원가입

'Spring' 카테고리의 다른 글

티스토리툴바

[웹프로젝트] 4. 로그인, 로그아웃, 회원가입

'Spring' 카테고리의 다른 글

관련글

티스토리툴바