Spring Boot Board Project_05_02 이메일 유효성 검사

송지윤·2024년 4월 19일

Spring Framework

목록 보기

37/65

인증번호 받기 버튼 클릭했을 때 인증번호 발송

1. 발송한 인증 번호, 받은 이메일 저장할 테이블 필요

CREATE TABLE "TB_AUTH_KEY"(
	"KEY_NO"    NUMBER PRIMARY KEY,
	"EMAIL"	    NVARCHAR2(50) NOT NULL,
	"AUTH_KEY"  CHAR(6)	NOT NULL,
	"CREATE_TIME" DATE DEFAULT SYSDATE NOT NULL
);

COMMENT ON COLUMN "TB_AUTH_KEY"."KEY_NO"      IS '인증키 구분 번호(시퀀스)';
COMMENT ON COLUMN "TB_AUTH_KEY"."EMAIL"       IS '인증 이메일';
COMMENT ON COLUMN "TB_AUTH_KEY"."AUTH_KEY"    IS '인증 번호';
COMMENT ON COLUMN "TB_AUTH_KEY"."CREATE_TIME" IS '인증 번호 생성 시간';

CREATE SEQUENCE SEQ_KEY_NO NOCACHE; -- 인증키 구분 번호 시퀀스

SELECT * FROM "TB_AUTH_KEY";

COMMIT;

2. 이메일 인증 관련 요소 얻어오기

signup.html

<div class="signUp-input-area">
          <input type="text" name="memberEmail" id="memberEmail" 
          placeholder="아이디(이메일)" maxlength="30" autocomplete="off">
          
          <button id="sendAuthKeyBtn" type="button">인증번호 받기</button>
        </div>
        
        <span class="signUp-message" id="emailMessage">메일을 받을 수 있는 이메일을 입력해주세요.</span>



        <!-- 인증번호 입력 -->
        <label for="emailCheck">
          <span class="required">*</span> 인증번호
        </label>

        <div class="signUp-input-area">
          <input type="text" name="authKey" id="authKey" placeholder="인증번호 입력" maxlength="6" autocomplete="off" >
          
          <button id="checkAuthKeyBtn" type="button">인증하기</button>
        </div>

        <span class="signUp-message" id="authKeyMessage"></span>

signup.js

// 인증번호 받기 버튼
const sendAuthKeyBtn = document.querySelector("#sendAuthKeyBtn");

// 인증번호 입력 input
const authKey = document.querySelector("#authKey");

// 인증번호 입력 후 확인 버튼
const checkAuthKeyBtn = document.querySelector("#checkAuthKeyBtn");

// 인증번호 관련 메세지 출력 span 태그
const authKeyMessage = document.querySelector("#authKeyMessage");

인증번호 받기 버튼 클릭 후 인증번호 입력할 때까지 5분

1. 타이머 역할을 할 setInterval을 저장할 전역 변수

let authTimer;

const initMin = 4; // 타이머 초기값 (분)
const initSec = 59; // 타이머 초기값 (초)
const initTime = "05:00";

// 실제로 줄어드는 시간을 저장할 변수
let min = initMin;
let sec = initSec;

2. 인증번호 받기 버튼 클릭 시 타이머 시작 함수

sendAuthKeyBtn.addEventListener("click", () => {

    // 인증번호 받기 클릭할 때마다 시간 초기화, 인증 번호 다시 발송
    // 인증버튼 재클릭 했을 때 이미 true 였어도 다시 false로 바꿔줘야함
    checkObj.authKey = false;
    authKeyMessage.innerText = "";

    // 중복되지 않은 유효한 이메일을 입력한 경우가 아닐 때
    if(!checkObj.memberEmail) {
        alert("유효한 이메일 작성 후 클릭해 주세요");
        return;
    }

    // 클릭 시 타이머 숫자 초기화
    min = initMin;
    sec = initSec;

    // 이전 동작 중인 인터벌 클리어
    clearInterval(authTimer);

3. 비동기로 서버에 메일 보내기(다음 페이지에 작성)

// ****************************************************
// 비동기로 서버에서 메일 보내기

// ****************************************************

4. 메일 비동기로 서버에 보내고 화면에서는 타이머 시작

    authKeyMessage.innerText = initTime; // 05:00 세팅
    authKeyMessage.classList.remove('confirm', 'error'); // 검정 글씨

    alert("인증번호가 발송되었습니다.");

setInterval(함수, 지연시간(ms))

지연시간(ms)만큼 시간이 지날 때 마다 함수 수행

clearInterval(Interval이 저장된 변수)

매개변수로 전달받은 interval을 멈춤

    // 인증 시간 출력(1초마다 동작)
    authTimer = setInterval( () => {
        
        authKeyMessage.innerText = `${addZero(min)}:${addZero(sec)}`;

        // 0분 0초인 경우 ("00:00" 출력 후)
        if(min == 0 && sec == 0) {
            checkObj.authKey = false; // 인증 못함
            clearInterval(authTimer); // interval 멈춤
            authKeyMessage.classList.add('error');
            authKeyMessage.classList.remove('confirm');
            return;
        }

        // 0초인 경우 (0초를 출력한 후)
        if(sec == 0) {
            sec = 60;
            min--;
        }

        // 평상시 (1초 감소)
        sec--;

    }, 1000 ); // 1초 지연시간
});

// 전달 받은 숫자가 10 미만인 경우(한자리) 앞에 0 붙여서 반환
function addZero(number) {
    if(number < 10) return "0" + number;
    else return number;
}

5. 유효한 이메일 입력 후 인증번호 발송 받고 이메일 수정했을 경우

memberEmail 에 input 될 때마다 유효성 검사를 하는 함수에 구문 추가 작성

memberEmail.addEventListener("input", e => {

    // 이메일 인증 후 이메일이 변경된 경우
    checkObj.authKey = false;
    document.querySelector("#authKeyMessage").innerText = "";
    clearInterval(authTimer);