Introdução
Nesta seção, vamos guiá-lo através da criação de um aplicativo para a web. Este aplicativo se conectará ao seu Nano e exibirá a mensagem “teste” a ser assinada com uma conta Ethereum usando a funcionalidade de mensagem de assinatura pessoal introduzida pelo EIP-191.
Os aplicativos Web USB e Web HID são implementados com @ledgerhq/hw-transport-webusb e @ledgerhq/hw-transport-webhid respetivamente.
Casos de uso
Este tutorial ensinará você a assinar uma mensagem com sua chave privada para verificar e provar que você é o proprietário do endereço.
Pré requisitos
- Certifique-se de ter cumprido os pré-requisitos.
- Instale e atualize o seu aplicativo Ethereum Nano para a versão 1.9.19 ou a mais recente.
Codificando
Inicialização
Primeiro, abra o terminal e crie uma pasta no seu directório de trabalho usual. Para este tutorial, a pasta terá o nome de "example-sign-personal-message".
Execute:
mkdir example-sign-personal-message
cd example-sign-personal-message
Inicialize o projeto executando:
npm init
Responda às perguntas exibidas ou, por padrão, pressione enter. Não há incidência na execução.
Execute:
mkdir src
touch src/index.html
touch src/main.js
A sua pasta deve estar assim:
Codificando
Abra a pasta example-sign-personal-message em um editor de código
index.html
No ficheiro index.html copie a passe o seguinte trecho de código :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My First Nano App</title>
<script type="module" src="main.js"></script>
</head>
<body>
<div id="main">
</div>
<button id="hashMessage">Hash my message</button>
</body>
main.js
No ficheiro main.js, copie a passe o seguinte trecho de código
Important
Comment out or remove the Transport package you are not using (@ledgerhq/hw-transport-webusb or @ledgerhq/hw-transport-webhid) and the corresponding const. In the example, we use webusb. Webhid is already commented in line 8 and line 23.
import 'core-js/actual';
import { listen } from "@ledgerhq/logs";
import Eth from "@ledgerhq/hw-app-eth";
// Mantenha esta importação se você quiser usar o Ledger Nano S/X/S Plus com o protocolo USB e delete a importação @ledgerhq/hw-transport-webhid
import TransportWebUSB from "@ledgerhq/hw-transport-webusb";
// Mantenha esta importação se quiser usar o Ledger Nano S/X/S Plus com o protocolo HID e delete a importação @ledgerhq/hw-transport-webusb
// Importe o TransportWebHID do "@ledgerhq/hw-transport-webhid";
// Mostre o header dentro do div onde tem o ID "main"
const initial = "<h1>Connect your Nano and open the Ethereum app. Click on “Hash my message”</h1>";
const $main = document.getElementById("main");
$main.innerHTML = initial;
document.querySelector("#hashMessage").addEventListener("click", async () => {
$main.innerHTML = initial;
try {
// tentando conectar o seu dispostivo ledger com o protocolo de USB
const transport = await TransportWebUSB.create();
// Tentando conectar o dispositivo ledger com o protocolo HID
// const transport = await TransportWebHID.create();
//Ouça os eventos que são enviados pelos pacotes do Ledger para debugar o aplicativo
listen(log => console.log(log))
//Quando o dispositivo Ledger conectado está tentando exibir o endereço bitcoin
const eth = new Eth(transport);
const signature = await eth.signPersonalMessage("44'/60'/0'/0/0", Buffer.from("test").toString("hex"));
const signedHash = "0x" + signature.r + signature.s + signature.v.toString(16);
// apresenta o endereço da sua carteira de bitcoin no ecrã
const h2 = document.createElement("h2");
h2.textContent = signedHash;
$main.innerHTML = "<h1>Your signed message:</h1>";
$main.appendChild(h2);
//Exibe o endereço no dispositivo Ledger e pede para verificar o endereço
const { address } = await eth.getAddress("44'/60'/0'/0/0");
const add = document.createElement("div");
add.textContent = address
$main.appendChild(add);
} catch (e) {
//Reconhece qualquer erro ocorrido e o exibe na tela
const $err = document.createElement("code");
$err.style.color = "#f66";
$err.textContent = String(e.message || e);
$main.appendChild($err);
}
});
Instalação de dependências
instalamento de pacotes
execute:
npm install --save core-js
npm install --save @ledgerhq/logs
npm install --save-dev parcel
npm install --save @ledgerhq/hw-app-eth
npm install --save eth-crypto
npm install --save-dev buffer
npm install --save-dev process
npm install --save-dev stream-browserify
Instale o transporte do HID e do pacote USB
Dependendo da sua escolha instale um dos correspondentes pacotes:
Instale o pacote ledger
@ledgerhq/hw-transport-webhid, que fornece todos os métodos para interagir com seu Nano com uma conexão HID (certifique-se de usar a versão 6.27.1):npm install --save @ledgerhq/[email protected].Instale o pacote ledger
@ledgerhq/hw-transport-webusbque fornece todos os métodos para interagir com seu Nano com uma conexão USB (certifique-se de usar a versão 6.27.1):npm install --save @ledgerhq/[email protected]
Package.json
Modifique “main”: “index.js” para “source”:”src/index.html”.
E certifique-se de ter esta linha em seu package.json:
"scripts": {
"build": "parcel build",
"start": "parcel"
},
O seu package.json deve estar assim:
{
"name": "example-sign-personal-message",
"version": "1.0.0",
"description": "",
"source": "src/index.html",
"scripts": {
"build": "parcel build",
"start": "parcel"
},
"author": "",
"license": "ISC",
"dependencies": {
"@ledgerhq/hw-app-eth": "^6.29.0",
"@ledgerhq/hw-transport-webusb": "^6.27.1",
"@ledgerhq/logs": "^6.10.0",
"core-js": "^3.23.3",
"eth-crypto": "^2.3.0"
},
"devDependencies": {
"buffer": "^6.0.3",
"parcel": "^2.6.2",
"process": "^0.11.10",
"stream-browserify": "^3.0.0"
}
}
Uso
Inicie o desenvolvimento do servidor
Agora que a configuração foi concluída, o aplicativo deve ser criado para ser exibido. Inicie o servidor de desenvolvimento:
npm run start
Agora o aplicativo está funcionando. Abra o navegador e vá para localhost:1234, irá mostrar:
Plugue o seu Nano
Antes de clicar em “Hash my message”, conecte seu Nano à porta USB, desbloqueie-o e execute o aplicativo ethereum. Em seguida, clique em “Hash my message”.
Vá para o seu Nano
Quando você clicar em “Hash my message”, uma mensagem pop-up aparecerá convidando você a assinar uma mensagem.
Clique com o botão direito para ver o conteúdo da mensagem que você vai assinar com seu endereço Ethereum:
Assine a mensagem
Clique com o botão direito nas próximas telas para assinar a mensagem “teste” ou recusá-la:
Depois de assinado, o webapp exibirá:
- A mensagem assinada (“hash”)
- O endereço Ethereum usado para assinar a mensagem
Verifique no runkit.com
Você pode verificar se foi você quem assinou a mensagem entrando em runkit.com e executando o seguinte trecho de código.
- Adapte o código com a mensagem que você assinou e o hash da mensagem:
const { ethers } = require("ethers");
ethers.utils.verifyMessage("test","0xefb42c22baa0143b322e93b24b0903a0ef47a64b716fbb77debbea55a93dec3e4417aff7dce845723240916c6e34cf17c674828b3addfb0afad966334df5b6311b");
2- Execute seu código, agora ele deve exibir o endereço Ethereum vinculado à mensagem assinada (a execução pode demorar um pouco):
Este artigo foi traduzido por aiengineer13, o artigo original foi feito pelo portal ledger developer para encontrar o artigo original siga este link
Top comments (0)