위젯 스크립트 URL

위젯 실행하기

'Token 발급하기' API를 통해 발급받은 토큰을 사용하여 위젯을 실행합니다. 위젯은 자동으로 지갑 연결, 메시지 서명(Signature Proof) 화면을 제공합니다.

Load the component

<script type="module" src={Widget Script}></script>

Add the element

<wallet-verifier
  id=”wv”
  data-token={token}
  data-language=”en”
>
</wallet-verifier>

<div id="wallet-verifier"></div>
<script type="module" 
  src="WIDGET_SCRIPT_URL"
></script>
<script>
  const el = document.createElement('wallet-verifier')

  el.setAttribute('data-token', 'YOUR_TOKEN')
  // Supported languages: en, et, cs, hu, pl, ru, uk, es, ko
  el.setAttribute('data-language', 'en')

  el.addEventListener('verification-complete', (event) => {
    console.log('complete', event.detail)
  })
  el.addEventListener('verification-error', (event) => {
    console.log('error', event.detail)
  })

  document.getElementById('wallet-verifier').appendChild(el)
</script>

import { useEffect, useRef } from 'react'

export default function WalletVerifierWidget({ token }) {
  const elRef = useRef(null)

  useEffect(() => {
    const script = document.createElement('script')
    script.type = 'module'
    script.src = 'WIDGET_SCRIPT_URL'
    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [])

  useEffect(() => {
    const el = elRef.current

    if (!el) return

    const onComplete = (event) => {
      const detail = event.detail
      console.log('complete', detail)
    }

    const onError = (event) => {
      const detail = event.detail
      console.log('error', detail)
    }

    el.addEventListener('verification-complete', onComplete)
    el.addEventListener('verification-error', onError)

    return () => {
      el.removeEventListener('verification-complete', onComplete)
      el.removeEventListener('verification-error', onError)
    }
  }, [])

  return (
    <wallet-verifier
      ref={elRef}
      data-token={token}
      // Supported languages: en, et, cs, hu, pl, ru, uk, es, ko
      data-language="en"
    />
  )

클라이언트 이벤트 전달

클라이언트 이벤트는 검증 성공 verification-complete과 검증 실패 verification-error가 내려옵니다. 검증에 성공하면 콜백을 통해 결과를 받을 수 있고, '검증 결과 조회하기'API로도 확인할 수 있습니다. 실패하면 별도의 콜백이 가지 않습니다.

검증 성공 이벤트 수신

검증이 성공적으로 완료되면, 위젯에서 verification-complete 이벤트가 발생합니다. 성공 이벤트에는 검증 세션에 대한 고유 값(ID), 상태, 주소 등 최소한의 결과가 포함되어 있습니다.

script>
  document.getElementById('wv')
    .addEventListener('verification-complete', (event) => {
      // event.detail contains:
      // id, status, flow, address, asset, blockchain
      console.log('Verification result:', event.detail);
    });
</script>

이름	타입	설명
address	string	고객 개인지갑 주소
asset	string	토큰 티커 (코인)
blockchain	string	블록체인(네트워크)
flow	string	인증 방법 및 플로우 (SIGNATURE_PROOF)
id	string	검증 세션에 대한 고유 값
status	string	검증 결과 상태값 ("PENDING", "VERIFIED")

검증 실패 이벤트 수신

검증에 실패하면 브라우저는 위젯에서 Verification error 이벤트가 발생합니다. 실패 이벤트에는 에러 코드와 메세지가 포함됩니다.

<script>
  document.getElementById('wv')
    .addEventListener('verification-error', (event) => {
      // event.detail contains: errorCode & message
      console.log('Verification error:', event.detail);
    });
</script>

이름	타입	설명
errorCode	string	에러 코드
message	string	에러 메세지

errorCode: 에러 코드

GENERAL_API_ERROR: 네트워크, API 장애 등 응답 에러
CRYPTOGRAPHIC_SIGNATURE_FLOW_ERROR: 인증 진행 중단시 에러로 주로 사용자가 인증을 중단한 경우 발생

📘
참고해 주세요!
위젯은 기본적으로 대부분의 오류를 자체적으로 처리하도록 설계되어 있습니다. 오류가 발생하더라도 사용자는 보통 현재 단계를 다시 시도하거나 검증 절차를 처음부터 다시 시작할 수 있습니다. 필요에 따라 오류 이벤트를 직접 처리하여 커스텀 로직을 적용하거나 대체 동작을 구현할 수 있습니다. 특히 GENERAL_API_ERROR 이벤트가 발생한 경우에는 위젯을 새로고침하거나 사용자에 대해 새로운 검증 세션을 시작하는 것을 권장합니다.