서비스를 더 간편하게, 더 안전하게 만들고 있어요!
✍🏻 김보현 | 개발팀
지난 4월부터 윙잇에서 전통주 상품 판매를 시작했다는 소식, 알고 계셨나요?
전통주 판매를 위해 개발팀에서도 그에 필요한 성인 인증 기능 개발을 진행했는데요, 해당 과정에 참여한 제가 어떻게 개발을 진행했는지 설명하고자 합니다.
윙잇에 전통주 상품 판매하기 🍶
전통주를 비롯한 주류 상품의 경우, 만 19세 이상의 성인만 구매할 수 있는 상품입니다.
따라서, 전통주 판매를 위해서는 윙잇 서비스에서도 성인 인증 절차 도입이 필요하며 그에 대한 개발을 진행한 것인데요.
온라인상 성인인증은 법에 따라 방통위에서 지정한 본인확인 수단으로만 인증이 가능하며, 미성년자와 성인사용자 구분이 필요한 경우 반드시 본인확인 서비스를 도입해야 합니다.
저희는 PG사에서 제공하는 휴대폰 본인인증 서비스를 사용했고, 해당 서비스에서 제공하는 출생 연도 데이터를 사용하여 성인 인증 절차를 구현했습니다.
휴대폰 본인인증 서비스.. 어떻게 사용하나요? 🤨
휴대폰 본인인증 서비스란
본인 명의로 개통한 휴대폰을 이용하여 최소한의 개인정보를 입력하는 인증 절차를 거쳐 본인 여부와 입력한 정보의 정확성을 확인하여 주는 서비스입니다. 고객은 윙잇에서 성인인증을 위해 본인인증을 시행합니다.
본인인증은 모바일 기기에 설치된 본인인증 전용 앱을 이용하거나 사용자 본인 정보(이름, 생년월일, 휴대폰번호)를 인증요청 페이지에 입력한 후 문자로 온 인증번호를 기입하는 방식으로 이루어집니다.
저희는 본인인증 API를 제공하고 있는 PortOne API와 다날 PG사 계약을 통해 진행했습니다.
PortOne API 란?
PortOne API는 대한민국 온라인 결제 대행사 PortOne에서 제공하는 결제 관련 API입니다. 이 API 활용을 통해 온라인 상에서 다양한 결제 기능 및 본인인증 수행을 처리할 수 있습니다. PortOne을 이용한 휴대폰 본인인증의 플로우는 JavaScript SDK 를 이용하여 휴대폰 본인인증을 완료하고 가맹점 서버(PG사)에서 포트원 REST API를 이용하여 인증완료정보를 획득하는 방법으로 진행됩니다.
PG사란?
PG사는 Payment Gateway의 약어로, 온라인 결제를 처리해주는 중개 서비스를 제공하는 기업을 의미합니다. 이러한 PG사와의 계약을 통해, 윙잇은 PortOne API를 사용하여 본인 인증을 수행하고 사용자의 결제 정보를 안전하게 처리할 수 있습니다.
윙잇의 성인인증 로직을 살펴봅시다 🙉
사용자 입장 UI에서 살펴보기 🐣
성인인증이 필요한 상품(전통주)을 장바구니에 담을 때, 아직 성인인증을 진행하지 않은 상태라면 성인인증 요청 모달이 노출됩니다.
이 때 [인증하기] 버튼을 눌러 본인인증 페이지로 이동할 수 있으며, 해당 페이지에서 본인인증을 완료하면 성인인지 판별 후 장바구니에 상품을 담을지 결정하게 됩니다.
내부 개발 로직 🐥
아래 도식화는 사용자가 장바구니 버튼을 클릭하고, 성인인증을 완료할 때까지의 개발 로직을 도식화한 그림입니다. 사용자 환경에 따라 본인인증 데이터를 받는 부분에서 플로우 차이가 있습니다.
- PC 환경
- 모바일 환경
사용자가 성인인증 상품의 장바구니 버튼을 클릭합니다.
프론트에서 백엔드에게 본인인증 창을 띄우기 위한 데이터를 받기 위한 API를 호출합니다.
백엔드는 프론트에게 본인인증 API 호출에 필요한 데이터를 responseBody에 넣어 전달합니다.
- 본인인증 API 호출에 필요한 데이터 참고 (링크)
프론트는 받은 데이터를 API params에 넣어 본인인증 창 API를 호출합니다.
- 본인인증 API 호출하는 예제코드
해당 예제 코드는 PortOne API를 사용한 본인인증의 예제 코드입니다.
5.본인인증 완료 후의 플로우
- [PC] 본인인증을 완료하면 imp_uid를 포트원에게서 받게되고, 서버에게 callback API를 호출합니다.
imp_uid 란?
- 본인인증 결과값을 조회할 수 있는 PortOne Id값
callback API 예제
- [모바일] 본인인증을 완료하면 본인인증 호출 시 넣은 param.m_redirect_url로 리디렉션됩니다.
- 리디렉션 전달 예제
- callback API 또는 리디렉션 url 내에서, 받은 imp_uid 값으로 본인인증 정보를 조회하여 성인인증 로직을 실행합니다.
- 본인인증 정보를 조회할 때 필요한 Access Token 발급
- 포트원 서버에서 인증 정보를 조회하기 위해서 먼저 **REST API access token**을 발급받습니다.
- 발급받은 액세스 토큰(access_token)과 인증번호(imp_uid)로 본인인증 결과조회 REST API 를 호출하여 인증 정보를 조회하는 예제입니다.
- 조회한 인증정보를 가져와 데이터 활용하기
- 여기서 연령데이터를 활용해 성인인증 유무를 판단합니다.
7. 성인인증 결과값에 따른 로직
이후, 성인인증 결과값에 따라 성인인증 상품을 담을 수 있도록 구현하였습니다.
성인인 경우
해당 모달이 뜨고 상품 상세페이지로 이동합니다.
2. 미성년자인 경우
3. 본인인증 데이터를 가져오지 못해 성인 판별을 못한 경우
a.비회원인 경우
b.회원의 본인인증 데이터를 가져오지 못한 경우
성인인증 개발을 하며, 까다로웠거나 어려웠던 점 🙈
Web, 모바일 환경에 따라 로직이 달랐던 점이 힘들었어요
처음 개발을 할 때, 단순히 callbackURL을 하나로 구현하여 진행했는데 환경에 따라 팝업 방식, 리디렉션 방식을 사용해야 하는 점을 배웠습니다. 웹인 경우는 팝업 방식으로 새 창 또는 모달 창으로서, 원래 창의 컨텍스트와 독립적으로 작동하는 반면, 모바일인 경우는 사용자의 현재 페이지를 벗어나 새 페이지로 가기 때문에 원래 페이지로 이동시키도록 하는 redirectURL 방식이 필요합니다.
글을 마치며
이상으로 윙잇에서 휴대폰 본인인증 서비스를 통해 개발한 성인인증 로직을 정리해보았습니다. 중심이 되는 내용 위주로 도식화도 그려가며 최대한 어렵지 않게 작성하려고 하였지만 익숙하지 않으신 분들에게는 다소 복잡해 보일 수 있을 것 같습니다. 조금이나마 휴대폰 본인인증 플로우 이해에 도움이 되었으면 좋겠습니다!
감사합니다.
✍🏻 김보현 | 개발팀
지난 4월부터 윙잇에서 전통주 상품 판매를 시작했다는 소식, 알고 계셨나요? 전통주 판매를 위해 개발팀에서도 그에 필요한 성인 인증 기능 개발을 진행했는데요, 해당 과정에 참여한 제가 어떻게 개발을 진행했는지 설명하고자 합니다.
윙잇에 전통주 상품 판매하기 🍶
전통주를 비롯한 주류 상품의 경우, 만 19세 이상의 성인만 구매할 수 있는 상품입니다. 따라서, 전통주 판매를 위해서는 윙잇 서비스에서도 성인 인증 절차 도입이 필요하며 그에 대한 개발을 진행한 것인데요.
온라인상 성인인증은 법에 따라 방통위에서 지정한 본인확인 수단으로만 인증이 가능하며, 미성년자와 성인사용자 구분이 필요한 경우 반드시 본인확인 서비스를 도입해야 합니다. 저희는 PG사에서 제공하는 휴대폰 본인인증 서비스를 사용했고, 해당 서비스에서 제공하는 출생 연도 데이터를 사용하여 성인 인증 절차를 구현했습니다.
휴대폰 본인인증 서비스.. 어떻게 사용하나요? 🤨
휴대폰 본인인증 서비스란
본인 명의로 개통한 휴대폰을 이용하여 최소한의 개인정보를 입력하는 인증 절차를 거쳐 본인 여부와 입력한 정보의 정확성을 확인하여 주는 서비스입니다. 고객은 윙잇에서 성인인증을 위해 본인인증을 시행합니다.
본인인증은 모바일 기기에 설치된 본인인증 전용 앱을 이용하거나 사용자 본인 정보(이름, 생년월일, 휴대폰번호)를 인증요청 페이지에 입력한 후 문자로 온 인증번호를 기입하는 방식으로 이루어집니다.
저희는 본인인증 API를 제공하고 있는 PortOne API와 다날 PG사 계약을 통해 진행했습니다.
PortOne API 란?
PortOne API는 대한민국 온라인 결제 대행사 PortOne에서 제공하는 결제 관련 API입니다. 이 API 활용을 통해 온라인 상에서 다양한 결제 기능 및 본인인증 수행을 처리할 수 있습니다. PortOne을 이용한 휴대폰 본인인증의 플로우는 JavaScript SDK 를 이용하여 휴대폰 본인인증을 완료하고 가맹점 서버(PG사)에서 포트원 REST API를 이용하여 인증완료정보를 획득하는 방법으로 진행됩니다.
PG사란?
PG사는 Payment Gateway의 약어로, 온라인 결제를 처리해주는 중개 서비스를 제공하는 기업을 의미합니다. 이러한 PG사와의 계약을 통해, 윙잇은 PortOne API를 사용하여 본인 인증을 수행하고 사용자의 결제 정보를 안전하게 처리할 수 있습니다.
윙잇의 성인인증 로직을 살펴봅시다 🙉
사용자 입장 UI에서 살펴보기 🐣
성인인증이 필요한 상품(전통주)을 장바구니에 담을 때, 아직 성인인증을 진행하지 않은 상태라면 성인인증 요청 모달이 노출됩니다. 이 때 [인증하기] 버튼을 눌러 본인인증 페이지로 이동할 수 있으며, 해당 페이지에서 본인인증을 완료하면 성인인지 판별 후 장바구니에 상품을 담을지 결정하게 됩니다.
내부 개발 로직 🐥
아래 도식화는 사용자가 장바구니 버튼을 클릭하고, 성인인증을 완료할 때까지의 개발 로직을 도식화한 그림입니다. 사용자 환경에 따라 본인인증 데이터를 받는 부분에서 플로우 차이가 있습니다.
사용자가 성인인증 상품의 장바구니 버튼을 클릭합니다.
프론트에서 백엔드에게 본인인증 창을 띄우기 위한 데이터를 받기 위한 API를 호출합니다.
백엔드는 프론트에게 본인인증 API 호출에 필요한 데이터를 responseBody에 넣어 전달합니다.
프론트는 받은 데이터를 API params에 넣어 본인인증 창 API를 호출합니다.
해당 예제 코드는 PortOne API를 사용한 본인인증의 예제 코드입니다.
5.본인인증 완료 후의 플로우
imp_uid 란?
callback API 예제
7. 성인인증 결과값에 따른 로직
이후, 성인인증 결과값에 따라 성인인증 상품을 담을 수 있도록 구현하였습니다.
성인인 경우
해당 모달이 뜨고 상품 상세페이지로 이동합니다.
2. 미성년자인 경우
3. 본인인증 데이터를 가져오지 못해 성인 판별을 못한 경우
a.비회원인 경우
b.회원의 본인인증 데이터를 가져오지 못한 경우
성인인증 개발을 하며, 까다로웠거나 어려웠던 점 🙈
Web, 모바일 환경에 따라 로직이 달랐던 점이 힘들었어요
처음 개발을 할 때, 단순히 callbackURL을 하나로 구현하여 진행했는데 환경에 따라 팝업 방식, 리디렉션 방식을 사용해야 하는 점을 배웠습니다. 웹인 경우는 팝업 방식으로 새 창 또는 모달 창으로서, 원래 창의 컨텍스트와 독립적으로 작동하는 반면, 모바일인 경우는 사용자의 현재 페이지를 벗어나 새 페이지로 가기 때문에 원래 페이지로 이동시키도록 하는 redirectURL 방식이 필요합니다.
글을 마치며
이상으로 윙잇에서 휴대폰 본인인증 서비스를 통해 개발한 성인인증 로직을 정리해보았습니다. 중심이 되는 내용 위주로 도식화도 그려가며 최대한 어렵지 않게 작성하려고 하였지만 익숙하지 않으신 분들에게는 다소 복잡해 보일 수 있을 것 같습니다. 조금이나마 휴대폰 본인인증 플로우 이해에 도움이 되었으면 좋겠습니다!
감사합니다.