Backlog

HackMD

spreadsheets

backlog

목차

• 회원가입
  • 회원가입페이지
  • TOTP 등록 페이지
  • TOTP 인증 모달
  • 이메일 인증 페이지
  • QR 재발급 페이지
• 로그인
  • 로그인 페이지
  • 아이디 찾기 페이지
  • 비밀번호 찾기 페이지
  • 비밀번호 변경 페이지
• 내 정보
  • 비밀번호 인증 모달
  • 개인정보 수정 페이지

회원가입

- step 1
    - id(중복가입 확인)
    - password(8자 이상, 숫자, 특수문자 포함 구현)
    - email(중복가입 확인, 무료 메일 발송 서비스 이용)
        ex : [NCP CloudOutboundMailer](https://www.ncloud.com/product/applicationService/cloudOutboundMailer) 1000건까지 무료
    - 이름, 생년월일, 전화번호, reCAPTCHA v3 적용
- step 2
    - 가입완료 후 totp등록 페이지로 전환 qr code를 이용하여 totp등록
         (개발한 프로젝트 앱, [‎Twilio Authy](https://apps.apple.com/kr/app/twilio-authy/id494168017), [‎Google Authenticator](https://apps.apple.com/us/app/google-authenticator/id388497605) 사용가능해야함)
- step 3
    - email 검증 후 사용자 등록 완료 처리

- bcrypt를 이용 password 처리 및 개인정보(이름, 전화번호, 주소 등) aes-256-cbc 적용하여 db에 입력

회원가입 페이지

• id, password, email, 이름, 생년월일, 전화번호를 입력해서 회원가입

  • 빠진 정보가 있을 경우 회원가입 버튼 비 활성화 [FE]

• ID

  • id 중복 확인, 버튼이 인증 되어야만 사용 가능 변경시 다시 인증 필요 [FE]
  • id 중복시 alter [FE]
  • id 중복 확인 API [BE]

• Password

  • 8자 이하시 경고 텍스트 [FE]
  • 비밀번호 확인 창 필요 [FE]
  • 영문, 숫자, 특수문자 포함 확인 [FE] [BE]
  • bcrypt 이용해서 암호화 (aes-256-cbc 적용) [BE]

• Email

  • email 중복 확인 API [BE]
  • email 중복 확인, 버튼이 인증 되어야만 사용 가능 변경시 다시 인증 필요 [FE]
  • email 중복시 alter [FE]
  • NCP CloudOutboundMailer [BE]

• 이름, 생년월일, 전화번호

  • 생년월일 date 입력창 [FE]
  • 전화번호 input BOX 3개로 하이픈 사이를 구분 [FE]
  • bcrypt 이용해서 암호화 (aes-256-cbc 적용) [BE]

• reCAPTCHA v3

  • 체크해야함 [FE]

• 회원가입 성공 시

  • alter 성공 표시 [FE]
  • 회원가입 API [BE]
  • TOTP 등록 페이지로 이동 [FE]

• 회원가입 실패 시

  • alter 실패 표시 [FE]
  • 문제 부분 표시 [FE]
  • 회원가입 API [BE]
    • 에러 분류 고려해보기

TOTP 등록 페이지

• Key 새로 생성
• QR 생성 [FE]
  • BY API res url

TOTP 인증 모달

• TOTP번호 인증 후 버튼

• QR 코드 재발급 페이지 링크 있어야 함

이메일 인증 페이지

• email 인증 진행 : 등록된 이메일로 링크를 보내준다
• 인증 성공시 QR 재발급 페이지로 이동

QR 재발급 페이지

• Key 새로 생성
• QR 생성 [FE]
  • BY API res url

로그인

- step 1
     -  1차 로그인 완료
- step 2
    - totp 입력 페이지로 전환 유효한 값이 입력되면 내 정보 페이지로 리다이렉트

로그인 페이지

• id, password, reCAPTCHA 입력 후 로그인 시도

• 아이디 찾기, 비밀번호 찾기 버튼 존재(Link)

• 만약 이메일 미인증 사용자 로그인시

  • alter를 통해 이메일 인증 요구
  • 재발송도 해야하나...?

• 로그인 성공 시

  • TOTP 인증 페이지로 이동

• 로그인 실패 시

  • 오류 메세지 표시

아이디 찾기 페이지

- 유효한 email과, 이름, 생년월일이 입력될 경우 메일로 id 전송, reCAPTCHA 적용

• 아이디 찾기 API [BE]

비밀번호 찾기 페이지

- 유효한 id, 이름, 생년월일, totp정보가 입력될 경우 메일로 비밀번호 변경 링크 제공, reCAPTCHA 적용
- 메일로 전송된 비밀번호 변경 페이지
    - 새로운 비밀번호(비밀번호 입력폼, 검증폼) 과 유효한 totp정보가 입력될 경우 변경 처리

• 비밀번호 찾기 API [BE]
  • 메일로 비밀번호 변경 링크 제공

비밀번호 변경 페이지

• 비밀번호 변경 API [BE]

• TOTP 인증 모달 사용 인증 명세 [FE]

• 성공시 확인버튼 활성화 -> 로그인 페이지로 이동

내 정보

- 내 개인정보 출력
- 내가 접속했던 브라우저/디바이스 이력 표시
- 내가 접속했던 브라우저/디바이스 유효한 로그인 정보 무력화 기능 (질문 사항)
- 내 개인정보 수정 => 비밀번호만 물어보고 유효하면 진입

• 개인정보 탭

  • 개인정보 출력
    • 개인정보 조회 API [BE]
  • 개인정보 수정 버튼

• 접속 이력 탭

  • 접속 및 무력화 기능 활용
    • 접속 이력 조회 API [BE]

비밀번호 인증 모달

• 비밀번호 입력
  • 비밀번호 확인 API [BE]
  • 확인 성공하면 수정 페이지로 이동

개인정보 수정 페이지

• 개인정보 수정 기능
  • 개인정보 수정 API [BE]