토스 표준창 UI 연동

토스 표준창은 USER_NONE 방식에서 고객이 개인정보를 직접 입력하는 토스 제공 UI입니다. 본인확인·간편인증 서비스에서 공통으로 사용하며, 아래 SDK를 사용해 웹/앱 환경에 맞게 연동하세요.

---

SDK 설치

<head>
  <script src="https://cdn.toss.im/cert/v1"></script>
</head>

---

Case 1: 브라우저 팝업 방식

var tossCert = TossCert();
tossCert.preparePopup(); // 팝업차단 방지

getTxId().then(function (response) {
  tossCert.start({
    authUrl: response.authUrl,
    txId: response.txId,
    onSuccess: function () {
      location.href = '/complete.html';
    },
    onFail: function (error) {
      console.error('에러 발생', error);
    }
  });
});

---

Case 2: 리다이렉트 방식

var tossCert = TossCert();
getTxId().then(function (response) {
  tossCert.start({
    type: 'redirect',
    authUrl: response.authUrl,
    txId: response.txId,
    successUrl: location.origin + '/complete.html',
    failUrl: location.origin + '/fail.html'
  });
});

---

Case 3: Android 네이티브 웹뷰

웹뷰에 tossAuthWebView JavaScript 인터페이스를 추가하고, Chrome Intent 실행을 허용하도록 shouldOverrideUrlLoading을 구성합니다.

---

Case 4: iOS 네이티브 웹뷰

WKUserContentController에 tossAuthWebView JavaScript 메시지 핸들러를 추가합니다. POST 방식으로 요청을 로드하고, decidePolicyFor navigationAction에서 Universal Link 실행을 처리합니다.

---

Case 5: React Native 웹뷰

Android용 Chrome Intent와 iOS용 Universal Link를 처리하는 Native Module을 생성합니다. WebView의 originWhitelist에 intent://를 포함하고, onMessage 콜백으로 인증 상태를 처리합니다.

---

주요 콜백 메시지

메시지	설명
TOSS_AUTH_POPUP_ONLOAD	표준창 로드 완료
TOSS_AUTH_SUCCESS	인증 성공
TOSS_AUTH_FAIL	인증 실패
TOSS_AUTH_CLICK_NAVBAR_CLOSE	사용자가 창 닫음