以太坊Web钱包开发创建账号

技术博客6个月前发布 Dexnav

0 362

以太坊Web钱包开发创建账号

电报联系方式

去中心化网页钱包

Web钱包是一种通过网页界面呈现的钱包，而去中心化Web钱包则在浏览器内完成交易签名等操作。尽管我们讨论的重点是Web钱包的功能实现，但其他形式的钱包，如Android或iOS钱包，遵循相似的开发理念。

钱包功能

一个钱包通常主要包含的功能有：

账号管理（主要是私钥的管理）：创建账号、账号导入导出
账号信息展示：如以太币余额、Token（代币）余额。
转账功能：发送以太币及发送Token（代币）

这些功能将采用ethers.js来进行开发。与web3.js类似，ethers.js是一套与以太坊区块链进行交互的库。不仅如此，ethers.js还实现了与BIP 39等相关提案有关的功能。这些功能主要分为两个界面：一个是用于账号管理，另一个用于展示账号信息和进行转账。

创建钱包账号

创建账号，可以有两种方式：

直接生成32个字节的数当成私钥
通过助记词进行确定性推导出私钥

使用随机数作为私钥创建钱包账号

即方式一，可以使用ethers.utils.randomBytes生成一个随机数，然后使用这个随机数来创建钱包，如代码:

var privateKey = ethers.utils.randomBytes(32);
var wallet = new ethers.Wallet(privateKey);
console.log(“账号地址: ” + wallet.address);

上面代码的 wallet 是 ethers 中的一个钱包对象，它除了有代码中出现的.address 属性之外，还有如获取余额、发送交易等方法。

注意ethers.utils.randomBytes 生成的是一个字节数组，如果想用十六进制数显示出来表示，需要转化为BigNumber代码如下：

let keyNumber = ethers.utils.bigNumberify(privateKey);
console.log(randomNumber._hex);

现在，让我们将界面与功能结合起来，实现一个完整的账号创建过程，如下图所示。在这个过程中，我们将加载私钥来创建新的账号。

界面代码（HTML）代码如下：

<table>
<tr>
<th>私钥:</th>
<td><input type=”text” placeholder=”(private key)” id=”select-privatekey” /></td>
</tr>
<tr>
<td> </td>
<td>
<div id=”select-submit-privatekey” class=”submit”>加载私钥</div>
</td>
</tr>
</table>

对应的逻辑代码(JavaScript)如下：

// 使用JQuery获取两个UI标签
var inputPrivatekey = $(‘#select-privatekey’);
var submit = $(‘#select-submit-privatekey’);

// 生成一个默认的私钥
let randomNumber = ethers.utils.bigNumberify(ethers.utils.randomBytes(32));
inputPrivatekey.val(randomNumber._hex);

// 点击“加载私钥”时，创建对应的钱包
submit.click(function() {
var privateKey = inputPrivatekey.val();
if (privateKey.substring(0, 2) !== ‘0x’) { privateKey = ‘0x’ + privateKey; }
var wallet = new ethers.Wallet(privateKey));

});

如果用户提供一个已有账号的私钥，则会导入其原有账号。

通过助记词方式创建钱包账号

这是目前主要钱包的通用方法。首先，我们生成一个随机数，然后利用这个随机数创建助记词。接下来，我们使用这个助记词来创建钱包账户。这个过程需要使用以下API：

var rand = ethers.utils.randomBytes(16);

// 生成助记词
var mnemonic = ethers.utils.HDNode.entropyToMnemonic(rand);

var path = “m/44’/60’/0’/0/0”;

// 通过助记词创建钱包
ethers.Wallet.fromMnemonic(mnemonic, path);

我们结合界面来实现一下通过助记词方式创建钱包账号，其效果图如下：

界面代码（HTML）代码如下：

<table>
<tr>
<th>助记词:</th>
<td><input type=”text” placeholder=”(mnemonic phrase)” id=”select-mnemonic-phrase” /></td>
</tr>
<tr>
<th>Path:</th>
<td><input type=”text” placeholder=”(path)” id=”select-mnemonic-path” value=”m/44’/60’/0’/0/0″ /></td>
</tr>
<tr>
<td> </td>
<td>
<div id=”select-submit-mnemonic” class=”submit”>推倒</div>
</td>
</tr>
</table>

对应的逻辑代码(JavaScript)如下：

var inputPhrase = $(‘#select-mnemonic-phrase’);
var inputPath = $(‘#select-mnemonic-path’);
var submit = $(‘#select-submit-mnemonic’);

// 生成助记词
var mnemonic = ethers.utils.HDNode.entropyToMnemonic(ethers.utils.randomBytes(16));
inputPhrase.val(mnemonic);

submit.click(function() {
// 检查助记词是否有效。
if (!ethers.utils.HDNode.isValidMnemonic(inputPhrase.val())) {
return;
}

// 通过助记词创建钱包对象
var wallet = ethers.Wallet.fromMnemonic(inputPhrase.val(), inputPath.val());
});

同样用户可以提供一个其保存的助记词来导入其钱包。

开发联系：DEXDAO