brunch

You can make anything
by writing

C.S.Lewis

by SKKRYPTO Nov 14. 2019

[Skkrypto X Luniverse] Skkvote

안녕하세요 Skkrypto Skkvote 팀의 개발을 맡고 있는 정선웅입니다. 이번주는 저번주에 만들었던 smart contract는 잠시 내려놓고 API 부분을 개발해 보겠습니다. 우선 Skkvote에 필요한 API는 총 3가지 종류가 있습니다

1. Wallet API

2. Token transaction API

3. Vault API

그 중 오늘은 Wallet API에 대해서 설명하고 개발해 보도록 하겠습니다.

루니버스 API 는 https://apidocs.luniverse.io/ 사이트에 친절하게 종류와 사용법이 나와있습니다.

다른 API 가이드는 좀 불친절한 곳도 있긴 한데 루니버스는 성공시 response와 실패시의 response까지 상세하게 설명을 해 주어서 개발하기에 편한 부분이 있습니다.

API는 현재 v1.1로 과거 v1.0 버전에서 업그레이드가 있었습니다. 여러가지 API가 추가 되어 개발
자가 개발하기 좀 더 편리하게 되었습니다. 그럼 본격적으로 개발을 시작해 보겠습니다

우선 같은 학회원 류승우님께서 브런치에 작성하신 글을(https://brunch.co.kr/@skkrypto/48 ) 참고하여 DApp과 Side Token을 발행했습니다. 그 후에 DApp에 들어가셔서 API key를 복사하시고 IP Whitelist에 작업중인 IP를 등록해 놓습니다. 그렇지 않으면 연결이 제대로 되지 않습니다

아래 있는 사진이 IP whitelist에 미리 등록해 놓지 않았을 때의 화면입니다.

빨간 글씨로 “Access denied”가 뜨는 것을 알 수 있습니다. 미리미리 등록해 놓읍시다 ㅎㅎ

다음으로 작업의 편의를 위해서 config.js라는 파일을 생성합니다.이 파일에는 후에 더 추가하겠지만 transaction 종류라던가 main token, side token 등을 추가합니다. 우선은 지갑 주소(앞으로 추가되게 될)와 DApp API key를 미리 저장해 놓습니다. 그러면 앞으로 이 파일을 참조하면 되기 때문에 번거롭게 사용할때마다 복사할 필요는 없습니다.

Skkvote의 첫화면입니다. 최초의 계획은 한 학생에게 하나만 부여되는 @skku.edu메일 인증을 통해 중복투표를 방지하려 하였으나 이부분은 나중에 구현하는 것으로 하고 처음 받아온 Email(혹은 ID)를 Userkey로 사용하여 지갑을 만드는데 사용하도록 하겠습니다. Private key 대신에 Userkey라는 개념을 사용한 이유는 아래와 같습니다

‘Wallet API는 REOA 생성을 위한 API이며 REOA는 Private key를 루니버스에서 대신 관리하는 것입니다. 그래서 Wallet API는 DApp+WalletType(Luniverse PKMS)+Userkey)를 유니크한 키로 사용하고 고유한 계정으로 간주합니다.’가 Wallet API의 설명입니다. 그렇다면 저희는 지갑을 만들기 위해서 Private key를 대신할 Userkey가 필요하고 이를 처음 로그인시에 입력한 아이디로 정하겠습니다.

다음과 같이 입력하고 사용하기를 눌러보겠습니다

Login.html에서 create_wallet.html로 입력된 Userkey 인자를 전송하기 위해 form action을 사용했습니다. Method는 “GET”를 사용해 입력된 userkey를 성공적으로 전달했습니다.

물론 인자를 받는 create_wallet.html에도 비슷한 방법으로 받았습니다

이제 지갑 생성하기를 해보겠습니다. Wallet API를 사용할 것인데요 그전에 저는 ‘ajax’라는 것을 사용했습니다. Ajax란 비동기적인 웹 어플을 제작하기 위한 방법으로 사용자 입장에서 비동기 통신이 화면갱신도 없고 요청과 응답 사이 시간에도 다른 일을 할 수 있어 빠른 환경을 느끼게 할 수 있습니다. 기본적인 Ajax 사용법은 구글에 자세히 나와있습니다.

create_wallet.js 파일입니다. 우선 generate_wallet function은 html에서 지갑 생성하기 버튼을 onclick하였을 때 발생되는 함수입니다.

url부분에 API가이드에 있는 주소를 붙여주고 타입은 “POST”로 해줍니다. dataType은 JSON이고 headers부분에 아까 만들어둔 config.js파일을 활용하여 apikey를 붙여줍니다.

Data는 API guide에 있는 body부분이라고 생각하시면 편합니다. walletType은 LUNIVERSE(Luniverse PKMS입니다) 그리고 userkey는 저번 login.html화면에서 받아온 userkey를 사용합니다.

밑에보면 error시에는 alert을 사용해 생성에 실패했다고 띄워주고 성공했을시에는 생성 성공을 띄워주며 지갑주소를 화면에 띄워줍니다.

API guide에는 성공 시 응답화면과 실패시의 사례를 모두 들어주고 있습니다(개발자 입장에서 정말 편한 부분입니다) 성공시에는 data에서 address를 반환하는데 ‘data.data.address’를 통해 주소부분을 긁어와 줍니다. 이것을 javascript문법(자세한 것은 생략하겠습니다)을 통해 화면에 띄워주면 이번 주 지갑 생성 부분은 마무리가 됩니다