회원가입 화면
이해하기
일반 회원가입 및 간편 회원가입 기능을 지원하는 회원가입 화면입니다.
일반 회원/ 간편로그인 가입 중 하나를 선택 가능합니다.
- 일반 회원가입
- 아래 문서에서 상세 프로세스를 화면 별로 안내 드립니다
- 기본 스킨의 경우 🅐 약관 동의 화면 > 🅑 회원 정보 입력 화면 순서로 진행됩니다.
- 간편 회원가입
- 간편 로그인 화면 문서 내용을 참고하시길 바랍니다.
🅐 약관 동의 화면
먼저 사용자로부터 약관 동의를 받는 화면에 대해 소개합니다.
약관 내용은 어드민 [설정> 기본 정책 > 약관/개인 정보처리방침]에서 관리할 수 있습니다.
- get몰 약관 조회
- /terms
해당 쇼핑몰에 적용 중인 약관을 조회합니다.
기본 스킨에서는 API 호출 횟수를 줄이기 위해 localStorage에 5분 동안 캐시합니다.
해당 API는 회원 가입 화면뿐 아니라, 주문서 구매 동의 화면, 회원 탈퇴 및 쇼핑몰 푸터 영역에서도 활용됩니다.
- [필수] 이용약관 USE
- [필수] 전자금융 거래 이용 약관 E_COMMERCE
- [필수] 개인정보 수집 및 이용동의 PI_COLLECTION_AND_USE_REQUIRED
- [선택] 개인정보 수집 및 이용동의 PI_COLLECTION_AND_USE_OPTIONAL
- [선택] 개인정보 처리/위탁에 대한 동의 PI_PROCESS_CONSIGNMENT
- [선택] 개인정보 제 3자 제공에 대한 동의 PI_THIRD_PARTY_PROVISION
shop by pro 어드민 [설정> 기본정책 >쇼핑몰관리> 회원 인증 설정]에서는
이메일 인증/ SMS 인증 / 휴대폰 인증 총 3가지 인증방법을 제공하고 있습니다.
이 중 쇼핑몰 회원 인증 설정을 '휴대폰 인증'으로 사용함 처리해둔 경우에만, 해당 화면에서 NHN KCP 휴대폰 인증 버튼을 노출합니다.
(참고로 기본 스킨의 경우, 나머지 본인인증 방법인 'SMS 인증'과 '휴대폰 인증'은 다음 화면인 🅑 회원정보 입력화면 단계에서 노출하고 있습니다.)
휴대폰 인증 버튼 클릭 시, NHN KCP 인증 모듈 연동이 진행되며, 연동된 휴대폰 인증 팝업이 호출됩니다.
해당 휴대폰 인증 버튼 구현 및 NHN KCP 인증 모듈 연동 관련 자세한 로직은 해당 문서를 참고해주시길 바랍니다.
이후 NHN KCP 인증 모듈 연동을 통해 본인 인증 성공 시, 인증한 사용자가 이미 가입된 회원인지 여부를 추가로 확인해야 합니다.
- getCI 중복 확인
- /profile/ci/exists
쇼핑몰에 동일한 CI를 사용 중인 중복 회원이 있는지 확인 합니다.
휴대폰 본인인증을 사용하는 경우 여러 사용자가 동일한 CI로 회원가입할 수 없습니다.
즉 같은 회원 인증 정보로 중복 회원가입이 방지됩니다.
본인인증 후 해당 본인인증 정보가 이미 해당 쇼핑몰에 존재하는 경우, '이미 가입된 회원'이라는 알럿이 노출되며 인증정보를 업데이트 하지 않습니다.
🅑 회원 정보 입력 화면
일반 회원 가입의 회원 정보를 입력 받는 화면입니다.
회원 정보 입력란 항목 중 아이디, 닉네임, 이메일의 경우 중복 여부를 확인해야 합니다.
기본 스킨에서는 해당 쇼핑몰 내 중복된 회원 정보가 없을 경우 '(ex) 사용 가능한 닉네임 입니다'라는 안내 메시지를 노출하며
중복된 회원 정보가 존재할 경우 '(ex) 이미 사용 중인 아이디입니다. 다른 아이디를 입력하여 주세요' 라는 안내 메시지를 노출합니다.
만약 이전 단계에서 NHN KCP 모듈을 통해 휴대폰 본인인증을 거쳤을 경우, GET /KCP/id-verification/response
의 응답 값 중 phone 핸드폰번호가 자동 입력됩니다
- get아이디 중복여부 확인
- /profile/id/exist
해당 쇼핑몰에 이미 해당 아이디로 가입한 회원이 존재하는지 확인합니다
- get닉네임 중복여부 확인
- /profile/nickname/exist
해당 쇼핑몰에 이미 해당 닉네임으로 가입한 회원이 존재하는지 확인합니다
- get이메일 중복여부 확인
- /profile/email/exist
해당 쇼핑몰에 이미 해당 이메일로 가입한 회원이 존재하는지 확인합니다
ⓐ 이메일 인증버튼 또는 ⓑSMS 인증 버튼의 경우 샵바이 API 호출가이드 문서에서 소개한 GET /malls 을 통해
어드민의 이메일/SMS 인증 사용함 여부를 확인하여, 인증버튼 노출 여부를 결정합니다.
어드민 [설정> 기본정책 >쇼핑몰관리> 회원 인증 설정]에서
- 이메일 인증 선택 시: ⓐ 이메일 인증버튼
- SMS 인증 선택 시: ⓑ SMS 인증 버튼이 노출
- 휴대폰 인증 선택 시: 이전 화면인 🅐약관 동의 화면에서 NHN KCP 인증을 진행했으므로, 본 화면에서는 별도 버튼이 노출되지 않습니다.
- get쇼핑몰 기본 정보 조회
- /malls
쇼핑몰 전반에 대한 기본 정보와 설정 데이터를 조회할 수 있습니다.
해당 API는 쇼핑몰 어느 화면에서든 공통적으로 필요한 기본 API입니다.
기본 스킨에서는 API 호출 횟수를 줄이고자 응답 값을 localStorage 에 캐싱 주기를 5분으로 설정하였습니다.
mallJoinConfig 내 AuthenticationType 에 따라 버튼 노출 여부를 결정합니다.
아래 코드를 만족했을 때 SMS 또는 이메일 인증이 가능하며, 각각의 인증 버튼이 노출됩니다.
1
2 const {
3 mallJoinConfig: { authenticationTimeType, authenticationType },
4 } = shopby.cache.getMall();
5
6 const needsAuthType = {
7 needsEmailAuth: authenticationType === 'AUTHENTICATION_BY_EMAIL',
8 needsSmsAuth: authenticationType === 'SMS_AUTHENTICATION',
9 };
10 const authType = authenticationTimeType === 'JOIN_TIME' ? needsAuthType : {};
11 needsEmailAuth 와 needsSmsAuth은 프론트 화면에서 관리하는 변수 값이며,
AUTHENTICATION_BY_EMAIL이면 needsEmailAuth = true
SMS_AUTHENTICATION이면 needsSmsAuth = true로 각 ENUM과 매핑됩니다.
SMS와 이메일 모두 아래 API가 동일하게 적용됩니다.
- post인증번호 발송
- /authentications
인증 번호를 발송합니다.
회원의 연락처 또는 입력한 연락처로 인증번호를 발송합니다.
해당 API는 회원가입 화면 뿐 아니라, 아이디/비밀번호 찾기 및 회원정보 수정 등의 화면에서 사용됩니다.
Request body 내 type에서 SMS인증의 경우 SMS, 이메일 인증의 경우 EMAIL을 입력합니다.
유효기간(인증번호 만료까지 남은 시간) remainTime이 만료되었을 경우 아래와 같은 안내 문구를 노출합니다.
- SMS: 5분
- 이메일: 10분
- get인증 번호 확인
- /authentications
입력 받은 인증번호를 확인합니다.
사용자로부터 입력 받은 인증 번호의 유효성을 체크하며, 실패 시 에러코드 메시지를 전달합니다.
인증번호 인증 실패 누적 시 자동입력 방지 문자 입력 영역을 노출합니다.
- 이메일: 5회 실패 시 6회차부터 노출
- SMS: 10회 실패 시 11회차부터 노출
우편번호 찾기 버튼 클릭 시, 우편번호 찾기 레이어가 출력됩니다.
- get주소 조회하기
- /addresses/search
검색 키워드로 주소 정보를 조회합니다.
POST /profile을 통해 회원 가입이 진행됩니다
- post프로필 생성
- /profile
회원 프로필이 등록됩니다.