Email 인증 로그인 시스템 구축하기

# 1.  전체 개발 프로세스 소개

1. 회원가입, 로그인 화면 개발

2. 사용자 이메일 인증번호 전송 및 인증번호 DB 저장

3. 사용자 인증번호 3분 이내 입력 3분 초과 시 재 전송 요청

4. 인증번호 매칭 시 회원가입 성공 후 화면으로 이동

 

해당 포스트는 react 화면단 보다 백엔드 프로세스를 실제 코드 및 설명 진행

# 2. 이메일 검증 프로세스

1. 이메일 전송

2. 서버에서 전송한 이메일로 인증번호 6자리 전달

3. 서버에서 해당 인증버호, 이메일 DB 저장

4. 사용자가 검증 버튼 클릭 하여 인증번호 확인

5. 인증번호 통과 시 회원가입

6. 인증번호 불일치 재 입력 또는 재발송

 

---

 

# 2. 개발환경 구성

react, spring, maven, postgreSql

 

---

 

# 3. 개발 코드 및 설명

회원가입 화면은 React 개발 진행

사용한 라이브러리:

1. React Hook Form
https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

화면단에서 서버로 데이터 전송 시 데이터 검증 및 유효성 검사를 쉽게 할 수 있도록 도와주는 라이브러리

문서를 잘 확인하고 사용한다면 기존 순수 react 코드보다 더 간결하게 코드를 작성할 수 있습니다.

 

2. axios

https://axios-http.com/kr/docs/intro

 

시작하기 | Axios Docs

 

서버에서 데이터를 보내거나 받을때 사용하는 라이브러리

 

3. react-router

https://reactrouter.com/en/main

Home v6.22.0 | React Router

react-router 에서 제공하는 useNavigate 함수를 사용하여 원하는 특정 페이지로 이동할 수 있습니다.

 

---

# 1.  이메일 전송

사용자가 전달해준 이메일로 인증번호 생성 후 이메일 보냅니다.

1. 해당 이메일이 존재하는지 확인

2. 인증번호 생성

3. 해당 이메일 회원 존재하지 않는다면 DB에 insert 문

4. 해당 이메일에 회원이 존재한다면 재전송 이므로 update로 유효시간 및 인증번호 update

 @PostMapping("/email/certification")
    public ResponseEntity<?> emailCertification(@RequestBody MemberDto memberDto) {
        log.info("이메일 보내기");

        //TODO 랜덤 6자리 authNumber 생성
        CertificationNumber certificationNumber = new CertificationNumber();
        String authNumber =  certificationNumber.getCertificationNumber();
        log.info("authNumber 생성 = {}", authNumber);

        //TODO 이메일 중복확인
        Map<String, Object> targetMember = memberService.findByEmail(memberDto.getEmail());

        //TODO 이메일 중복이 아니라면 해당 이메일에 전송 이메일 전송 시 병렬처리하여 빠르게 화면으로 돌아가게 하기
        if (targetMember == null) {
            emailProvider.sendCertificationMail(memberDto.getEmail(), authNumber);
            emailProvider.sendCertificationMail("sojunghan49@gmail.com", authNumber);

            MemberDto member = MemberDto.builder()
                    .email(memberDto.getEmail())
                    .authNumber(authNumber)
                    .vertifyTime(LocalDateTime.now())
                    .build();

            memberService.insertEmailAndAuthNumber(member);
        } else {
            //TODO 에러객체 생성해서 에러 인터페이스 설정하기 이미 등록된 이메일은 authnumber 를 다시 update
            log.info("이메일 재전송");
            emailProvider.sendCertificationMail(String.valueOf(targetMember.get("email")), authNumber);
            emailProvider.sendCertificationMail("sojunghan49@gmail.com", authNumber);

            MemberDto resendMember = MemberDto.builder()
                    .email(String.valueOf(targetMember.get("email")))
                    .authNumber(authNumber)
                    .vertifyTime(LocalDateTime.now())
                    .build();

            memberService.resendAuthNumber(resendMember);

        }
        return ResponseEntity.of(Optional.of("입력하신 이메일 주소에서 인증번호를 확인해주세요."));
    }

 

 

 

# 2. 인증번호 검증

1. 입력받은 이메일 조회

2. 해당 회원 기존 검증 받았는지 체크 검증이 되어있다면 검증 코드 반환

3. 유효시간 유효하지 않을 시 타임오버 코드 반환 재전송 요청 유도

4. 인증번호 매칭 실패 시 재입력 요청 및 재전송 유도

5. 인증번호 매칭 시 검증 코드 반환

@PostMapping("/email/vertify")
    public ResponseEntity<?> emailVertify(@RequestBody MemberDto memberDto) {
        log.info("memberDto = {}", memberDto);
        Map<String, Object> targetMember = memberService.findByEmail(memberDto.getEmail());
        log.info("targetMember = {}", targetMember);

        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
        LocalDateTime vertifyTime = LocalDateTime.parse(String.valueOf(targetMember.get("vertify_time")).replace(".0", ""), formatter);
        log.info("vertifyTime = {}", vertifyTime);

        LocalDateTime now = LocalDateTime.now();
        if (!now.isBefore(vertifyTime.plusMinutes(3))) {
            //TODO 다시 이메일 전송 하라고 메세지 전달
            log.info("인증시간 초과");
            return ResponseEntity.of(Optional.of(ResponseCode.TIME_OVER.getMessage()));
        }

        if (String.valueOf(targetMember.get("vertify")).equals("true")) {
            log.info("이미 인증된 이메일 입니다.");
        } else {
            //TODO DB 값이랑 클라이언트 제공해주는 auth number 비교후 맞으면 통과 아니면 실패 리스폰
            if (memberDto.getAuthNumber().equals(targetMember.get("auth_number"))) {
                memberService.updateVertify(String.valueOf(targetMember.get("email")));
            } else {
                log.info("인증번호가 같지 않습니다.");
                return ResponseEntity.of(Optional.of(ResponseCode.NOT_MATCH.getMessage()));
            }

        }
        return ResponseEntity.of(Optional.of(ResponseCode.VERTIFY.getMessage()));
    }

 

 

# 3. 인증번호 통과 시 회원가입

1. 클라이언트 측에서 인증코드 반환 체크 인증코드 반환 받았을 시 회원가입 진행

2. 회원가입 이메일 기반 회원 조회

3. 해당 레코드 검증 true 인지 확인

4. 검증 true 상태라면 해당 정보 회원가입 진행 (Login_success 코드 반환)

5. 해당 레코드 검증 false 라면 not_valid 코드 반환

 

@PostMapping("/join")
    public ResponseEntity<?> join (@RequestBody MemberDto memberDto) {
        log.info("memberDto = {}", memberDto);

        Map<String, Object> targetMember = memberService.findByEmail(memberDto.getEmail());

        log.info("조회한 회원 = {}", targetMember);

        if (targetMember != null && String.valueOf(targetMember.get("vertify")).equals("true")) {
            MemberDto member = MemberDto.builder()
                    .userName(memberDto.getUserName())
                    .password(memberDto.getPassword())
                    .loginType(LoginType.platform.name())
                    .email(String.valueOf(targetMember.get("email")))
                    .tellNo(memberDto.getTellNo())
                    .registrationDate(LocalDateTime.now())
                    .build();

            memberService.updatePlatMember(member);
        } else {
            return ResponseEntity.of(Optional.of(ResponseCode.NOT_VALID.getMessage()));
        }

        return ResponseEntity.of(Optional.of(ResponseCode.LOGIN_SUCESS.getCode()));
    }