로그인 구현하기
이번엔 로그인을 구현해보도록 하겠습니다.
스프링에서 로그인 기능을 구현하기 위해선 다음 파일들에 로그인을 구현하기 위한 소스코드를 작성해야 합니다.
이 파일들에서 소스코드를 작성하기 전에 알아둬야 할 것이 있는데,
로그인 기능이 구현되기 위해서는 이 파일들에 소스코드를 작성하기 이전에,
데이터베이스 테이블이 만들어져 있어야 합니다.
데이터 테이블 생성은 이전에 제가 작성했던 글을 참고하시면 됩니다.
https://daramgda.tistory.com/18?category=546917
MemberVO.java
우선 MemberVO.java에서 다음과 같이 로그인 기능에 사용될 변수를 선언해야합니다.
그리고 getter와 setter를 작성해야합니다.
package com.myspring.springProject.member.vo;
import java.sql.Date;
import org.springframework.stereotype.Component;
@Component("memberVO")
public class MemberVO {
private String id;
private String pwd;
private String name;
private String email;
private Date joinDate;
public MemberVO() {
}
public MemberVO(String id, String pwd, String name, String email) {
this.id = id;
this.pwd = pwd;
this.name = name;
this.email = email;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Date getJoinDate() {
return joinDate;
}
public void setJoinDate(Date joinDate) {
this.joinDate = joinDate;
}
}
member.xml
member.xml에 쿼리문을 작성하였습니다.
파라미터와 resultType을 앞서 작성했던 memberVO로 설정했습니다.
이제 DAO와 Service에 로그인 관련 메서드를 작성해야 합니다.
MemberDAO.java & MemberDAOImpl.java
loginById(MemberVO memberVO) 에 파라미터 값이 전달됩니다.
앞서 member.xml에서 id=loginById인 쿼리문을 작성했는데,
여기서 조회한 데이터들이 MemberVO에 담기게됩니다.
MemberService.java & MemberServiceImpl.java
MemberController.java & MemberControllerImpl.java
@RequestMapping을 통해 로그인과 로그아웃 시 올바로 찾아갈 수 있게 해줍니다.
로그인 성공 시 isLogOn을 true상태로 만들고 listMembers.do 페이지를 보여주게 됩니다.
로그인 실패 시엔 result=='loginFailed'를 만들고 로그인창으로 돌아가게 됩니다.
이제 로그인이 잘 되는지 확인해보겠습니다.
우선 지금 데이터베이스에 저장되어있는 회원들입니다.
회원도 아닌 핑크빈이 무단침입을 시도하고 있습니다.
회원이 아니므로 거절당합니다.
앞서 말했듯이 로그인 실패 시 result=='loginFailed'를 만들고 로그인창으로 돌아가게 됩니다.
로그인창에서 result=='loginFailed'이면 경고가 뜨게 설정하였습니다.
또 로그인 성공 시에는 isLogOn == true이므로 상단 바에서 로그인 버튼이 사라지고 로그아웃 버튼이 생기게 됩니다.
앞서 말했듯이 로그인 성공시에 listMembers.do 페이지를 보여주게 됩니다.
저번에 사용했던 이 테이블 역시 부트스트랩을 이용해서 줄무늬 테이블 디자인을 적용하였습니다.
이제 로그인을 구현하였으니
비동기적으로 회원가입 시 아이디를 중복인지 아닌지 검사하는 기능을 추가하겠습니다.
jQuery Ajax란?
회원가입 시 중복 여부를 확인하기 위해서는 보통 회원가입 페이지는 브라우저에 표시된 채
ID 중복 여부를 확인하는 창만 서버에 질의하여 화면에 따로 보여주게 됩니다.
이렇게 클라이언트 측에서의 작업과는 상관없이 비동기적으로 서버와 작업을 수행할 때
jQuery의 Ajax 기능을 사용하면 편리합니다.
Ajax는 페이지의 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능합니다.
( *비동기적 처리 작업 : 순서대로 진행하는 것이 아니라 한번에 여러 개가 진행되는 것 )
jQuery에서 Ajax 기능을 사용하기 위해선 다음과 같이 코드를 작성하면 됩니다.
$.ajax({
type: "post 또는 get", <!-- 통신 타입 설정 -->
async: "true 또는 false", <!-- 비동기식(async:"true")으로 처리할지 여부 -->
url: "요청할 URL", <!-- 요청할 url 설정 -->
data: {서버로 전송할 데이터} <!-- 서버에 요청할 때 보낼 매개변수 설정 -->
dataType: "서버에서 전송받을 데이터형식", <!-- 응답 받을 데이터 타입(XML,HTML,JSON 등) -->
success: { }, <!-- 요청 및 응답에 성공했을 때 처리 구문 설정 -->
error: fuction(xhr,status,error){ }, <!-- 요청 및 응답에 실패했을 때 처리 구문 설정 -->
complete: fuction(data,textStatus){ }, <!-- 모든 작업을 마친 후 처리 구문 설정 -->
});
jQuery Ajax 사용해 아이디 실시간 중복 검사 구현
Ajax를 이용해 실시간으로 보여주고 사라지게 하는 텍스트 설정
아이디가 중복이 아닌 경우와 중복인 경우에 띄울 문구를 각각 설정해둡니다.
각 텍스트의 class와 색을 설정했고, display를 none으로 설정해 처음엔 보이지 않게 해두었습니다.
Ajax 틀 작성하기
Ajax가 비동기적으로, 그러니까 여기서는 실시간으로 값을 전달하게 되는데
어떤 값을 어떤 방식으로 어디서 주고받으며, 어떤 함수를 작동시킬지 코드를 작성하면 됩니다.
여기선 id를 post 방식으로 member/idCheck라는 주소에 보내게 되고,
Controller -> Service -> DAO -> Mapper 로 보내고
입력한 id값이 데이터베이스에 존재하는 id값과 동일한 것이 있는지 비교하고 그 결과값을
다시 리턴받을 수 있습니다.
( 동일한 것이 있을 경우 1을 리턴 받고, 아닐 경우 0을 리턴 받습니다. )
그 리턴받은 값을 이용해 if문을 사용하면 실시간으로 텍스트를 띄우고 숨기고 할 수 있게 됩니다.
Controller부터 Mapper까지 작성하기
앞서 Controller -> Service -> DAO -> Mapper 과정을 거쳐서 값을 전달한다고 했는데,
하나씩 코드를 작성해 보겠습니다.
MemberControllerImpl.java
아까 ajax에서 설정한 주소인 /member/idCheck를 제대로 매핑해줍니다.
전달 받은 id는 memberService의 idCheck로 이동하고, 그 리턴값을 cnt에 저장하는 코드입니다.
MemberService.java
MemberServiceImpl.java
여기서도 마찬가지입니다.
전달 받은 id는 memberDAO의 idCheck로 이동하고, 그 리턴값을 cnt에 저장합니다.
MemberDAO.java
MemberDAOImpl.java
여기선 member.xml에 있는 쿼리문을 읽어들여 리턴값을 받게 됩니다.
member.xml에선 입력받았던 id가 드디어 데이터베이스에 있는 id들과 중복된 것이 있는지 확인됩니다.
member.xml
회원정보가 저장되어 있는 테이블인 t_member에서 중복된 아이디가 있을 경우 1을 아닌 경우 0을 반환한다.
이제 다시 loginForm.jsp로 돌아가서 간략하게 틀만 잡았던 ajax를 디테일하게 작성해줍니다.
loginForm.jsp
그런데 이렇게 작성했더니 불편한 부분이 눈에 띕니다.
아이디폼의 문자열이 비어도 아이디 중복 여부를 말해주는 아래쪽의 문구가 사라지지 않습니다.
그래서 코드를 조금 수정해서 문제를 해결하였습니다.
중복 여부를 알려주는 문구들의 조건에서 id 글자 길이가 1이상이여야 한다는 조건을 추가했고,
그 외의 경우에는 중복 여부 문구를 모두 보이지 않게 설정하였습니다.
여기까지 로그인을 구현하고,
jQuery ajax를 이용해 회원가입 시 실시간 아이디 중복검사 기능을 구현해보았습니다.
다음 시간엔 spring security 프레임워크의 JWT(JSON Web Token)를 로그인에 적용해보겠습니다.
'자바 스프링 > 스프링 게시판 프로젝트' 카테고리의 다른 글
#4 계정(시큐리티 적용)과 게시판 CRUD 구현 (0) | 2022.05.28 |
---|---|
#2 jQuery와 Bootstrap 디자인 구현, ui를 이용한 애니메이션 구현 (0) | 2022.04.08 |
#1 마이바티스 & 회원가입 데이터베이스 연동 확인 (0) | 2022.03.30 |
#0 개발 환경 세팅1 (0) | 2022.03.29 |
자바 스프링을 이용한 게시판 + 채팅창 (0) | 2022.03.28 |