LogoLogo
  • 샵바이 스킨 알아보기
    • 샵바이 스킨 설명서
    • 오로라 리액트(통합형) 스킨 개발 가이드
    • 오로라 리액트(통합형) 릴리즈 노트
    • 오로라 바닐라(개별형) 릴리즈 노트
    • 1:1 문의하기
  • 오로라 개별형 스킨 개발 가이드
    • 개발 프로세스
      • 등록
      • 개발
        • 개발 환경 구성하기
        • 스킨 디렉토리 구조
      • 설치
    • 기본 API 이해하기
      • 샵바이 API 호출 가이드
        • OAuth 2.0 적용 가이드
      • 외부 스크립트 호출 가이드
    • 화면별 API 활용 가이드
      • 공통 영역
        • 공통 상단
        • 공통 하단
        • 디자인 팝업
        • 슬라이드 메뉴 (모바일 전용)
        • 최근 본 상품
      • 메인 화면
        • 배너 영역
        • 상품진열 영역
        • 인스타그램 연동
      • 회원가입
      • 로그인
      • 간편 로그인
      • 휴대폰 본인인증
      • 상품 리스트
      • 상품 상세
        • 상품 기본 정보
        • 상품 상세 배너 (모바일 전용)
        • 상품 상세정보 (탭)
        • 배송/반품/교환 안내 (탭)
        • 상품후기 (탭)
        • 상품문의 (탭)
        • 관련상품
      • 장바구니
      • 주문서
      • 마이페이지 > 쇼핑정보
        • 주문목록/배송조회
        • 취소/반품/교환 내역
        • 주문 상세
        • 좋아요
      • 마이페이지 > 혜택관리
        • 쿠폰
        • 적립금
      • 마이페이지 > 회원정보
        • 회원정보 수정
        • 회원탈퇴
        • 배송지 관리
      • 마이페이지 > 나의 게시글
        • 1:1 문의
        • 상품문의
        • 상품후기
      • 상품후기 게시판
      • 일반 게시판
      • 기획전
    • KCP 휴대폰 본인인증 연동 (iOS/AOS)
  • 앱 개발 가이드
    • [샵바이] 웹훅(webhook) 가이드
    • [고도몰] 웹훅(webhook) 가이드
  • 추천 콘텐츠
    • 추천 콘텐츠
      • [간편 로그인] SNS 연동 기능 개발 가이드
      • [공통] 마이페이 API 화면가이드
      • [엔터프라이즈] 선물하기 기능 (배송지 나중입력)
      • [엔터프라이즈] 카카오 싱크 신청 가이드
      • [엔터프라이즈] 카카오 싱크 회원가입 API 화면가이드
      • [엔터프라이즈] 이니렌탈(렌탈결제) API 화면가이드
      • [엔터프라이즈] 외부 회원 연동 가이드
      • [엔터프라이즈] 외부 적립금 전환 가이드
      • [엔터프라이즈] 외부 적립금 연동가이드
      • [엔터프라이즈] 사은품 API 화면가이드
      • [엔터프라이즈] PG신청 가이드 (2024/4/1 업데이트)
      • [엔터프라이즈] 카카오 픽셀 설치 가이드
      • [엔터프라이즈]정기결제(배송) API 화면가이드
      • [프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!
      • [베이직/프로] 카카오싱크 신청 가이드
      • [웹훅 추가] 주문정보 웹훅(Webhook)이란?
      • [웹훅 추가] 회원정보 변경 및 회원탈퇴
      • [웹훅 추가] 앱 설치 및 삭제
      • shop by API, POSTMAN에 추가하기
      • [글로벌] 글로벌 기능 가이드
        • 사용 프로세스
          • 엑심베이 PG 계약
          • 개발 환경 세팅
          • shop by 어드민 세팅
          • 쇼핑몰 스킨 개발
            • 언어/통화 설정
            • 상품/전시 설정
            • 주문서 조회
            • 주문 예약하기
            • 회원 등록
        • 글로벌 주문/환불 프로세스
    • FAQ
      • 에러코드_ (1) 주문
      • 에러코드_ (2) 프로모션
      • 에러코드_ (3) 클레임
      • 쿠폰 코드 API 에러메시지 안내
      • 장바구니/주문결제 에러코드 안내
      • 배송타입 및 택배사코드 안내
      • 파트너어드민 매출내역 조회기준
      • shop api error response 안내
      • server API로 주문의 외부 유입경로 집계 방법
      • 은행코드 안내
      • 7/15 스킨 에디터 업데이트 주의사항
        • 모바일_업데이트 전 템플릿 코드
        • PC_업데이트 전 템플릿 코드
        • 업데이트 후/전 템플릿 코드 비교
      • [샵바이 엔터프라이즈] server API 호출방법
      • [샵바이 엔터프라이즈] 파트너 어드민에서 상품 노출은 미리 해두고, 판매 기간은 미래시점으로 설정할 수 있는 기능이 있을까요?
      • [샵바이 엔터프라이즈] 파트너사 담당MD 일괄변경 어떻게하나요?
Powered by GitBook
On this page
  • iOS 매뉴얼
  • AOS 매뉴얼

Was this helpful?

  1. 오로라 개별형 스킨 개발 가이드

KCP 휴대폰 본인인증 연동 (iOS/AOS)

KCP 휴대폰 본인인증 모듈을 모바일앱 (iOS/AOS)에 연동 시 참고하실 수 있습니다.

Previous기획전Next[샵바이] 웹훅(webhook) 가이드

Last updated 1 year ago

Was this helpful?

휴대폰 본인인증 모듈은 iOS/AOS 어플리케이션 내 webview를 이용하여 연동합니다.

휴대폰 본인인증 모듈에 대한 가이드는 문서를 참고하시길 바랍니다.


iOS 매뉴얼

🅐 Xcode 설정 (iOS PASS 앱 관련 스키마 등록)

통신사의 PASS 앱(간편본인확인 앱)이 업데이트됨에 따라 iOS에서 가맹점 앱 서비스를 제공하는 경우, iOS9부터 보안을 강화하는 목적으로 앱을 호출할 때 앱 스키마를 등록해주어야 합니다.

통신사
앱 스키마

SKT

tauthlink

KT

ktauthexternalcall

LG

upluscorporation

ⓐ Info.plist 파일에 LSApplicationQueriesSchemes 배열을 정의하여 앱 스키마를 등록합니다.

  • ㉠ Information Property List에 LSApplicationQueriesSchemes를 Array 타입으로 추가합니다.

  • ㉡ LSApplicationQueriesSchemes 하위 리스트에 String 타입으로 Item을 추가합니다.

  • ㉢ Item 마다 앱 스키마를 입력합니다.

ⓑ KCP 휴대폰 본인인증 완료 후 key값을 넘겨받기 위해 스키마를 등록합니다.

🅑 HTML form 획득

KCP 휴대폰 본인인증 모듈 팝업을 출력하기 위해서 GET /kcp/id-verification을 통해 KCP로 제출할 HTML form을 요청해야 합니다.

▶ KCP 본인인증 요청하기 본인 인증을 위한 form을 생성합니다.

위 API가 아닌 임의로 form을 작성할 경우, NHN커머스 샵바이 측으로 callback을 받을 수 없습니다.

반드시 위 API 응답값으로 받은 form을 사용하시길 바랍니다.

  • 응답값은 text/html 형식의 html form 양식입니다.

  • returnURI는 scheme:// 형식으로 작성합니다. (예 shopbyexample://form 🅐 - ⓑ 이미지 참고)

  • 해당 API 호출시 request header내 platform 정보에 반드시 iOS를 입력하셔야 PASS 앱을 위한 아래의 추가변수가 form양식에 넘어옵니다.

✓ 예시코드

<input type="hidden" name="kcp_cert_pass_use" value="Y"/>

🅒 구현하기

ⓐ WKWebview 구성

KCP 휴대폰본인인증 모듈은 웹으로 지원되기 때문에 WKWebview로 구성해야 합니다.

wkWebView.navigationDelegate = self
wkWebView.uiDelegate = self
wkWebView.configuration.preferences.javaScriptCanOpenWindowsAutomatically = true

ⓑ webview - LoadData

GET /kcp/id-verification호출로 전달받은 form을 webview에 로드합니다.

var htmlString = """
<html><title>KCPCert</title>
<body>\(formData)</body>  // formData 는 html form 양식입니다.
</html>
"""wkWebView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)

ⓒ form.submit()

webview의 evaluateJavaScript을 이용하여 form을 submit합니다. form이 submit되면 webview에서 새 창으로 KCP 휴대폰 본인인증 페이지가 노출됩니다.

휴대폰 본인인증 화면은 WKWebview에서 새 창으로 열릴 수 있도록 구성해 주셔야 합니다. (ⓒ참고)

evaluateJavaScript는 html 폼 양식이 완전히 로드된 후( webview didFinish시점) 호출해 주시면 됩니다.

let injectJavaScript: String = """
// form id : form_auth
document.getElementById("form_auth").submit();
"""
var jsStr = injectJavaScript.trimmingCharacters(in: .whitespaces)
jsStr = jsStr.trimmingCharacters(in: .whitespacesAndNewlines)
jsStr = jsStr.trimmingCharacters(in: .newlines)
wkWebView.evaluateJavaScript(jsStr, completionHandler: nil)

ⓓ WKWebview 구현

WKWebview를 새 창으로 구현합니다.

아래 구현방식은 KCP 휴대폰 본인인증 연동을 위한 샘플이며, 개발 시 참고용으로 사용하시길 바랍니다.

func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
    let createWebView = WKWebView(frame: self.wkWebView.frame, configuration: configuration)
    createWebView.navigationDelegate = self
    createWebView.uiDelegate = self
    self.view.addSubview(createWebView)
    return createWebView
}

ⓔ Key 파라미터 획득

returnURI로 전달받은 URI를 parsing하여 key값을 추출합니다. WKWebview Delegate (WKNavigationDelegate)

public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, preferences: WKWebpagePreferences, decisionHandler: @escaping (WKNavigationActionPolicy, WKWebpagePreferences) -> Void) {
    var policy = WKNavigationActionPolicy.allow
    if let requestURL = navigationAction.request.url {
        if requestURL.scheme == "shopbyexample"  {
                        if let host = requestURL.host, host == "form" {
                            if let _ = requestURL.query as String? {
                                if let urlComponent = URLComponents(url: requestURL, resolvingAgainstBaseURL: true) {
                                    let queryItems = urlComponent.queryItems
                                    if let key = queryItems?.first(where: { $0.name == "key" })?.value {
                                        print("key : \(key)")
                                    }
                                }
                            }
                            policy = .allow
                            decisionHandler(policy, preferences)
                            return
                        }
                    }
                    UIApplication.shared.open(requestURL, options: [:], completionHandler: nil)
                    policy = .cancel
    }
    decisionHandler(policy, preferences)
}

🅓 본인인증 결과 조회

해당 key로 본인인증 인증 성공 및 실패 여부를 판단한 뒤, 화면에 성공 및 실패 결과를 전달합니다.

▶ KCP 본인인증 결과 조회하기 NHN KCP 본인인증 결과를 확인합니다.

🅔 샘플코드(참고)


AOS 매뉴얼

🅐 webview 세팅

KCP 본인인증을 모바일로 사용하기 위해 webview를 세팅합니다.

binding.webView.apply {
    settings.apply {
        javaScriptEnabled = true
        javaScriptCanOpenWindowsAutomatically = true
        supportMultipleWindows()
    }
}

🅑 HTML form 획득

KCP 휴대폰 본인인증 모듈 팝업을 출력하기 위해서 GET /kcp/id-verification을 통해 KCP로 제출할 HTML form을 요청해야 합니다.

▶ KCP 본인인증 요청하기 본인 인증을 위한 form을 생성합니다.

위 API가 아닌 임의로 form을 작성할 경우, NHN커머스 샵바이 측으로 callback을 받을 수 없습니다.

반드시 위 API 응답값으로 받은 form을 사용하시길 바랍니다.

  • 응답값은 text/html 형식의 html form 양식입니다.

  • returnURI는 scheme:// 형식으로 작성합니다. (예 shopbyexample://form.html)

ⓐ webview - LoadData

GET /kcp/id-verification을 호출하여 전달받은 form을 webview에 로드합니다.

loadDataWithBaseURL(baseUrl, apiResponseData, "text/html", "UTF-8", "")

ⓑ form.submit()

webview의 evaluateJavaScript을 이용하여 form을 submit합니다. form이 submit되면 webview에서 KCP 휴대폰 본인인증 페이지로 리다이렉트 됩니다.

binding.webView.evaluateJavascript("document.form_auth.submit()") {}

evaluateJavaScript는 html 폼 양식이 완전히 로드된 후 WebViewClient를 이용하여 호출할 수 있습니다.

binding.webView.apply {
    webViewClient = object : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
            if (url?.startsWith(baseUrl) == true) {
                binding.webView.evaluateJavascript("document.form_auth.submit()") {}
            }

        }
    }
}

ⓒ Key 파라미터 획득

본인인증이 정상적으로 끝났다면, returnURI로 key값을 전달 받습니다.

{YOUR_RETURN_URL}?key=XXXXXXXXXX

WebViewClient의 shouldOverrideUrlLoading을 통해 key값을 추출할 수 있습니다.

binding.webView.apply {
    webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(
            view: WebView?,
            request: WebResourceRequest?
        ): Boolean {
            if (request?.url.toString().startsWith(returnUrl)) {
                val uri = Uri.parse(request?.url.toString())
                val isContainsKey = uri.queryParameterNames.contains("key") // 파라미터에 key가 포함되어있는지 확인
                if (isContainsKey) println("key = ${uri.getQueryParameter("key")}") // key 추출

                //TODO:  key 추출 이후 과정을 이 곳에서 진행하시면 됩니다.
                return isContainsKey
            }
            return super.shouldOverrideUrlLoading(view, request)
        }
    }
}

🅓 본인인증 결과 조회

해당 key로 본인인증 인증 성공 및 실패 여부를 판단한 뒤, 화면에 성공 및 실패 결과를 전달합니다.

▶ KCP 본인인증 결과 조회하기 NHN KCP 본인인증 결과를 확인합니다.

🅔 샘플코드(참고)

참고

참고

GET /kcp/id-verification/form
GET /kcp/id-verification/response
KCPCertViewController.swift
GET /kcp/id-verification/form
GET /kcp/id-verification/response
MainActivity.kt
휴대폰 본인인증
iOS 매뉴얼
AOS 매뉴얼