我在ConsenSys為各種客戶構建了大量的概念證明，通常他們想要利用以太坊區塊鏈來解決某些業務用例。奇怪的是，這些系統通常設計有標準的網絡登錄（即用戶名和密碼）。我總是問自己為什么我還在這樣做設計，畢竟，這是今天以太網目前可以解決每個煩人的Web應用程序的一個方面。所以我決定停下腳步，設計一下這個解決方案。

JSON Web token

登錄標準Web系統（和/或使用其API）的一種非常流行的方法是將密碼（經過哈希的客戶端）提交給認證端點并接收token作為回報。這通常稱為JSON Web Token，通常在一段有限的時間內（幾分鐘到幾天）有效。這是一個關于標準實現的很好的教程。

JSON Web Token很好，我開始認為在區塊鏈上驗證自己很容易。事實上，當你使用以太坊時，你需要不斷地去改進。

如果你將以太網地址（這只是公鑰的sha3哈希）視為網站上的帳戶，則可以通過使用私鑰對一段數據進行簽名來證明你擁有該帳戶，這非常容易。此數據是任意的，可以是網站API提供的任意隨機字符串。因此，我們可以使用地址作為用戶名并繞過密碼的需要。事實上，我們甚至不需要使用區塊鏈來做到這一點。

這是使用Express的樣子：

首先，我們需要使用私鑰進行橢圓曲線簽名：

var ethUtil = require(‘ethereumjs-util’); // >=5.1.1 var data = ‘i am a string’; // Elliptic curve signature must be done on the Keccak256 Sha3 hash of a piece of data. var message = ethUtil.toBuffer(data); var msgHash = ethUtil.hashPersonalMessage(message); var sig = ethUtil.ecsign(msgHash, privateKey); var serialized = ethUtil.bufferToHex(this.concatSig(sig.v, sig.r, sig.s)) return serialized

不要過分擔心這些參數是什么。這里有一些密碼學，我鼓勵你閱讀橢圓曲線簽名。比特幣維基是一個不錯的起點。

無論如何，一旦我們有了簽名組件，我們就可以將它們與用戶的地址一起打包并將其全部發送到認證端點。

POST/Authenticate

var jwt = require(‘jsonwebtoken’); var ethUtil = require('ethereumjs-util'); function checkSig(req, res) {var sig = req.sig;var owner = req.owner;// Same data as beforevar data = ‘i am a string’;var message = ethUtil.toBuffer(data)var msgHash = ethUtil.hashPersonalMessage(message)// Get the address of whoever signed this message var signature = ethUtil.toBuffer(sig)var sigParams = ethUtil.fromRpcSig(signature)var publicKey = ethUtil.ecrecover(msgHash, sigParams.v, sigParams.r, sigParams.s)var sender = ethUtil.publicToAddress(publicKey)var addr = ethUtil.bufferToHex(sender)// Determine if it is the same address as 'owner' var match = false;if (addr == owner) { match = true; }if (match) {// If the signature matches the owner supplied, create a// JSON web token for the owner that expires in 24 hours.var token = jwt.sign({user: req.body.addr}, ‘i am another string’, { expiresIn: “1d” });res.send(200, { success: 1, token: token })} else {// If the signature doesn’t match, error outres.send(500, { err: ‘Signature did not match.’});} }

所以基本上，給定一些數據，一個地址和一個EC簽名的組件，我們可以安全的證明該地址屬于簽署數據的人。很酷，對吧？

一旦我們對簽名和地址匹配感到滿意，我們就可以為該地址服務器端簽署一個JSON Web token。 在這種情況下，token有效期為1天。

現在我們只需要放入一些中間件來保護任何服務或修改受保護信息的路由。

middleware/auth.js

function auth(req, res, next) {jwt.verify(req.body.token, ‘i am another string’, function(err, decoded) {if (err) { res.send(500, { error: ‘Failed to authenticate token.’}); }else {req.user = decoded.user;next();};}); }

app.js

// Routes app.post(‘/UpdateData’, auth, Routes.UpdateData); …

如果提供的Token對應于發送請求的用戶，我們將繼續請求路由。請注意，中間件會修改請求。我們需要引用這個新的user參數，因為我們知道它已經在我們的中間件中設置了。

POST/UpdateData

function UpdateData(req, res) {// Only use the user that was set in req by auth middleware!var user = req.user;updateYourData(user, req.body.data);... }

我們終于搞定它了！ 你的用戶已經完全登錄，但不需要密碼。

UI方面

用戶如何在瀏覽器中實際簽署此數據？Metamask會提供幫助！Metamask是一個整潔的chrome擴展，它將web3注入你的瀏覽器窗口。

mycomponent.jsx

makeSig(dispatch) {function toHex(s) {var hex = ‘’;for(var i=0;i<s.length;i++) { hex += ‘’+s.charCodeAt(i).toString(16); }return `0x${hex}`;}var data = toHex(‘i am a string’);web3.currentProvider.sendAsync({ id: 1, method: 'personal_sign', params: [web3.eth.accounts[0], data] },function(err, result) {let sig = result.result;dispatch(exchange.authenticate(sig, user))})} } render(){let { dispatch, _main: { sig } } = this.props;if (Object.keys(sig).length == 0) { this.makeSig(dispatch); }return (<p>I am a webpage</p>); }

這將觸發Metamask彈出一個窗口，要求用戶對消息進行簽名：

一旦調用了回調，它將調用以下操作：

authenticate(sig, user) {return (dispatch) => {fetch(`${this.api}/Authenticate`, {method: 'POST',body: JSON.stringify({ owner: user, sig: sig}),headers: { "Content-Type": "application/json" }}).then((res) => { return res.text(); }).then((body) => {var token = JSON.parse(body).token;dispatch({ type: 'SET_AUTH_TOKEN', result: token})})} }

一旦你在reducer中保存了auth token，你就可以調用經過身份驗證的端點。我們終于得到它了！

請注意，必須從簽名中恢復v，r和s值。Metamask有一個簽名util模塊，用于顯示簽名的構造方式。它可以像這樣解構：

var solidity_sha3 = require('solidity-sha3').default; let hash = solidity_sha3(data); let sig = result.result.substr(2, result.result.length); let r = sig.substr(0, 64); let s = sig.substr(64, 64); let v = parseInt(sig.substr(128, 2));

其中r將被解析為0或1.另請注意，這使用solidity-sha3模塊來確保此哈希算法與用作solidity本機hash方法的哈希算法相同（我們正在hash之前簽名的十六進制字符串））。

生產準備

我無法強調使用JSON Web token的每個Web應用程序今天都可以輕松利用這一點。具有Metamask擴展的任何用戶都可以簡單地繞過登錄屏幕，其安全性可能比目前用于管理登錄的任何內容都要好。這意味著更少的忘記密碼，更少的浪費時間和更快樂的用戶群。

而且，你知道，如果你希望你的用戶在沒有中間人的情況下向對方（或你或使用此用戶的任何其他系統上的用戶）付款，或者如果你想要利用以太坊的其他百萬其他功能，那么你需要也這樣做。

今天開始，加入我們以太坊，去征服世界。

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

分享一些以太坊、EOS、比特幣等區塊鏈相關的交互式在線編程實戰教程：

• java以太坊開發教程，主要是針對java和android程序員進行區塊鏈以太坊開發的web3j詳解。
• python以太坊，主要是針對python工程師使用web3.py進行區塊鏈以太坊開發的詳解。
• php以太坊，主要是介紹使用php進行智能合約開發交互，進行賬號創建、交易、轉賬、代幣開發以及過濾器和交易等內容。
• 以太坊入門教程，主要介紹智能合約與dapp應用開發，適合入門。
• 以太坊開發進階教程，主要是介紹使用node.js、mongodb、區塊鏈、ipfs實現去中心化電商DApp實戰，適合進階。
• C#以太坊，主要講解如何使用C#開發基于.Net的以太坊應用，包括賬戶管理、狀態與交易、智能合約開發與交互、過濾器和交易等。
• EOS教程，本課程幫助你快速入門EOS區塊鏈去中心化應用的開發，內容涵蓋EOS工具鏈、賬戶與錢包、發行代幣、智能合約開發與部署、使用代碼與智能合約交互等核心知識點，最后綜合運用各知識點完成一個便簽DApp的開發。
• java比特幣開發教程，本課程面向初學者，內容即涵蓋比特幣的核心概念，例如區塊鏈存儲、去中心化共識機制、密鑰與腳本、交易與UTXO等，同時也詳細講解如何在Java代碼中集成比特幣支持功能，例如創建地址、管理錢包、構造裸交易等，是Java工程師不可多得的比特幣開發學習課程。
• php比特幣開發教程，本課程面向初學者，內容即涵蓋比特幣的核心概念，例如區塊鏈存儲、去中心化共識機制、密鑰與腳本、交易與UTXO等，同時也詳細講解如何在Php代碼中集成比特幣支持功能，例如創建地址、管理錢包、構造裸交易等，是Php工程師不可多得的比特幣開發學習課程。
• tendermint區塊鏈開發詳解，本課程適合希望使用tendermint進行區塊鏈開發的工程師，課程內容即包括tendermint應用開發模型中的核心概念，例如ABCI接口、默克爾樹、多版本狀態庫等，也包括代幣發行等豐富的實操代碼，是go語言工程師快速入門區塊鏈開發的最佳選擇。

匯智網原創翻譯，轉載請標明出處。這里是原文不要再在以太坊和Metamask開發web時使用密碼

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的以太坊和Metamask开发web应用时不再需要密码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。