이메일 인증 구현하기

ByungHun Kim·2021년 10월 20일
1

MatchHere

목록 보기
2/3

이메일 인증이 필요한 부분

  1. 회원가입

  2. 비밀번호 찾기(변경)

구현된 API

  1. 회원가입 과정에서 이메일 인증을 위한 인증 메일 발송

    GET api/auth/cert/signup/:email

  2. 비밀번호 찾기 과정에서 이메일 인증을 위한 인증 메일 발송

    GET api/auth/cert/password/:email

  3. 인증 메일에 포함된 인증 코드를 확인

    POST api/auth/cert/authcode/:id

이메일 인증 컴포넌트 디자인

구현

컴포넌트 구조

  • Page

    • EmailFormField

    • AuthCodeFormField

이메일 인증관련 처리는 EmailFormField에서 처리한다.

  • 이메일 전송 성공

    1. EmailFormField: Input의 상태를 disabled로 변경

    2. EmailFormField: button의 상태를 default로 변경

    3. EmailFormField: button의 텍스트를 "재전송"으로 변경

    4. EmailFormField: 부모 컴포넌트에 emit으로 이메일이 성공적으로 전송되었음을 안내 (인증번호 필드 렌더링을 위함)

    5. Page: AuthCodeFormField 렌더링

  • 인증번호 확인 완료

    1. AuthCodeFormField: Page 컴포넌트에 emit으로 인증번호 확인이 완료되었음을 안내 (인증번호 필드 삭제 및 이메일 필드 버튼 변경을 위함)

    2. Page: AuthCodeFormField 삭제

    3. Page: EmailFormField의 button의 상태를 disabled로 변경

    4. Page: EmailFormField의 button의 텍스트를 "인증완료"로 변경

  // EmailFormField.vue
  <script>
    setup(props, { emit }) {
      const handleSendEmail = async () => {
        try {
          // 1. 이메일 전송 요청
          // 2. Input 상태 변경
          // 3. Button 상태 변경
          // 4. Button 텍스트 변경
          // 5. emit
        } catch (error) {
          //...
        }
      }
    }
  </script>
// Page.vue
<script>
  setup() {
    const handleSuccessSendEmail = () => {
      // 1. AuthCodeFormField 렌더링
    }
    
    const handleSuccessConfirmAuthCode = () => {
      // 1. AuthCodeFormField 삭제
      // 2. EmailFormField의 Button 상태 변경
      // 3. EmailFormField의 Button 텍스트 변경
    }
  }
</script>
// AuthCodeFormField.vue
<script>
  setup(props, { emit }) {
    const handleSubmitAuthCode = async () => {
      try {
        // 1. emit
      } catch (error) {
        // ...
      }
    }
  }
</script>
profile
Maker가 되고 싶은 개발자

0개의 댓글