240228 스프링 프로젝트

오늘은 회원가입 만들기

 

회원가입을 만들기 전에 먼저 어떤식으로 구상할 지 그려봄

OvenApp.io

 

스케치 -> 와이어 프레임 -> 목업 -> 프로토타입 -> 스토리보드

 

와이어 프레임

기획 단계의 기초를 제작하는 단계, 페이지의 레이아웃이나 UI 요소 등 / 뼈대

 

목업

와이어프레임보다 조금 더 설계 화면과 유사하게 만드는 것 / 정적 모델링

 

프로토타입

다양한 인터렉션이 결합되어 실제 서비스처럼 동작하는 것

 

스토리보드

설명, 기능 명세서, 와이어 프레임, 프로레스, 정책 등 / 설계 문서, 화면 설계서

 

서비스 기획자를 위한 프로토타이핑 툴 소개

 

데이터베이스 암호화 (비밀번호 등)

사용자 입력 값 -> jsp -> 스프링 -> DB

 

개인정보는 모두 다 암호화해서 저장하기

 

암호화 해보기, AES 방식

SELECT 
  HEX(
    AES_ENCRYPT('0','solbum')
  )
FROM DUAL;

-- 5D0B0ABC92A571F86911E32CCF517ECB

 

AES_ENCRYPT(A,B)

A 의 문자를 B 의 키로 암호화 및 복호화를 진행

 

B 가 유출되면 암호화한 정보가 무의미해짐

 

복호화 하기

SELECT
AES_DECRYPT(
  UNHEX('5D0B0ABC92A571F86911E32CCF517ECB') ,'solbum')
FROM DUAL;

 

HEX 화 한 코드는 UNHEX 화 한 코드를 KEY 값과 같이 넣어 복호화 할 수 있음

 

암호화 해보기, MD5 방식

SELECT MD5('12345') FROM DUAL
-- 827ccb0eea8a706c4c34a16891f84e7b

 

이 방식은 복호화를 할 수 없음

 

암호화 해보기, SHA2 방식

SELECT SHA2('01234567', 224)
FROM DUAL;
-- 924592b9b103f14f833faafb67f480691f01988aa457c0061769f58cd47311bc

---

AES 방식으로 회원가입 만들기

BootStrap 을 이용해서 회원가입 창을 만듬, 기존 Login 과 비슷한 구조로 만듦

<div class="">
  <div class="joinBoxTitle">회원가입</div>
  <form onsubmit="return allCheck()" method="post" action="./join">
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">아이디</span>
      <input type="text" class="form-control" placeholder="아이디 입력" aria-label="Username" aria-describedby="basic-addon1" name="mid" id="mid" />
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">비밀번호</span>
      <input type="password" class="form-control" placeholder="비밀번호 입력" aria-label="Username" aria-describedby="basic-addon1" name="pw1" id="pw1" />
      <input type="password" class="form-control" placeholder="한번 더 입력하기" aria-label="Username" aria-describedby="basic-addon1" name="pw2" id="pw2" />
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">닉네임</span>\
      <input type="text" class="form-control" placeholder="닉네임 입력" aria-label="Username" aria-describedby="basic-addon1" name="mname" id="mname" />
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">이메일</span>
      <input type="text" class="form-control" placeholder="이메일 입력" aria-label="Username" aria-describedby="basic-addon1" name="memail" id="memail" />
    </div>
    <div class="text-end">
      <a type="button" class="btn btn-outline-dark" onclick="return valueCheck()">중복확인</a>
      <button type="submit" class="btn btn-outline-dark" disabled="true" id="joinBtn">가입하기</button>
    </div>
  </form>
</div>

 

 

중복 확인을 진행해야 가입하기 버튼이 활성화 됨

 

아이디, 닉네임, 이메일마다 버튼을 달아 중복 체크를 하려고 하였으나,

중복 확인을 해야하는 것이 너무 많아 전체의 중복 여부를 확인하는 버튼을 만듦

 

중복 확인은 ajax 로 진행, 입력 값의 길이, 형식도 체크

let valueCheckBoolean = false;
const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
  
$(document).ready(function() {
  $('#mid').on('keydown', function() {
    valueCheckBoolean = false;
    $('#joinBtn').attr('disabled', true);
  });
    
  $('#memail').on('keydown', function() {
    valueCheckBoolean = false;
    $('#joinBtn').attr('disabled', true);
  });
    
  $('#mname').on('keydown', function() {
    valueCheckBoolean = false;
    $('#joinBtn').attr('disabled', true);
  });
});

function valueCheck() {
  const mid = document.getElementById('mid');
  const memail = document.getElementById('memail');
  const mname = document.getElementById('mname');
    
  if (mid.value.length < 5 || korean.test(mid.value)) {
    alert("아이디는 5글자 이상 혹은 정확한 아이디를 입력해주세요.");
    mid.focus();
    return false;
  }

  if (mname.value.length < 3) {
    alert("닉네임은 3글자 이상으로 적어주세요");
    mname.focus();
    return false;
  }
    
  if (memail.value.indexOf('@') == -1) {
    alert("정확한 이메일을 적어주세요");
    memail.focus();
    return false;
  } else if (memail.value.indexOf('.') == -1) {
    alert("정확한 이메일을 적어주세요");
    memail.focus();
    return false;
  }
    
  $.ajax({
    url : './valueCheck',
    method : 'post',
    data : { 'mid' : mid.value, 'memail' : memail.value,  'mname' : mname.value},
    dataType : 'text',
    success : function (result) {
      if (result == 0) {
        alert("사용 가능합니다.");
        valueCheckBoolean = true;
        $('#joinBtn').attr('disabled', false);
      } else {
        alert("이미 등록된 값이 있습니다.");
        $('#joinBtn').attr('disabled', true);
      }
    },
    error: function (error) {
      alert("error 발생");
    }
  });
}

function allCheck() {
  let pw1 = document.getElementById('pw1');
  let pw2 = document.getElementById('pw2');
  // let pw1 = document.querySelector("#pw1");
  // let pw2 = document.querySelector("#pw2");
  if (pw1.value.length <= 5 || pw2.value.length <= 5) {
    alert("비밀번호 길이가 짧습니다.");
    pw1.focus();
    return false;
  } else if (pw1.value != pw2.value) {
    alert("비밀번호를 확인하세요");
    pw1.focus();
    return false;
  }

  if (!valueCheckBoolean) {
    alert("중복확인을 진행하세요.");
    return false;
  }
}

 

Controller 에서 값 받기

먼저 Ajax 로 중복 값 있는지 체크하는 값 받기

@ResponseBody
@PostMapping("/valueCheck")
public int valueCheck(MemberDTO dto) {
  return loginService.valueCheck(dto);
}

 

기존에 만들었던 비동기 Controller 에서 해도 되지만, LoginController 에서 해보고 싶었음..

근데.. @ResponseBody 어노테이션을 안걸어둬서 계속 오류가 발생했는데,, 다음부턴 실수하지 않길..

 

Service, Repository 그리고 Mapper

public int valueCheck(MemberDTO dto) {
  return loginRepository.valueCheck(dto);
}

public int valueCheck(MemberDTO dto) {
  return sqlSession.selectOne("login.valueCheck", dto);
}

<select id="valueCheck" parameterType="memberDTO" resultType="Integer">
  select count(0) as count from member 
  where mid = #{mid} or memail = #{memail} or mname = #{mname}
</select>

 

OR 을 이용하여 mid, memail, mname 중 하나라도 겹치면 가입이 되지 않도록 함

 

회원가입 하기

모든 조건을 통과하면 진행되는 내용

 

먼저 Controller 에서 값 받기

@PostMapping("/join")
public String join(MemberDTO dto, @RequestParam("pw1") String pw) {
  int result = loginService.join(dto);
  if (result == 1) {
    return "redirect:/login";
  } else {
    return "redirect:/error";
  }
}

 

Service 와 Repository 그리고 Mapper, Password 는 암호화해서 넣기

public int join(MemberDTO dto) {
  return loginRepository.join(dto);
}
  
public int join(MemberDTO dto) {
  return sqlSession.insert("login.join", dto);
}

<insert id="join" parameterType="memberDTO">
  insert into member (mid, mname, memail, mpw)
  values (#{mid}, #{mname}, #{memail}, HEX(AES_ENCRYPT(#{pw1}, #{mid})))
</insert>

 

정상적으로 암호화 된 pw 가 저장됨

 

이메일주소 유효성 검사하는 법

이메일주소 유효성 검사하는 방법