JavaScript SDK

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

요구 사항

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

환경 설정

Klip JavaScript SDK는 별도의 가입 절차가 필요하지 않습니다. HTTP 통신이 가능한 어느 환경에서도 동작합니다. 다만, 기본적으로 Klip 앱이나 모바일 카카오톡이 설치된 환경에서 호출해야 합니다. 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.0.0.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를 받습니다.

prepare.auth

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

Parameters

Name	Type	Description
bappName	string	사용자에게 표시될 BApp의 이름
successLink	string	사용자 동의과정 완료 후 돌아올 BApp에 대한 Deep Link (optional)
failLink	string	사용자 동의과정에서 문제가 발생할 경우 돌아올 BApp에 대한 Deep Link (optional)

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

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

Parameters

Name	Type	Description
bappName	string	사용자에게 표시될 BApp의 이름
to	string	받는 사람의 주소
amount	string	보낼 KLAY 수량 (단위: KLAY, 소수점 최대 6자리 허용)
from	string	사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink	string	사용자 동의과정 완료 후 돌아올 BApp에 대한 Deep Link (optional)
failLink	string	사용자 동의과정에서 문제가 발생할 경우 돌아올 BApp에 대한 Deep Link (optional)

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

Name	Type	Description
bappName	string	사용자에게 표시될 BApp의 이름
to	string	받는 사람의 주소
amount	string	보낼 토큰 수량 (단위: 토큰의 default 단위, 소수점 최대 6자리 허용)
contract	string	토큰 컨트랙트 주소
from	string	사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink	string	사용자 동의과정 완료 후 돌아올 BApp에 대한 Deep Link (optional)
failLink	string	사용자 동의과정에서 문제가 발생할 경우 돌아올 BApp에 대한 Deep Link (optional)

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

Name	Type	Description
bappName	string	사용자에게 표시될 BApp의 이름
to	string	받는 사람의 주소
id	string	NFT id
contract	string	NFT 컨트랙트 주소
from	string	사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink	string	사용자 동의과정 완료 후 돌아올 BApp에 대한 Deep Link (optional)
failLink	string	사용자 동의과정에서 문제가 발생할 경우 돌아올 BApp에 대한 Deep Link (optional)

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

Name	Type	Description
bappName	string	사용자에게 표시될 BApp의 이름
to	string	컨트랙트의 주소
value	string	컨트랙트 실행하면서 같이 보낼 KLAY 수량 (단위: peb)
abi	string	실행할 함수의 abi
params	string	실행할 함수의 인자 목록
from	string	사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink	string	사용자 동의과정 완료 후 돌아올 BApp에 대한 Deep Link (optional)
failLink	string	사용자 동의과정에서 문제가 발생할 경우 돌아올 BApp에 대한 Deep Link (optional)

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 계정으로 메시지를 서명하는 요청입니다.

Parameters

Name	Type	Description
bappName	string	사용자에게 표시될 BApp의 이름
value	string	서명할 메시지 원문
from	string	사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink	string	사용자 동의과정 완료 후 돌아올 BApp에 대한 Deep Link (optional)
failLink	string	사용자 동의과정에서 문제가 발생할 경우 돌아올 BApp에 대한 Deep Link (optional)

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에 인증 또는 서명을 요청합니다. 다음의 경우에는 Apple App Store 내 Klip 또는 카카오톡 앱 다운로드 화면으로 자동 이동합니다.

• 실행 중인 스마트폰 기기에 Klip 앱이나 카카오톡이 설치되지 않은 경우

• Klip 앱이 사용할 수 없는 버전인 경우 prepare 요청을 통해 받은 request key를 인자로 받습니다. QR code를 이용한 request 스텝 처리는 QR code 예제 항목을 참조하십시오.

request API의 isKlipAppCall 파라미터 설정에 따라 먼저 호출하는 앱이 달라집니다. isKlipAppCall의 기본값은 false이며 이 때는 카카오톡 내 Klip을 실행합니다. isKlipAppCall 값을 true로 변경하면 실행 중인 스마트폰 기기에 Klip 앱과 카카오톡 설치 여부를 확인한 후 아래와 같은 순서로 실행됩니다.

1. 기기에 Klip 앱이 설치된 경우 Klip 앱 먼저 실행

2. 기기에 Klip 앱이 설치되지 않은 경우 카카오톡 Klip 실행

3. 기기에 카카오톡과 Klip 앱 모두 설치되지 않은 경우 App Store의 Klip 앱 다운로드 페이지로 이동

NOTE AOS Chrome 환경에서 request API를 실행할 때는 예외적으로 아래와 같이 동작합니다.

• isKlipAppCall 미 설정 시

  • 카카오톡 내 Klip 실행

  • 기기에 카카오톡이 설치되지 않은 경우 Play 스토어의 카카오톡 다운로드 페이지로 이동

• isKlipAppCall 설정 시

  • Klip 앱 실행

  • 기기에 Klip 앱이 설치되지 않은 경우 Play 스토어의 Klip 앱 다운로드 페이지로 이동

AOS Chrome 환경에서 앱을 실행하려면 intent scheme을 사용해야 합니다. 이 스킴은 실행하려는 앱이 기기에 설치되지 않았을 때 AOS 내부에서 Google Play 스토어 다운로드 페이지로 바로 이동하도록 동작합니다.

• 참고 링크

Parameters

Name	Type	Description
requestKey	String	요청 번호
onUnsupportedEnvironment	Function	모바일 환경이 아닌 경우 실행 할 콜백 함수 (optional)
isKlipAppCall	boolean	Klip 앱을 우선 호출 시 true (기본값: false)

Example

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

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

getResult

App2App API 요청에 대한 결과를 확인합니다.

Parameters

Name	Type	Description
requestKey	String	요청 번호

Example

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

getCardList

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

Parameters

Name	Type	Description
contract	String	조회할 카드의 컨트랙트 주소
eoa	String	조회할 사용자 주소
cursor	String	조회할 커서값입니다. 만약, 조회할 카드의 보유목록이 100개 이상이면, 다음 100개 정보를 받을 수 있습니다.(optional)

Example

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

Error Code

Http Status	Error Code	Description
-	-	Klip REST API 에러코드와 동일

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