흐름에 구축 | FCL 배우기 - 10. Blocto 지갑으로 새 테스트넷 계정을 만드는 방법

개요

Flow Network에 대한 이전 탐색은 꽤 무해했습니다. 스크립트는 체인의 상태를 변경할 수 없으며 체인에서 데이터를 읽을 수만 있습니다. 이것을 바꾸고 여기저기서 약간의 "찌그러짐"을 만들 때입니다. 하지만 이렇게 하려면 Flow 계정이 필요합니다. 다음 4가지 방법으로 이를 수행할 수 있습니다.

Blocto Wallet 사용하기 (이 글의 주제입니다)

사용 - Chapter 11에서 이 내용을 다루고 있습니다.

Flow Faucet 및 Flow CLI - 이 시리즈

의 체크Chapter 12를 통해

트랜잭션에 서명하고 제출하면 새 계정이 생성됩니다(하나가 있어야 하지만 😛)

개인적으로 새 계정을 만드는 가장 쉬운 방법은 Blocto Wallet이라는 의견에 끌립니다. 이것이 오늘 우리가 할 일입니다.

Blocto 지갑으로 새 계정 만들기

FCL 및 Blocto 지갑을 통해 계정에 인증

지갑 주소를 사용하여 계정 잔액 가져오기

어떻게?

Blocto로 새 지갑을 만드는 방법은 2가지가 있습니다.

모바일 앱 사용

FCL 팝업 사용

모바일 앱으로 지갑 생성 프로세스를 설명하는 여러 기사가 있습니다. 예를 들어:

https://dappradar.com/blog/how-to-install-and-use-blocto-wallet-on-flow

https://medium.com/bytenext/how-to-create-blocto-wallet-858ee3a9212c

https://avatarart.io/blog/details/how-to-create-blocto-wallet

모바일이 훌륭하지만 전부입니다. 추가 단계를 줄이고 FCL을 사용하여 지갑을 만들 것입니다.

Blocto는 doc site 에서 로그인 팝업을 구성하고 호출하는 방법에 대한 단계별 지침을 제공합니다. 우리는 그 조각들을 사용하여 Blocto Wallet Creator 🧙‍♂️를 만들 것입니다!

1단계 - 설치

종속 항목으로 "@onflow/fcl": "1.0.0" 추가

2단계 - 설정

지난 번과 마찬가지로 필요한 메서드를 가져오고 FCL을 설정합니다.

// Import methods from FCL
import { unauthenticate, logIn, config } from "@onflow/fcl";

// Specify the API endpoint - this time we will use Testnet
const api = "https://rest-testnet.onflow.org";

// This is the endpoint, which will be responsible for wallet authorization
const handshake = "https://flow-wallet-testnet.blocto.app/authn";

// Configure FCL to use mainnet as the access node
config()
  // connect to Flow testnet
  .put("accessNode.api", api)
  .put("challenge.handshake", handshake);

3단계 - 로그인 시퀀스 생성

// We will use IIFE to execute our code right away
(async () => {
  console.clear();

  // just in case we have authenticated user, we will log him out first
    await unauthenticate();

    // calling "logIn" will invoke "Sign in with Blocto - Testnet" popup
    const wallet = await logIn();

  console.log({ wallet });})();
})();

4단계 - 시작!

코드가 실행되면 "Sign in with Blocto Testnet "라는 제목의 팝업이 표시됩니다.



이메일 주소를 입력하고 “Sign in/Register” 버튼을 누르세요.

그런 다음 받은 편지함에서 이전 단계에서 제공한 이메일에 대한 암호를 받아야 합니다.



암호가 맞으면 Blocto 팝업에 지갑 주소가 표시됩니다.



"확인"버튼을 누르면 콘솔 로그가 계정 세부 정보로 채워져야 합니다(내 주소에 대한 것이지만 귀하의 주소도 유사해야 함).

{
    f_type: "USER",
    f_vsn: "1.0.0",
    addr: "0xe7dd0f2ee4e077e2",
    cid: "ca88f086a545ce3c552d80",
    loggedIn: true,
    expiresAt: 1656443452552
}

축하합니다. 이제 갓 구운 Flow 계정 🍰의 소유자가 되셨습니다!

5단계 - 계정 잔액 가져오기

이전 게시물의 지식을 사용하고 현재 잔액을 가져오겠습니다. 이를 위해 가져오기를 업데이트해 보겠습니다.

import { account, query, config } from "@onflow/fcl";

IIEFE를 업데이트합니다.

// We will use IIFE to execute our code right away
(async () => {
  console.clear();
  await unauthenticate();

  const wallet = await logIn();
  console.log({ wallet });

    // We will take only "balance" field from account details
  const { balance }= await account(wallet.addr);
  const flowBalance = result.balance / Math.pow(10, 8);
  console.log({ flowBalance });
})();

그것은 귀하의 계정에 0.001 FLOW입니다. 당신은 부자입니다 🤑!

다음 시간까지 👋

자원

Codesandbox 지갑 생성기 - https://codesandbox.io/s/dev-to-fcl-create-account-q60f2b

문서: 흐름 지갑 만들기 - https://docs.onflow.org/flow-token/available-wallets/

Blocto: 로그인/등록 - https://docs.blocto.app/blocto-sdk/javascript-sdk/flow/login-register#step-1-configure-fcl

유용할 수 있는 기타 리소스:

Flow Docs 사이트 - https://docs.onflow.org/ - Flow 블록체인 및 상호 작용 방법에 대한 자세한 정보

Flow Portal - https://flow.com/ - Flow 진입점

FCL JS - https://github.com/onflow/fcl-js - 소스 코드 및 FCL JS 라이브러리에 기여하는 기능

케이던스 - https://docs.onflow.org/cadence/ - 케이던스 소개

Codesandbox - https://codesandbox.io - 빠른 프로토타이핑을 지원하는 놀라운 브라우저 내 IDE