004 以太坊錢包開發-建立使用者

阿新 • • 發佈：2019-01-18

安裝模板引擎

$ cd myWallet

# 安裝koa模板使用中介軟體
$ npm install --save koa-views

# 安裝ejs模板引擎
$ npm install --save ejs

引入模版引擎

修改 myWallet/index.js，載入模版引擎

const Koa = require('koa');
const routers = require('./routers/index')
const koaBody = require('koa-body');
const views = require('koa-views')
const path = require 
('path')

const app = new Koa();

// 引入 koa-body 中介軟體
app.use(koaBody({
  multipart: true
}));

// 載入模板引擎
app.use(views(path.join(__dirname, './view'), {
    map : {html:'ejs'}
  }))

// 初始化路由中介軟體
app.use(routers.routes()).use(routers.allowedMethods())
app.listen(3000);
console.log('server is starting at port 3000' 
)

新建 view 頁面

進入專案目錄，新建 view 資料夾，新建 account.html

$ cd myWallet
$ mkdir view
$ vi account.html

account.html 程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>fujinliang.top</title 
>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    account
</body>
</html>

修改 controllers/account.js ，呼叫 ctx.render("account") 實現頁面的跳轉

module.exports = {
    async getAccountList (ctx) {
        await ctx.render("account")
    }
}

通過 node index.js 啟動專案, 通過訪問 http://localhost:3000 檢視結果，頁面顯示如下：

account

引入 Bootstrap css框架

如何存放 bootstrap 的樣式檔案？

需要引入靜態檔案目錄

引入靜態檔案目錄

$ cd myWallet
$ npm install koa-static

修改 index.js 引入koa-static

...

const static = require('koa-static')

const app = new Koa();

// 靜態資源目錄對於相對入口檔案index.js的路徑
const staticPath = './static'

app.use(static(
  path.join( __dirname,  staticPath)
))

...

通過 web3 實現使用者建立

使用者建立的主要流程：通過 web3.eth.accounts.create() 建立使用者，會得到 account 的地址及私鑰。通過 account.encrypt(pwd) 生成keystore 的內容，同時通過 fs.writeFile 方法將內容寫入到檔案之中。

async createAccount (ctx) {
        let returnResult = {
            code: 0,
            msg: '成功！',
            data: {}
        }

        let data = ctx.request.body
        const pwd = data.pwd

        // 呼叫 web3 建立賬戶
        let account = await web3.eth.accounts.create();

        // encrypt 返回一個JSON 物件
        const keystoreJson = await account.encrypt(pwd)

        // 將 JSON 物件轉為字串
        const keystoreStr = JSON.stringify(keystoreJson)

        // 生成隨機檔案儲存 keystore 的字串
        const randFilename = "UTC--"+new Date().toISOString()+"--"+account.address

        // 設定儲存檔案的目錄
        const filePath =path.join(__dirname,"../static/keystore/"+randFilename)

        // 將 keystore 的內容寫入檔案中
        await fileUtil.writeFile(filePath,keystoreStr)

        // 將 使用者地址、私鑰、keystore 資料返回
        const result = {"account":account.address,"privateKey":account.privateKey,"keystore": config.keystoreUrl+randFilename}
        returnResult.data = result
        ctx.body = returnResult
    },

將 keystore 的內容寫到檔案之中。

const fs = require("fs")

module.exports = {

    readFile(fPath) {
        return new Promise(function (resolve, reject) {
            fs.readFile(fPath, function(err, data) {
                if (err) reject(err);
                else resolve(data);
            });
        });
    },

    writeFile(fPath, content) {
        return new Promise(function(resolve, reject) {
            fs.writeFile(fPath, content, function(err, data) {
                if (err) reject(err);
                else resolve("Successed");
            });
        });
    }
}

新增路由的配置

修改 routers/index.js ，新增如下程式碼：

router.post('/account/create',accountController.createAccount)

建立賬戶的前端頁面

建立錢包的頁面主要包含以下功能：

輸入密碼生成 keystore
下載 keystore 檔案
下載私鑰

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>fujinliang.top</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css" />
    <style>
        .account {
            margin-top: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="nav nav-pills">
            <li class="nav-item">
            <a class="nav-link active" href="#">新增賬戶</a>
            </li>
        </ul>
        <div id="create" class="account">
            <p style="font-size: 30px">新建一個賬戶</p>
            <p>輸入密碼</p>
            <div style="padding: 50px 100px">
                <input type="text" class="form-control" id="pwd" placeholder="輸入密碼" />
            </div>
            <button type="button" class="btn btn-primary" onclick="createAccount()">建立賬戶</button>
        </div>

        <div id="download" class="account" style="display: none" >
            <p style="font-size: 30px">儲存你的<span style="color: red">Keystore</span> 檔案</p>
            <a id="downloadUrl" class="btn btn-success" href="#" role="button">下載 Keystore 檔案 (UTC / JSON)</a>
            <div style="margin-top:100px">
                <button onclick="showKey()" type="button" class="btn btn-primary">下一步</button>
            </div>
        </div>

        <div id="privateKey" class="account" style="display: none">
            <p style="font-size: 30px">儲存你的<span style="color: red">私鑰</span></p>
            <textarea class="form-control" id="prikey" rows="3" disabled></textarea>
        </div>
      </div>
</body>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
    function createAccount(){

        var pwd = $("#pwd").val()
        if (pwd == "") {
            alert("密碼不能為空！");
            return
        }

        $.post("/account/create","pwd="+pwd, function(result){
            alert(result.data)
            if (result.code == 0) {
                $("#create").hide()
                $("#download").show()
                $("#downloadUrl").attr("href", result.data.keystore)
                alert(result.data.privateKey)
                $("#prikey").html(result.data.privateKey)
            }
        })
    }

    function showKey(){
        $("#download").hide()
        $("#privateKey").show()
    }
</script>
</html>

演示效果

啟動私鏈網路

使用 geth 啟動私有網路

$ geth --datadir ~/privatechain/data0 --networkid 110  --rpc console

啟動專案

$ cd myWallet
$ node index.js

原始碼下載

關注公眾號

004 以太坊錢包開發-建立使用者

安裝模板引擎 $ cd myWallet # 安裝koa模板使用中介軟體 $ npm install --save koa-views # 安裝ejs模板引擎 $ npm install --save ejs 引入模版引擎修改 myWalle

用Solidity語言通過以太坊錢包開發hello world示例

以太坊以太坊錢包開發 ethereum truffle solidity 以太坊入門區塊鏈入門區塊鏈區塊鏈開發 blockchain 使用以太坊錢包開發實現經典的HelloWord智能合約類。本文中，我們將看到如何編寫簡單的合約並將其部署到區塊鏈上

以太坊錢包開發系列1 - 建立錢包賬號

以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：建立錢包賬號、賬號Keystore檔案匯入匯出、展示錢包資訊及發起簽名交易、傳送Token(代幣），這是第一篇，主要介紹錢包將實現哪些功能及怎麼建立錢包賬號，本錢包是基於ethers.js 進行開

以太坊錢包開發系列2 - 賬號Keystore檔案匯入匯出

以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：建立錢包賬號、賬號Keystore檔案匯入匯出、展示錢包資訊及發起簽名交易、傳送Token(代幣），這是第二篇，主要介紹錢包賬號匯出與匯入，將對Keystore檔案的生成的原理進行介紹。如何匯

以太坊錢包開發系列2 - 賬號Keystore文件導入導出

functions 流程 coin bmi tool 深入註意 var memory 以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：創建錢包賬號、賬號Keystore文件導入導出、展示錢包信息及發起簽名交

以太坊錢包開發系列3 - 展示錢包資訊及發起簽名交易

以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：建立錢包賬號、賬號Keystore檔案匯入匯出、展示錢包資訊及發起簽名交易、傳送Token(代幣），這是第三篇介紹使用ethers.js的錢包物件獲取相關資訊及發起你離線交易。使用 Provi

以太坊錢包開發系列4 - 傳送Token(代幣）

以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：建立錢包賬號、賬號Keystore檔案匯入匯出、展示錢包資訊及發起簽名交易、傳送Token(代幣），本文是第四篇，Token（代幣、通證）是以太坊的一大特色，既然開發錢包，則傳送Token 功能必

以太坊錢包開發系列4 - 發送Token(代幣）

表示 oval create 方法 2個哈哈 src lba ring 以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：創建錢包賬號、賬號Keystore文件導入導出、展示錢包信息及發起簽名交易、發送Tok

以太坊錢包開發

目前的公鏈專案，影響力最大的應該就數以太坊和比特幣了，其他的多數公鏈，基本上都是借鑑了以太坊和比特幣公鏈專案而設計開發的。瞭解區塊鏈的人都知道，比特幣和以太坊這兩個公鏈專案的差距還是挺大的，故而他們的錢包開發也是特別不一樣的。本章我們將詳細講解以太坊錢包原理和開發流程，涉及到的內容有以下

【以太坊錢包開發二】MyEtherWallet 錢包介紹

以太坊常見錢包包括：Ethereum Wallet、MyEtherWallet、MetaMask、Parity。咱們的錢包開發專案主要圍繞MyEtherWallet錢包的相關功能進行開發，因此下面主要介紹MyEtherWallet的常用功能。 MyEtherWallet 是一個輕錢包，使用起來最簡單，無需下