springwebmvcproject

<script>

//start jQuery

 

$(function() {

 

//각 입력값들의 유효성 검증을 위한 정규표현식을 변수로 선언.

const getIdCheck = RegExp(/^[a-zA-Z0-9]{4,14}$/);

const getPwCheck = RegExp(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/);

const getNameCheck = RegExp(/^[가-힣]+$/);

 

//입력값 중 하나라도 만족하지 못한다면 회원가입 처리를 막기 위한 논리형 변수를 선언.

let chk1 = false, chk2 = false, chk3 = false, chk4 = false;

 

//회원 가입 시 사용자의 입력값을 검증하빈다.

 

//1. ID 입력값 검증

$('#user_id').keyup(function() {

 

if($(this).val() === '') {

$(this).css('background-color', 'pink');

$('#idChk').html('<b style="font-size: 14px; color: red">[아이디는 필수 정보입니다.]</b>');

chk1 = false;

}

//아이디 입력값 유효성 검사 (영문으로만 4~14글자 허용.)

//정규표현식변수.test('검증하고 싶은 값') -> return boolean type

//정규표현식에 어긋난 값이면 false, 올바른 값이면 true.

else if(!getIdCheck.test($(this).val())) {

$(this).css('background-color', 'pink');

$('#idChk').html('<b style="font-size: 14px; color: red">[영문자, 숫자 조합 4-14자로 해 주세요.]</b>');

chk1 = false;

}

//ID 중복 확인 (비동기 처리)

//특정 로직의 실행이 끝날 때까지 기다리지 않고 먼저 코드를 실행.(페이지 전환 없이 통신)

else {

 

//ID 중복 확인 통신을 위해 입력값을 가져오기

const id = $(this).val();

 

//ajax 호출.

//클라이언트에서 서버와 비동기 통신을 진행하는 ajax 함수.

$.ajax({

type : 'POST', //서버에 전송하는 HTTP 방식

url : '/user/checkId', //서버 요청 url

headers : {

'Content-Type' : 'application/json'

},

dataType : 'text', //서버로부터 응답받을 데이터의 형태

data : id, //서버로 전송할 데이터

success : function(result) { //매개변수에 통신 성공 시 데이터가 저장됨.

//서버와 통신 성공 시 실행할 내용.

console.log('통신 성공!: ' + result);

if(result === 'available') {

$('#user_id').css('background-color', 'aqua');

$('#idChk').html('<b style="font-size: 14px; color: green;">[아이디 사용이 가능합니다.]</b>');

chk1 = true;

} else {

$('#user_id').css('background-color', 'pink');

$('#idChk').html('<b style="font-size: 14px; color: red;">[아이디가 중복되었습니다.]</b>');

chk1 = false;

}

},

error : function(status, error) {

console.log('통신 실패!');

console.log(status, error);

}

 

}); //end ajax (아이디 중복 확인)

}

}); //아이디 검증 끝.

 

//2. 패스워드 입력값 검증

$('#password').keyup(function() {

 

//비밀번호란 공백 확인

if($(this).val() === '') {

$(this).css('background-color', 'pink');

$('#pwChk').html('<b style="font-size: 14px; color: red;">[비밀번호는 필수 정보입니다.]</b>');

chk2 = false;

}

//비밀번호 유효성 검사

else if(!getPwCheck.test($(this).val()) || $(this).val().length < 8) {

$(this).css('background-color', 'pink');

$('#pwChk').html('<b style="font-size: 14px; color: red;">[특수문자 포함 8자 이상으로 하세요.</b>');

chk2 = false;

}

//통과

else {

$(this).css('background-color', 'aqua');

$('#pwChk').html('<b style="font-size: 14px; color: green;">[비밀번호가 입력 완료되었습니다.]</b>');

chk2 = true;

}

 

}); //비밀번호 검증 끝.

 

//3. 비밀번호 확인란 입력 검증.

$('#password_check').keyup(function() {

//비밀번호 확인란 공백 검증

if($(this).val() === '') {

$(this).css('background-color', 'pink');

$('#pwChk2').html('<b style="font-size: 14px; color: red;">[비밀번호 확인은 필수 정보입니다!]</b>');

chk3 = false;

}

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

else if($(this).val() !== $('#password').val()) {

$(this).css('background-color', 'pink');

$('#pwChk2').html('<b style="font-size: 14px; color: red;">[비밀번호와 일치하지 않습니다.]</b>');

chk3 = false;

} else {

$(this).css('background-color', 'aqua');

$('#pwChk2').html('<b style="font-size: 14px; color: green;">[비밀번호가 확인 완료되었습니다.]</b>');

chk3 = true;

}

 

}); //비밀번호 확인 검증 끝.

 

//4. 이름 입력값 검증.

$('#user_name').keyup(function() {

//이름값 공백 확인

if($(this).val() === '') {

$(this).css('background-color', 'pink');

$('#nameChk').html('<b style="font-size: 14px; color: red;">[이름은 필수 정보입니다.]</b>');

chk4 = false;

}

//이름값 유효성 검사

else if(!getNameCheck.test($(this).val())) {

$(this).css('background-color', 'pink');

$('#nameChk').html('<b style="font-size: 14px; color: red;">[이름은 한글로만 작성하세요.]</b>');

chk4 = false;

} else {

$(this).css('background-color', 'aqua');

$('#nameChk').html('<b style="font-size: 14px; color: green;">[이름 입력 완료되었습니다.]</b>');

chk4 = true;

}

 

}); //이름 입력 검증 끝.

 

 

$('#signup-btn').click(function() {

 

if(chk1 && chk2 && chk3 && chk4) {

 

//아이디 정보

const id = $('#user_id').val();

//비밀번호 정보

const pw = $('#password').val();

//이름 정보

const name = $('#user_name').val();

 

const user = {

"account" : id,

"password" : pw,

"name" : name

};

 

//비동기 통신 시작!

$.ajax({

type : "POST",

url : "/user/",

contentType : "application/json",

dataType : "text",

//JavaScript 객체를 JSON문자열로 변환해 주는 메서드

data : JSON.stringify(user),

success : function(result) {

console.log('통신 성공!: ' + result);

alert('회원 가입을 환영합니다.');

location.href="/";

},

error : function() {

alert('회원 가입 실패!');

}

 

 

}); //end ajax(회원 가입 처리)

 

} else {

alert('입력 정보를 다시 확인하세요!');

}

 

}); // 회원 가입 처리 끝

 

//로그인 검증!

 

//ID 입력값 검증(공백, 정규표현식)

$('#signInId').keyup(function() {

if($(this).val() === '') {

$(this).css('background-color', 'pink');

$('#idCheck').html('<b style="font-size: 14px; color: red">[아이디는 필수 정보입니다.]</b>');

chk1 = false;

} else if(!getIdCheck.test($(this).val())) {

$(this).css('background-color', 'pink');

$('#idCheck').html('<b style="font-size: 14px; color: red">[영문, 숫자로 4-14자로 작성해야 합니다.]</b>');

chk1 = false;

} else {

$(this).css('background-color', 'aqua');

$('#idCheck').html('<b style="font-size: 14px; color: green">[아이디가 입력 완료되었습니다.]</b>');

chk1 = true;

}

}); //아이디 입력값 검증 끝

 

//비밀번호 입력값 검증(공백, 정규표현식)

$('#signInPw').keyup(function() {

if($(this).val() === '') {

$(this).css('background-color', 'pink');

$('#pwCheck').html('<b style="font-size: 14px; color: red">[비밀번호를 작성해 주세요.]</b>');

chk2 = false;

} else if(!getPwCheck.test($(this).val())) {

$(this).css('background-color', 'pink');

$('#pwCheck').html('<b style="font-size: 14px; color: red">[특수문자 포함 8자 이상으로 하셔야 합니다.]</b>');

chk2 = false;

} else {

$(this).css('background-color', 'aqua');

$('#pwCheck').html('<b style="font-size: 14px; color: green">[비밀번호가 입력 완료되었습니다.]</b>');

chk2 = true;

}

}); //비밀번호 입력값 검증 끝!

 

//로그인 버튼 클릭 이벤트 (ID, 비밀번호 둘 다 올바른 값이어야 이벤트 진행)

$('#signIn-btn').click(function() {

 

if(chk1 && chk2) {

 

 

const id = $('#signInId').val();

const pw = $('#signInPw').val();

 

console.log('id: ' + id);

console.log('pw: ' + pw);

 

const userInfo = {

"account" : id,

"password" : pw

};

 

$.ajax({

type : 'POST',

url : '/user/loginCheck',

contentType : 'application/json',

dataType : 'text',

data : JSON.stringify(userInfo),

success : function(data) {

if(data === 'idFail') {

//console.log('아이디가 없습니다.');

$('#signInId').css('background-color', 'pink');

$('#idCheck').html('<b style="font-size: 14px; color: red">[존재하지 않는 아이디입니다!]</b>');

$('#signInPw').val('');

$('#signInId').focus(); //커서를 이동시키고, 스크롤도 해당 위치로 이동시키는 함수.

chk1 = false, chk2 = false;

} else if(data === 'pwFail') {

//console.log('비밀번호가 틀렸습니다.');

$('#signInPw').css('background-color', 'pink');

$('#pwCheck').html('<b style="font-size: 14px; color: red">[비밀번호가 틀렸습니다!]</b>');

$('#signInPw').val('');

$('#signInPw').focus();

chk2 = false;

} else {

//console.log('로그인 성공!');

location.href='/';

}

},

error : function() {

console.log('통신 실패!');

}

 

}); //end ajax (로그인 비동기 처리)

 

} else {

alert('입력값을 다시 확인하세요.');

}

 

}); //로그인 버튼 클릭 이벤트 처리 끝!

 

}); //end jQuery

 

</script>

 

과거에는..^^ 비밀번호 찾기를 하면 전에 쓰던 비밀번호를 바로 알려주거나, 메일로 보내주곤 했는데

요즘 홈페이지에서 비밀번호 찾기를 하면 새 비밀번호를 설정하게 해 줍니다.

이유는,, 본인들도 회원들의 비밀번호가 암호화되어 전달돼서 모르기 때문입니다!

그래서 암호화도 배워봤습니다~

 

@Service

public class UserService implements IUserService {

@Autowired

private IUserMapper mapper;

 

@Override

public int checkId(String account) {

return mapper.checkId(account);

}

@Override

public void register(UserVO user) {

 

//회원 비밀번호를 암호화 인코딩

BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();

System.out.println("암호화 하기 전 비번: " + user.getPassword());

 

//비밀번호를 암호화 해서 user객체에 다시 저장하기.

String securePw = encoder.encode(user.getPassword());

System.out.println("암호화 후 비번: " + securePw);

user.setPassword(securePw);

 

mapper.register(user);

}

 

@Override

public UserVO selectOne(String account) {

return mapper.selectOne(account);

}

@Override

public void delete(String account) {

// TODO Auto-generated method stub

}

}

 

 

인터셉트에 대해서~!

 

//인터셉터 클래스를 만들려면 HandlerInterceptor 인터페이스를 구현합니다.

public class BoardInterceptor implements HandlerInterceptor{

//preHandle은 컨트롤러로 들어가기 전 처리해야 할 로직을 작성합니다.

 

@Override

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)

throws Exception {

 

System.out.println("게시판 인터셉터 발동합니다.");

HttpSession session = request.getSession();

 

if(session.getAttribute("login") == null) {

System.out.println("회원 인증에 실패했습니다.");

response.sendRedirect("/board/list");

return false; //false를 리턴하면 컨트롤러로 요청이 전달되지 않습니다.

}

System.out.println("회원 인증에 성공했습니다.");

return true; //true를 리턴하면 아무 일도 일어나지 않고 요청이 전달됩니다.

}

 

//postHandle은 컨트롤러로 나갈 때 공통 처리해야 할 내용을 작성합니다.

 

@Override

public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,

ModelAndView modelAndView) throws Exception {

 

System.out.println("게시판 인터셉터의 postHandle 호출합니다.");

 

System.out.println("모델 객체의 내부: " + modelAndView.getModel());

 

Object data = modelAndView.getModel().get("article");

System.out.println("article이라는 이름의 데이터: " + data);

 

/*

컨트롤러에서 로직을 처리하고 나가는 흐름을 붙잡아서

모델 데이터가 제대로 전송이 되는지 확인하고, 추가나 수정할 내용이 있다면

모델 객체가 받아와서 추가, 수정이 가능합니다.

기타 특징을 이용하여 흐름을 제어할 수도 있습니다. (sendRedirect, viewName을 수정)

servlet-xml 태그 추가를 물론 해 주고 사용하면 됩니다~

*/

 

 

 

}

}