当我们的用户厌倦了传统的电子邮件/密码注册流程时，他们会选择Google、GitHub等社交登录方式，这种方式虽然节约了用户的时间，但登录信息也会被第三方平台记录，也就是说我们用平台账号做了什么，平台都会一目了然，甚至还会对我们的行为进行分析、画像。那么有没有一种登录方式，它的所有信息都只保存在客户端和后端，并不牵扯三方平台授权，最大化的保证用户隐私呢？Web3.0给我们提供了一种选择：MetaMask。9 z/ M5 l5 S- X2 n( }* C
MetaMask% ^2 J2 A* j7 N" h( E/ {; r$ N
MetaMask是用于与以太坊区块链进行交互的软件加密货币钱包。MetaMask允许用户通过浏览器插件或移动应用程序访问其以太坊钱包，然后可以使用这些扩展程序与去中心化应用程序进行交互。当然了，首先需要拥有一个MetaMask钱包，进入https://chrome.google.com/websto ... oehlefnkodbefgpgknn
* t, |# a- B$ x7 ]/ i
安装metamask浏览器插件：
4 r/ ~+ V( ~/ V' d. }4 C% i
随后点开插件，创建账号，记录密码、钱包地址、以及助记词等信息。
& U0 k/ v. v v! `) S# M
安装好插件之后，我们就可以利用这个插件和网站应用做交互了。, T) r! z1 @* X9 S5 a% e
# X1 }2 }7 q; `0 p4 h Z0 y- P, f
钱包登录流程
登录逻辑和传统的三方登录还是有差异的，传统三方登录一般是首先跳转三方平台进行授权操作，随后三方平台将code验证码返回给登录平台，登录平台再使用code请求三方平台换取token，再通过token请求用户账号信息，而钱包登录则是先在前端通过Web3.js浏览器插件中保存的私钥对钱包地址进行签名操作，随后将签名和钱包地址发送到后端，后端利用Web3的库用同样的算法进行验签操作，如果验签通过，则将钱包信息存入token，并且返回给前端。
6 f2 d5 B3 ]! p" I- {2 d2 P
$ S$ i& O5 @( ^) C H
; d! `1 l7 _* i) e& Q5 | k
前端签名操作4 s) P* \) a1 D; j0 | N/ y
首先需要下载前端的Web3.0操作库，https://docs.ethers.io/v4/，随后集成到登录页面中：# i* D9 G U7 ~( D! w4 Q$ c6 u
1 K" }' R# ]8 {% V
- <script src="{{ static_url("js/ethers-v4.min.js") }}"></script>9 z, _; Y- {! G2 y, [
- <script src="{{ static_url("js/axios.js") }}"></script>6 ^6 \& M; _0 ~2 l" G0 N
- <script src="{{ static_url("js/vue.js") }}"></script>
这里我们基于Vue.js配合Axios使用。
' O" S3 z! F+ }" e% ]
接着声明登录激活方法：
- sign_w3:function(){
- 8 `" c& u% m5 Z7 w* z# \+ T `5 S5 A
- that = this;% k6 Z2 a4 e9 K: W' r8 A! Z
- ethereum.enable().then(function () {. ~& d6 q$ M: n8 A. s# J
- 6 {, _' m2 I9 E: l0 @* P, Q
- this.provider = new ethers.providers.Web3Provider(web3.currentProvider);, s0 I4 H, V( l( n( I- I% n, t. H& i" I
- this.provider.getNetwork().then(function (result) {. U1 X/ N( g. u
- if (result['chainId'] != 1) {! w5 R) g% g' l& p- T* S
- ) H( X, h( D; u
- console.log("Switch to Mainnet!")5 P6 F; V8 I7 D l7 k
- } else { // okay, confirmed we're on mainnet
- : M4 R" k$ d' y s6 N
- this.provider.listAccounts().then(function (result) {
- console.log(result);
- this.accountAddress = result[0]; // figure out the user's Eth address# ~, A Z: ^* |4 _2 ^- A
- this.provider.getBalance(String(result[0])).then(function (balance) {% Z; }, Z- g, {/ }" m" Z D- `
- var myBalance = (balance / ethers.constants.WeiPerEther).toFixed(4);+ U8 n6 R+ u5 U8 r
- console.log("Your Balance: " + myBalance);# k! c u, G) i7 P" g
- });
- // get a signer object so we can do things that need signing6 B q4 K$ N6 s. o, K* E% c
- this.signer = provider.getSigner();5 H7 X( b1 b" n. C0 a2 E
- + |+ m" c4 L0 E% Z) y
- var rightnow = (Date.now()/1000).toFixed(0)% U2 r/ C( e- Q* ?
- var sortanow = rightnow-(rightnow%600)! ]2 n H1 ^6 p6 c3 B0 u7 y1 D
- $ j/ I& P* S9 ~) ~
- this.signer.signMessage("Signing in to "+document.domain+" at "+sortanow, accountAddress, "test password!")
- .then((signature) => { that.handleAuth(accountAddress,signature);7 H# e$ X, a) N
- });0 t& ^ H. n2 R$ P& u# S
- 1 `6 b( b9 D/ r* }' _4 Z- c i9 c
- console.log(this.signer);
- })
- }
- })- J( `6 A1 g0 G6 F' M6 {: F8 |
- })
- },
- //检查验证! A* Y# }# F& d& a
- handleAuth:function(accountAddress, signature){1 a. a/ k2 ~4 t. E# o5 R
- . E% ^+ Q4 q/ [' _. \# f
- this.myaxios("/checkw3/","post",{"public_address":accountAddress,"signature":signature}).then(data =>{% n5 @* q" F7 N4 i5 W/ t6 b: B
- % h! N" N, c' m5 A" R; g) N; x6 X4 H
- if(data.errcode==0){
- alert("欢迎:"+data.public_address);
- localStorage.setItem("token",data.token);
- localStorage.setItem("email",data.public_address);
- window.location.href = "/";+ \+ B4 L% M/ x T B+ O8 T1 A
- }else{! m+ v) ?+ Y4 D! n
- alert("验证失败");+ {9 r2 o$ g& r- W
- }
- });
- 8 H; G# r* f2 _5 x& K6 q, f
- }
- v) A4 R; f' @
随后创建异步视图方法：! g9 m F1 w- s$ d/ b
- from tornado.web import url( q" v- I1 u3 r) \% n* \7 j
- import tornado.web, p! u- N$ @- Y) y# S) P
- from tornado import httpclient4 K ~5 m5 s! R! ~7 g9 O! O
- from .base import BaseHandler
- from web3.auto import w3
- from eth_account.messages import defunct_hash_message
- import time
- & C C# `, Z! r7 E9 K; T3 m+ @
- class CheckW3(BaseHandler):
- N3 `& W! X( Y. R# l0 N
- async def post(self):
- public_address = self.get_argument("public_address")& S% e( U" U% x& p5 g. m
- signature = self.get_argument("signature")- n7 B) ~$ P( B# F, b$ v
- 2 F9 U% j1 \* n; Y
- domain = self.request.host; l, c& o2 F5 }/ ]2 E
- if ":" in domain:
- domain = domain[0:domain.index(":")]1 S2 S) i' }8 Y: g1 k/ S
- now = int(time.time())# ]3 T& \: Z0 _3 H' F. E/ ^! V
- sortanow = now-now%600
-
- original_message = 'Signing in to {} at {}'.format(domain,sortanow)! u: i1 i3 a4 Z
- print("[+] checking: "+original_message)! K. t U" {/ P* j
- message_hash = defunct_hash_message(text=original_message): e3 t5 ]; P$ u A- ?+ B2 x
- signer = w3.eth.account.recoverHash(message_hash, signature=signature)
- if signer == public_address:; U% a( ]. e' V
- try:
- user = await self.application.objects.get(User,email=public_address), k+ c* f, x* ?' x/ h
- except Exception as e:/ o1 k/ Z( W! b! d5 v2 \
- user = await self.application.objects.create(User,email=public_address,password=create_password("third"),role=1)
- myjwt = MyJwt()1 v; L8 H$ H2 K, z2 j$ J* U
- token = myjwt.encode({"id":user.id})
- self.finish({"msg":"ok","errcode":0,"public_address":public_address,"token":token})
- else:
- self.finish({"msg":"could not authenticate signature","errcode":1})
这里通过recoverHash方法对签名进行反编译操作，如果反编译后的钱包地址和前端传过来的钱包地址吻合，那么说明当前账户的身份验证通过：
当验签通过之后，利用钱包地址在后台创建账号，随后将钱包地址、token等信息返回给前端，前端将其保存在stroage中即可。
) E9 ?6 ~6 a0 X/ x: _
结语4 \0 }: Y% P# j$ {7 H c
没错，将至已至，未来已来，是时候将Web3.0区块链技术融入产品了，虽然有些固有的思维方式依然在人们的脑海挥之不去，但世界却在时不我待地变化着，正是：青山遮不住，毕竟东流去！项目开源在https://github.com/zcxey2911/Tornado6_Vuejs3_Edu
