Создаем на Flow | Изучаем FCL — 10. Как создать новый аккаунт Testnet с помощью Blocto Wallet
Published: 2022-07-10 16:03:04

## Краткий обзор
Наши предыдущие исследования Flow Network были довольно безопасными - скрипты не могут изменить состояние сети, они могут только считывать из нее данные. Пришло время изменить это и сделать несколько "уточнений" здесь и там. Но для этого нам понадобится учетная запись Flow. Это можно сделать 4 различными способами:

- Использование кошелька **Blocto Wallet** (это тема данного поста)
- Использование [кошелька Lilico](https://dev.to/egormajj/sozdaiem-na-flow-izuchaiem-fcl-11-kak-ustanovit-i-sozdat-novuiu-uchietnuiu-zapis-testnet-s-pomoshchiu-lillico-11d0) - мы рассказываем об этом в [главе 11](https://dev.to/egormajj/sozdaiem-na-flow-izuchaiem-fcl-11-kak-ustanovit-i-sozdat-novuiu-uchietnuiu-zapis-testnet-s-pomoshchiu-lillico-11d0)
- через [Flow Faucet](https://testnet-faucet.onflow.org/) и [Flow CLI](https://docs.onflow.org/flow-cli/) - смотрите [главу 12](https://dev.to/egormajj/sozdaiem-na-flow-izuchaiem-fcl-12-kak-sozdat-novuiu-uchietnuiu-zapis-s-pomoshchiu-flow-cli-i-testnet-faucet-1h73) этой серии статей
- подписав и отправив транзакцию, в результате которой будет создан новый аккаунт (хотя он у вас уже должен быть 😛)

Лично я склоняюсь к мнению, что самый простой способ завести новый счет - это Blocto Wallet. Этим мы и займемся сегодня:

- создать новую учетную запись в Blocto Wallet
- аутентифицироваться на счете через FCL и Blocto Wallet
- получить баланс счета, используя адрес кошелька

## Как?
Существует 2 способа создания нового кошелька в Blocto:

- с помощью мобильного приложения
- с помощью всплывающего окна 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 предоставляет хорошие пошаговые инструкции по настройке и последующему вызову всплывающего окна входа на их [сайте с документацией](https://docs.blocto.app/blocto-sdk/javascript-sdk/flow/login-register). Мы будем использовать эти кусочки и части, чтобы сделать `Blocto Wallet Creator` 🧙♂️!

## Шаг 1 - Установка
Добавьте `"@onflow/fcl": "1.0.0"` в качестве зависимости

## Шаг 2 - Настройка
Как и в прошлый раз импортируем необходимые методы и настраиваем FCL:

```javascript
// 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 - Создание последовательности входа в систему

```javascript
// 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`".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x798d91iqp3so2xjqvuk.png)
Введите свой адрес электронной почты и нажмите кнопку "Войти / Зарегистрироваться".

После этого в ваш почтовый ящик должен прийти пароль для электронной почты, которую вы указали на предыдущем шаге.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2bn0tr6zivppl6khwa4.png)
Если пароль введен правильно, во всплывающем окне Blocto появится адрес вашего кошелька:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdt8kzvzefevbmb1y5m3.png)
После нажатия кнопки "Подтвердить" в журнале консоли должны появиться данные учетной записи (это для моего адреса, но ваш должен выглядеть аналогично):

```javascript
{
    f_type: "USER",
    f_vsn: "1.0.0",
    addr: "0xe7dd0f2ee4e077e2",
    cid: "ca88f086a545ce3c552d80",
    loggedIn: true,
    expiresAt: 1656443452552
}
```
Поздравляем, теперь вы обладатель свежеиспеченного аккаунта Flow 🍰!

## Шаг 5 - Проверить баланс счета
Давайте воспользуемся нашими знаниями из предыдущего поста и получим наш текущий баланс. Чтобы сделать это, давайте обновим наш импорт:

```javascript
import { account, query, config } from "@onflow/fcl";
```
и обновим наш IIEFE:

```javascript
// 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 Wallet Creator** - https://codesandbox.io/s/dev-to-fcl-create-account-q60f2b
- **Документация: Создание кошелька Flow** - https://docs.onflow.org/flow-token/available-wallets/
- **Blocto: Вход / Регистрация** -https://docs.blocto.app/blocto-sdk/javascript-sdk/flow/login-register#step-1-configure-fcl

Другие источники, которые могут быть вам полезны:

- **(ENG) | Документация Flow** - https://docs.onflow.org/ - более детальная информации о блокчейне Flow и как взаимодействовать с ним
- **(ENG) | Flow Portal** - https://flow.com/ - your entry point to Flow
- **(ENG) | FCL JS** - https://github.com/onflow/fcl-js - Исходный код и возможность поучаствовать в разработке библиотеки FCL JS library
- **(ENG) | Cadence** - https://docs.onflow.org/cadence/ - Введение в язык программирования Cadence
- **Codesandbox** - https://codesandbox.io - Замечательная среда разработки и прототипирования прямо в вашем браузере