摘要：上一篇用以太坊區(qū)塊鏈保證的安全上我們介紹了基本的解決方案，這一篇我們重點(diǎn)來(lái)看客戶端。是以太坊的實(shí)現(xiàn)。以太坊，主要是針對(duì)工程師使用進(jìn)行區(qū)塊鏈以太坊開(kāi)發(fā)的詳解。這里是原文以太坊區(qū)塊鏈的安全設(shè)計(jì)

上一篇用以太坊區(qū)塊鏈保證Asp.Net Core的API安全（上）我們介紹了基本的解決方案，這一篇我們重點(diǎn)來(lái)看客戶端。

正如我們所說(shuō)，我們的DApp是一個(gè)簡(jiǎn)單的HTML/ES6客戶端。我們將在Asp.Net Core 2之上構(gòu)建客戶端，以利用IIS Express和Visual Studio IDE。因此，Startup.cs類(lèi)中的Configure方法將是：

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

app.UseDefaultFiles();
app.UseStaticFiles();

使DApp成為NPM項(xiàng)目并安裝必備條件以使用ES6 Javascript標(biāo)準(zhǔn)。這不是強(qiáng)制性的，可以使用自己的堆棧構(gòu)建DApp。

從項(xiàng)目文件夾運(yùn)行Powershell并運(yùn)行以下NPM命令：

npm init
npm install webpack
npm install babel-core babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
npm install babel-polyfill --save
npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save-dev

要配置webpack/babel，請(qǐng)使用以下配置創(chuàng)建webpack.config.js文件：

var path = require("path");

module.exports = {
    entry: [
        "babel-polyfill",
        "./src/main"
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, "/wwwroot/js/"),
        filename: "main.build.js"
    }
};

我們已設(shè)定webpack將src/main.js文件構(gòu)建到/www/js/main.build.js。

安裝以太坊擴(kuò)展包：

npm install web3
npm install ethereumjs-util

Web3是一個(gè)javascript封裝包，它簡(jiǎn)化了針對(duì)以太坊區(qū)塊鏈的JSON RPC調(diào)用。Ethereumjs-util提供了一些以太坊特定的實(shí)用程序。讓我們構(gòu)建一個(gè)非常簡(jiǎn)單的HTML頁(yè)面。我們需要一個(gè)登錄按鈕和另一個(gè)按鈕來(lái)從我們的API層加載一些安全數(shù)據(jù)：

    
    


    
Ethereum Jwt Client
    

        Your account:  
        Login
    
    

        Request secured data
        


        
    
    

DApp邏輯將駐留在src/main.js文件中，正如我們?cè)?b>webpack.config.js文件中指定的那樣。src/main.js文件將是：

let ethUtil = require("ethereumjs-util");
let Web3 = require("web3");

let coinbase = null;
let accessToken = null;

let init = () => {
    if (typeof web3 !== "undefined") {
        web3 = new Web3(web3.currentProvider);
        web3.eth.getCoinbase(function (err, account) {
            if (err === null && ethUtil.isValidAddress(account)) {
                coinbase = account;
                eth_account_span.innerHTML = coinbase;
            } else {
                eth_account_span.innerHTML = "Please unlock your account and refresh the page";
                console.error(err);
            }
        });

    } else {
        eth_account_span.innerHTML = "Please install or unlock Metamask browser plugin or navigate this page with Mist or another web3 browser";
    }
};

let request = obj => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(obj.method || "GET", obj.url);
        if (obj.headers) {
            Object.keys(obj.headers).forEach(key => {
                xhr.setRequestHeader(key, obj.headers[key]);
            });
        }
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send(obj.body);
    });
};

login_btn.addEventListener("click", (e) => {
    e.preventDefault();

    login_btn.setAttribute("disabled", "disabled");
    login_btn.innerHTML = "Please sign the message";

    let plain = "Hi, you request a login from client to Eth Jwt Api. Please sign this message. This is not a transaction, is completely free and 100% secure. We"ll use your signature to prove your ownership over your private key server side.";
    let msg = ethUtil.bufferToHex(new Buffer(plain, "utf8"));
    let hash = ethUtil.bufferToHex(ethUtil.keccak256("x19Ethereum Signed Message:
" + plain.length + plain));
    let from = coinbase;

    let params = [msg, from];
    let method = "personal_sign";

    web3.currentProvider.sendAsync({
        method,
        params,
        from,
    }, function (err, result) {
        if (err || result.error) {
            login_btn.removeAttribute("disabled");
            login_btn.innerHTML = "Login";

            console.error(err);
            return console.error(result.error);
        }
        console.log({
            "signature": result.result,
            "msg": msg,
            "hash": hash
        });

        login_btn.innerHTML = "Requesting token...";
        let loginData = {};
        loginData.signer = from;
        loginData.signature = result.result;
        loginData.message = msg;
        loginData.hash = hash;

        request({
            url: "http://localhost:49443/api/token",
            body: JSON.stringify(loginData),
            method: "post",
            headers: {
                "Authorization": "Bearer " + accessToken,
                "Content-type": "application/json"
            }
        }).then(data => {
            var json = JSON.parse(data);
            accessToken = json.token;
            console.log("access token: " + accessToken);

            login_btn.removeAttribute("disabled");
            login_btn.innerHTML = "Login";
        }).catch(error => {
            console.error(error);

            login_btn.removeAttribute("disabled");
            login_btn.innerHTML = "Login";
        });
    });
});

load_data_btn.addEventListener("click", (e) => {
    e.preventDefault();

    request({
        url: "http://localhost:49443/api/values",
        headers: {
            "Authorization": "Bearer " + accessToken
        }
    }).then(data => {
        var json = JSON.parse(data);
        for (let i = 0; i < json.length; i++) {
            data_list.innerHTML += "
" + json[i] + "
";
        }
    }).catch(error => {
        console.error(err);
    });

});

window.addEventListener("load", init);

1.coinbase和accessToken是全局變量，分別存儲(chǔ)用戶以太坊帳戶和JWT token。

2.init函數(shù)從Metamask提供的提供程序初始化web3對(duì)象，然后它嘗試檢索用戶的帳戶（coinbase）。這需要解鎖在Metamask中簽名的帳戶。

3.require函數(shù)只是hxr對(duì)象的封裝，可以輕松地向API層調(diào)用ajax。

4.load_data_btn單擊處理程序?qū)PI層安全端點(diǎn)進(jìn)行ajax調(diào)用。這需要有效的accessToken才能工作，否則，API層將響應(yīng)401 HTTP響應(yīng)。

5.login_btn單擊是一個(gè)兩步功能。首先，它要求用戶簽署任意消息。簽名后，它會(huì)將帳戶，簽名，明文消息和帶前綴的哈希發(fā)送到令牌端點(diǎn)。

請(qǐng)注意，web3.personal.sign將十六進(jìn)制格式（0x ...）的普通字符串的字節(jié)數(shù)組作為輸入。

正如我們所說(shuō)的，服務(wù)器端，我們將使用兩種不同的方式從簽名中恢復(fù)公鑰：在一個(gè)中我們將使用JSON RPC 接口中的web3.personal.ecrecover（web3.personal.sign對(duì)應(yīng)）;在另一個(gè)中，我們將使用底層的ecrecover離線功能。根據(jù)文檔，web3.personal.sign使用底層簽名函數(shù)來(lái)簽署hash和前綴消息，因此，為了使用底層ecrecover對(duì)應(yīng)，我們還需要計(jì)算并將此hash發(fā)送到令牌端點(diǎn)。

運(yùn)行兩個(gè)應(yīng)用程序并使用安裝了Metamask插件的瀏覽器導(dǎo)航到客戶端。請(qǐng)記住，為了將src/main.js文件構(gòu)建到js/main.build.js，你需要從Powershell運(yùn)行webpac命令。如果一切正常，客戶端將檢索coinbase，你將在頁(yè)面上看到你的帳戶：

如果你現(xiàn)在單擊“請(qǐng)求數(shù)據(jù)”按鈕，將獲得HTTP響應(yīng)401。如果單擊“登錄”按鈕，Metamask將提示你簽名：

簽名后，處理程序?qū)?duì)令牌端點(diǎn)進(jìn)行ajax調(diào)用。在此階段，身份驗(yàn)證方法不會(huì)檢查任何簽名，因此端點(diǎn)將始終發(fā)出JWT令牌。一旦收到JWT令牌，客戶端就能通過(guò)ajax調(diào)用安全端點(diǎn)。如果現(xiàn)在單擊“請(qǐng)求數(shù)據(jù)”按鈕，將收到HTTP響應(yīng)200和數(shù)據(jù)負(fù)載：

到目前為止，EthereumJwtApi是一個(gè)簡(jiǎn)單的JWT Asp.Net核心示例，因?yàn)樗惶峁┤魏斡行У纳矸蒡?yàn)證方法。

TokenController的關(guān)鍵部分是兩個(gè)Authenticate方法及其從簽名中檢索以太坊帳戶的能力。為此，你需要安裝Nethereum.Web3 NuGet包。Nethereum是以太坊的.Net實(shí)現(xiàn)。

Authenticate方法只是對(duì)web3.personal.ecrecover函數(shù)進(jìn)行JSON RPC調(diào)用：

private async Task Authenticate(LoginVM login)
{
    UserVM user = null;

    var client = new RpcClient(new Uri(_config["Nethereum:Geth"])); // Require the RPC endpoint of a Geth node as input eg: http://127.0.0.1:8545
    var signer = await client.SendRequestAsync(new RpcRequest(1, "personal_ecRecover", login.Message, login.Signature));

    if (signer.ToLower().Equals(login.Signer.ToLower()))
    {
        // read user from DB or create a new one
        // for now we fake a new user
        user = new UserVM { Account = signer, Name = string.Empty, Email = string.Empty };
    }

    return user;
}

PRO：

web3.personal.sign是web3.personal.sign的對(duì)應(yīng)部分，因此你無(wú)需擔(dān)心其底層實(shí)現(xiàn)。

缺點(diǎn)：

需要你自己的Geth節(jié)點(diǎn)。不支持Parity，Infura不允許JSON RPC調(diào)用web3.personal.*。Authenticate2方法顯示了另一種方法，它使用底層ecrecover功能的離線實(shí)現(xiàn)：

private async Task Authenticate2(LoginVM login)
{
    UserVM user = null;

    var signer = new Nethereum.Signer.MessageSigner();
    var account = signer.EcRecover(login.Hash.HexToByteArray(), login.Signature);

    if (account.ToLower().Equals(login.Signer.ToLower()))
    {
        // read user from DB or create a new one
        // for now we fake a new user
        user = new UserVM { Account = account, Name = string.Empty, Email = string.Empty };
    }

    return user;
}

PRO：

不需要JSON RPC調(diào)用就能工作。MessageSigner.EcRecover是Nethereum提供的離線功能。

缺點(diǎn)：

你需要處理web3.personal.sign實(shí)現(xiàn)才能正確恢復(fù)帳戶。出于這個(gè)原因，在客戶端，我們相應(yīng)地計(jì)算了前綴消息哈希。

現(xiàn)在你擁有基本的知識(shí)和一個(gè)項(xiàng)目的骨架，可以使用以太坊保護(hù)你的Asp.Net Core 2 API。只需幾點(diǎn)說(shuō)明：

web3 1.0.0處于測(cè)試階段，web3.personal.sign實(shí)現(xiàn)可能會(huì)隨著時(shí)間的推移而變化。請(qǐng)務(wù)必在你可以維護(hù)的代碼庫(kù)上使用這種身份驗(yàn)證方法。也許Infura某天決定允許web3.personal.ecrecover :-)

======================================================================

分享一些以太坊、EOS、比特幣等區(qū)塊鏈相關(guān)的交互式在線編程實(shí)戰(zhàn)教程：

java以太坊開(kāi)發(fā)教程，主要是針對(duì)java和android程序員進(jìn)行區(qū)塊鏈以太坊開(kāi)發(fā)的web3j詳解。

python以太坊，主要是針對(duì)python工程師使用web3.py進(jìn)行區(qū)塊鏈以太坊開(kāi)發(fā)的詳解。

php以太坊，主要是介紹使用php進(jìn)行智能合約開(kāi)發(fā)交互，進(jìn)行賬號(hào)創(chuàng)建、交易、轉(zhuǎn)賬、代幣開(kāi)發(fā)以及過(guò)濾器和交易等內(nèi)容。

以太坊入門(mén)教程，主要介紹智能合約與dapp應(yīng)用開(kāi)發(fā)，適合入門(mén)。

以太坊開(kāi)發(fā)進(jìn)階教程，主要是介紹使用node.js、mongodb、區(qū)塊鏈、ipfs實(shí)現(xiàn)去中心化電商DApp實(shí)戰(zhàn)，適合進(jìn)階。

C#以太坊，主要講解如何使用C#開(kāi)發(fā)基于.Net的以太坊應(yīng)用，包括賬戶管理、狀態(tài)與交易、智能合約開(kāi)發(fā)與交互、過(guò)濾器和交易等。

EOS教程，本課程幫助你快速入門(mén)EOS區(qū)塊鏈去中心化應(yīng)用的開(kāi)發(fā)，內(nèi)容涵蓋EOS工具鏈、賬戶與錢(qián)包、發(fā)行代幣、智能合約開(kāi)發(fā)與部署、使用代碼與智能合約交互等核心知識(shí)點(diǎn)，最后綜合運(yùn)用各知識(shí)點(diǎn)完成一個(gè)便簽DApp的開(kāi)發(fā)。

java比特幣開(kāi)發(fā)教程，本課程面向初學(xué)者，內(nèi)容即涵蓋比特幣的核心概念，例如區(qū)塊鏈存儲(chǔ)、去中心化共識(shí)機(jī)制、密鑰與腳本、交易與UTXO等，同時(shí)也詳細(xì)講解如何在Java代碼中集成比特幣支持功能，例如創(chuàng)建地址、管理錢(qián)包、構(gòu)造裸交易等，是Java工程師不可多得的比特幣開(kāi)發(fā)學(xué)習(xí)課程。

php比特幣開(kāi)發(fā)教程，本課程面向初學(xué)者，內(nèi)容即涵蓋比特幣的核心概念，例如區(qū)塊鏈存儲(chǔ)、去中心化共識(shí)機(jī)制、密鑰與腳本、交易與UTXO等，同時(shí)也詳細(xì)講解如何在Php代碼中集成比特幣支持功能，例如創(chuàng)建地址、管理錢(qián)包、構(gòu)造裸交易等，是Php工程師不可多得的比特幣開(kāi)發(fā)學(xué)習(xí)課程。

這里是原文以太坊區(qū)塊鏈Asp.Net Core的安全API設(shè)計(jì)