JavaScript SDK

이 페이지에서는 BApp에서 Klip을 활용하기 위한 App2App JavaScript SDK를 설명합니다.

Kaia는 기존의 Klaytn과 Finschia 블록체인 네트워크가 통합되어 운영되는 블록체인의 새 이름입니다. 이에 따라 본 문서는 대부분 Klaytn을 Kaia로 / KLAY를 KAIA로 지칭하지만, 하위 호환성을 위해 기존 호출과 응답에서 사용되던 klaytn, KLAY 등의 키워드는 동일하게 유지되는 점 참고 부탁드립니다.

요구 사항

  • (npm 이용하여 설치하는 경우) node 10 이상 권장

환경 설정

Klip JavaScript SDK는 별도의 가입 절차가 필요하지 않습니다. HTTP 통신이 가능한 어느 환경에서도 동작합니다. 다만, 기본적으로 Klip 앱이 설치된 환경에서 호출해야 합니다. Klip 앱을 실행하여 Klip 사용자의 승인을 받아야 하기 때문입니다.

npm을 이용하는 경우

npm install klip-sdk 혹은 yarn add klip-sdk 커맨드를 통해 설치 후 다음과 같이 ES module import 방식으로 사용합니다.

import { prepare, request, getResult, getCardList } from 'klip-sdk'

직접 파일을 다운 받아 사용하는 경우

다운로드탭에서 Klip JavaScript SDK를 다운받습니다. 다운 받은 파일을 레포지토리에 위치시킨 후 HTML파일에 다음과 같이 스트립트 태그를 삽입합니다.

<script src="./lib/klipSDK-2.3.2.min.js"></script>

이후 글로벌 네임스페이스에 선언된 klipSDK 변수를 활용하여 각 메소드에 접근합니다.

klipSDK.prepare(...)
klipSDK.request(...)
klipSDK.getResult(...)
klipSDK.getCardList(...)

API

개요

App2App API 요청은 크게 prepare, request, getResult의 순서로 진행이 됩니다.

  • prepare는 어떠한 요청을 할지 요청을 정의하는 단계로 총 5가지 종류의 요청이 존재

  • request는 함수 호출을 통해 Klip으로 화면이 전환되어 실제 서명 프로세스를 진행

  • getResult는 함수 호출을 통해 결과값을 받고 확인

추가적으로 getCardList는 BApp 개발의 편의를 위해 Klip 사용자의 NFT 목록을 받아올 수 있도록 제공되는 함수입니다.

prepare

App2App API 요청을 준비하고 request key를 받습니다.

사용 가능한 요청 유형

  • Klip 연결 타입(=인증)의 경우 auth

  • KAIA(=KLAY) 전송 타입의 경우 sendKLAY

  • Token 전송 타입의 경우 sendToken

  • Card 전송 타입의 경우 sendCard

  • Contract 실행 타입의 경우 executeContract

  • Sign Message 요청 타입의 경우 signMessage - 이 경우 Klaytn 표준에 따라 "\x19Klaytn Signed Message:\n" + len(message)의 접두사를 붙여 서명합니다.

prepare.auth

사용자의 정보를 획득하는 요청입니다.

Parameters

Example

const bappName = 'my app'
const successLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const failLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const res = await prepare.auth({ bappName, successLink, failLink })
if (res.err) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

prepare.sendKLAY

사용자의 KAIA(=KLAY)를 특정 주소로 전송하는 요청입니다.

Parameters

Example

const bappName = 'my app'
const from = '0xB21F0285d27beb2373EC...'
const to = '0xD8b1dC332...'
const amount = '13.2'
const successLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const failLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const res = await prepare.sendKLAY({ bappName, from, to, amount, successLink, failLink })
if (res.err) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

prepare.sendToken

사용자가 보유한 토큰을 특정 주소로 전송하는 요청입니다.

Parameters

Example

const bappName = 'my app'
const from = '0xB21F0285d27beb2373EC...'
const to = '0xD8b1dC332...'
const amount = '10.123'
const contract = '0x813FB7677BbBAA...'
const successLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const failLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const res = await prepare.sendToken({ bappName, from, to, amount, contract, successLink, failLink })
if (res.err) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

prepare.sendCard

사용자가 보유한 카드(NFT)를 특정 주소로 전송하는 요청입니다.

Parameters

Example

const res = await prepare.sendCard({ bappName, from, to, id, contract, successLink, failLink })
if (res.err) {
  setErrorMsg(res.err)
} else {
  setRequestKey(res.request_key)
}

prepare.executeContract

사용자가 특정 컨트랙트의 함수를 실행하도록 하는 요청입니다.

Parameters

Example

const bappName = 'my app'
const from = '0xB21F0285d27beb2373EC...'
const to = '0xD8b1dC332...'
const value = '800000000'
const abi = "{\"constant\":false,\"inputs\":[{\"name\":\"tokenId\",\"type\":\"uint256\"}],\"name\":\"buyCard\",\"outputs\":[],\"payable\":true,\"stateMutability\":\"payable\",\"type\":\"function\"}"
const params =  "[\"2829\"]"
const successLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const failLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const res = await prepare.executeContract({ bappName, from, to, value, abi, params, successLink, failLink })
if (res.err) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

prepare.signMessage

사용자가 Klip 계정으로 메시지를 서명하는 요청입니다. 기존 Klaytn 표준에 따라 "\x19Klaytn Signed Message:\n" + len(message)의 접두사를 붙여 서명합니다.

Parameters

Example

const bappName = 'my app'
const value = 'original message ...'
const from = '0xB21F0285d27beb2373EC...'
const successLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const failLink = 'myApp://...' // Android 플랫폼의 경우, 'intent://...' 로 작성
const res = await prepare.signMessage({ bappName, value, from, successLink, failLink })
if (res.err) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

request

Deep Link를 이용하여 Klip에 인증 또는 서명을 요청합니다. 실행 중인 스마트폰 기기에 Klip 앱이 설치되지 않았거나 자동 실행할 수 없는 경우 'Klip 소개 페이지(https://klipwallet.com)' 로 이동하여 사용자는 Klip 앱을 다운로드받을 수 있습니다. requestKey에는 prepare 단계에서 Klip 서버로부터 받은 요청 번호를 사용합니다.

PC 환경에서 QR code를 이용한 request 스텝 처리는 QR code 예제 항목을 참조하십시오.

Parameters

Example

request(
  'b37f873d-32ce-4d5d-b72e-08d528e7fb8e', 
  () => alert('모바일 환경에서 실행해주세요')
);

getResult

App2App API 요청에 대한 결과를 확인합니다. requestKey에는 prepare 및 request 단계에서 사용한 요청 번호를 사용합니다.

Parameters

Example

getResult('b37f873d-32ce-4d5d-b72e-08d528e7fb8e')

getCardList

사용자의 카드 (NFT) 보유 목록을 가져옵니다. 조회하고자 하는 NFT 컨트랙트 주소를 알고 있어야 하며, Klip에서 지원하는 컨트랙트만 가능합니다.

Parameters

Example

const contract = '0xB21F0285d27beb2373EC...'
const eoa = '0xD8b1dC332...'
const cursor = ''
getCardList({ contract, eoa, cursor })

Error Code

이 문서 혹은 Klip에 관한 문의는 개발자 포럼을 방문해 도움을 받으십시오.

PreviousApp2App SDKNextAndroid SDK

Last updated