본문 바로가기

React/BlockChain

[블록체인] 클레이튼 지갑 KaiKas 시작하기(로그인)

Caver js

https://docs.kaikas.io/02_api_reference/02_caver_methods

 

Caver Methods - Kaikas Docs

Unlike caver.klay.sendTransaction, this does not send transaction to blockchain. Instead it returns RLP encoded signed transaction. This is useful for transactions that require multiple signatures(eg. fee delegated tx) where you have to get the signed raw

docs.kaikas.io

caver-js는 개발자가 Klaytn 노드와 상호 작용할 수 있게 해주는 JavaScript API 라이브러리입니다. npm 에서 사용할 수 있습니다 .
 

1.  caver-js 설치

npm i caver-js

 

2. import

import Caver from 'caver-js'

const caver = new Caver(window.klaytn);

 

KaiKas

- 클릭시 KaiKas 크롬 확장 프로그램이 설치되지 않은 상태면, 설치 사이트로 이동,

설치된 상태면 else 부분 실행되도록 설정함

현재는 클릭시 Kaikas 로그인 모달창으로 연결되어 로그인되도록 설정, 로그인 시 해당 화면에 selectedAddress만 출력되도록 함

export default function Header() {
  const caver = new Caver(window.klaytn);
  const [kaikasState, setKaikasState] = useRecoilState(kaikasAtom);

  const handleOpenKaikas = async () => {
    if (window.klaytn) {
      //접속
      alert('카이카스를 연결하겠습니다.');

      const accounts = await window.klaytn.enable();
      const account = accounts[0];
      console.log(account);

      //사용자 계정에 접근하기
      window.klaytn.on('accountsChanged', function (accounts) {
        console.log(window.klaytn.selectedAddress);
        setKaikasState(window.klaytn.selectedAddress);
      });

      //사용자 네크워크 정보 가져오기
      window.klaytn.on('networkChanged', function () {
        console.log(window.klaytn.networkVersion);
      });
      setKaikasState(window.klaytn.selectedAddress);
    } else {
      alert('클레이튼 지갑을 설치해주세요.');
      window.open(
        'https://chrome.google.com/webstore/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi',
        '_blank'
      );
    }
  };

  return (
    <>
      <header className='headerCotainer'>
        <ul>
          <li>Logo</li>
          {kaikasState ? (
            <li>
              <p>{kaikasState}</p>
            </li>
          ) : (
            <li>
              <li>
                <CreateBtn
                  text={'kaikas 연결'}
                  onClick={handleOpenKaikas}
                  className='noticeUpdateBtn'
                />
              </li>
              ..
            </li>
          )}
        </ul>
      </header>
    </>
  );
}

 

'사용자 네트워크 정보 가져오기' 가 필요한 이유?

사용자가 Kaikas 로그인을 할 때, 네트워크가 어딘지 파악하여 만약 테스트넷일 경우는 alert창으로 경고를, 메인넷(실제이용네트워크)일 경우는 이용할 수 있도록 설정하기 위함

+ 지갑 주소를 바꾸면 로그아웃된다는 설정을 추가할 수도 있다.

 

https://forum.klaytn.foundation/t/kaikas-account-change/2791/3

 

Kaikas account change

답변 감사합니다. 예를 들어서 지금 보고 있는 현재 페이지 (forum.klaytn.com) 에서 F12를 눌러 const accounts = await window.klaytn.enable() 를 입력하면, 지갑이 열려서 연결 할 수가 있구요. 연결 후 계속해서

forum.klaytn.foundation

 

https://github.com/dev-jiwon/kaikas_extesnion_test/blob/master/src/App.js

 

GitHub - dev-jiwon/kaikas_extesnion_test

Contribute to dev-jiwon/kaikas_extesnion_test development by creating an account on GitHub.

github.com

 

https://lhoiktiv.tistory.com/331

 

스터디 준비자료: caver.js - 1

카이카스 시작 카이카스 로그인부터 알아보겠습니다. 크래프터스페이스에 들어가서 로그인을 누르면 다음과 같은 화면이 나옵니다. 그리고 로그인 버튼을 눌러서 로그인을 진행합니다. 1. window

lhoiktiv.tistory.com

https://junhee6773.tistory.com/entry/kaikas-sign

 

kaikas sign

카이카스 서명은 mint 하기 전에 등록하는 단계에서 사용합니다. 이 단계를 진행하기 위해서는 caver-js가 정상적으로 돌아가야함으로 caver-js를 하기 위한 셋팅을 먼저 해주시길 바랍니다. 1. yarn add

junhee6773.tistory.com

https://velog.io/@eliz/Caver-js-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%8A%A4%EB%A7%88%ED%8A%B8-%EC%BB%A8%ED%8A%B8%EB%9E%99%ED%8A%B8-%EC%97%B0%EB%8F%99