当我们的用户厌倦了传统的电子邮件/密码注册流程时,他们会选择Google、GitHub等社交登录方式,这种方式虽然节约了用户的时间,但登录信息也会被第三方平台记录,也就是说我们用平台账号做了什么,平台都会一目了然,甚至还会对我们的行为进行分析、画像。那么有没有一种登录方式,它的所有信息都只保存在客户端和后端,并不牵扯三方平台授权,最大化的保证用户隐私呢?Web3.0给我们提供了一种选择:MetaMask。
MetaMask1 G- D+ X) P: j3 L( W
MetaMask是用于与以太坊区块链进行交互的软件加密货币钱包。MetaMask允许用户通过浏览器插件或移动应用程序访问其以太坊钱包,然后可以使用这些扩展程序与去中心化应用程序进行交互。当然了,首先需要拥有一个MetaMask钱包,进入https://chrome.google.com/websto ... oehlefnkodbefgpgknn ; K; E/ {( H- j
安装metamask浏览器插件:
; y1 [, G. p- U% g
随后点开插件,创建账号,记录密码、钱包地址、以及助记词等信息。
, ?9 P+ E& m; d6 D' L
安装好插件之后,我们就可以利用这个插件和网站应用做交互了。
钱包登录流程
登录逻辑和传统的三方登录还是有差异的,传统三方登录一般是首先跳转三方平台进行授权操作,随后三方平台将code验证码返回给登录平台,登录平台再使用code请求三方平台换取token,再通过token请求用户账号信息,而钱包登录则是先在前端通过Web3.js浏览器插件中保存的私钥对钱包地址进行签名操作,随后将签名和钱包地址发送到后端,后端利用Web3的库用同样的算法进行验签操作,如果验签通过,则将钱包信息存入token,并且返回给前端。
! @# _0 \7 r; m
# Y# j8 m: t& A
前端签名操作
首先需要下载前端的Web3.0操作库,https://docs.ethers.io/v4/,随后集成到登录页面中:0 \& a9 m9 N+ ?; T8 I# }
8 M3 @% l a9 [
- <script src="{{ static_url("js/ethers-v4.min.js") }}"></script>! J5 r/ ^ m, ? i7 B' ]
- <script src="{{ static_url("js/axios.js") }}"></script>
- <script src="{{ static_url("js/vue.js") }}"></script>
" Y3 C) Z4 X1 ?/ C& ^7 c
这里我们基于Vue.js配合Axios使用。8 F' b: m9 T* o0 R! y+ [4 f
接着声明登录激活方法:& y2 d7 g/ W+ w/ P
- sign_w3:function(){: P, g" ?, {3 V- q2 H( _
- 6 F# l$ e/ ]6 f: T, r, z1 v
- that = this;2 }9 g/ A1 g) y
- ethereum.enable().then(function () {" v6 h( R. G5 `/ \. M% m# |5 J$ G
- ; o# `& i9 _3 e: K. I- }( `: w! V1 }
- this.provider = new ethers.providers.Web3Provider(web3.currentProvider);9 {$ P4 O+ q9 [' D. z0 l
- 3 l* K7 Q0 ^2 A; i8 d$ ~
- this.provider.getNetwork().then(function (result) {
- if (result['chainId'] != 1) {
- console.log("Switch to Mainnet!")2 r0 }- Y4 f4 G1 M6 C! `7 A5 X
- } else { // okay, confirmed we're on mainnet
- 4 w% q/ b5 O4 _' _
- this.provider.listAccounts().then(function (result) {! ~4 ?+ K0 V" ^9 u
- console.log(result);
- this.accountAddress = result[0]; // figure out the user's Eth address
- this.provider.getBalance(String(result[0])).then(function (balance) {! T# Y7 Y$ Q" X. J6 r! B
- var myBalance = (balance / ethers.constants.WeiPerEther).toFixed(4);' j* k1 J" ]$ T H& W
- console.log("Your Balance: " + myBalance);
- });
- # ~' S# D) B# |% K# t) M
- // get a signer object so we can do things that need signing+ B% c6 ~3 H' F* w8 ~6 t
- this.signer = provider.getSigner();! q' X( m; x$ J& h9 y5 u
- var rightnow = (Date.now()/1000).toFixed(0)
- var sortanow = rightnow-(rightnow%600)
- / e' U' y; d( r- u! h" O+ G
- this.signer.signMessage("Signing in to "+document.domain+" at "+sortanow, accountAddress, "test password!")" ^5 P2 H( G, e P& b- [* o$ N& E
- .then((signature) => { that.handleAuth(accountAddress,signature);
- });
- 2 G% K& h8 _' l$ k- O: ]; W
- console.log(this.signer);9 g. {& h7 r9 K! p/ `) b9 L' L# E5 h
- })' {( I' S% @5 f' r; k4 P9 D
- }
- })
- })6 D) X8 A1 H$ ?; j. N
- - Z# @4 Z+ R5 Z5 U; S2 B
- },
0 I) U/ s. P! L% g
- //检查验证; f. u$ f/ W0 O
- handleAuth:function(accountAddress, signature){
- & ~; S. [! r: |; p) p- i _/ ?2 J
- ' d) v: g! } t9 R; Q
- this.myaxios("/checkw3/","post",{"public_address":accountAddress,"signature":signature}).then(data =>{
- if(data.errcode==0){. O, S6 p, n+ a7 |1 W4 t q
- alert("欢迎:"+data.public_address);, w2 S/ g# D) V3 l
- localStorage.setItem("token",data.token);/ P8 r5 U+ O0 C- E
- localStorage.setItem("email",data.public_address);8 X8 ^4 u8 c6 T, N" f( |
- window.location.href = "/";
- }else{; b0 b& \) M: @0 [0 m
- alert("验证失败");% o. V% t; w x- o8 j
- }' c" Q1 I0 b1 l1 {, t( Y
- });# v: `0 g! D& ?1 |/ s q
- " O; d% d% ?- q' l, f: O& J( n
- }
3 F: U; J6 Q1 o3 ^& T4 w9 q
8 S! M3 A" T' v
9 a* q9 H4 _; E2 Z- H, M
随后创建异步视图方法:
- from tornado.web import url
- import tornado.web
- from tornado import httpclient- X( y) R' U- m
- from .base import BaseHandler: R- }. T9 e2 P: K/ t" R- @7 u& U
- from web3.auto import w3+ F" o, @8 {" X
- from eth_account.messages import defunct_hash_message6 V' Z, R% B; ~
- import time
- # V' W% W) P1 f
- class CheckW3(BaseHandler):
- async def post(self):
- ! j `( o* A% t
- public_address = self.get_argument("public_address"), R. Z* b' A; d6 w, l
- signature = self.get_argument("signature"); K2 c1 h- ^& \* H9 c+ N. ]
- domain = self.request.host+ \% F0 |1 A4 {; _
- if ":" in domain:8 o( L3 d0 p' Z
- domain = domain[0:domain.index(":")]$ f, I8 z8 ]0 f
- 6 Y6 [; U2 D7 O* V2 s
- now = int(time.time())8 K1 M* u8 r- a) C8 N" ^
- sortanow = now-now%600
- 7 s) k4 o; W5 \& k5 i" \' G" S
- original_message = 'Signing in to {} at {}'.format(domain,sortanow)2 _3 m. d* _2 Q6 I9 p
- print("[+] checking: "+original_message), i( H& X/ S) i: e; u: \/ r
- message_hash = defunct_hash_message(text=original_message); v- p m9 o( l D$ D% [# r% I
- signer = w3.eth.account.recoverHash(message_hash, signature=signature)
- 9 \, A9 G+ M6 x4 [& ^9 k( K. A1 o
- if signer == public_address:3 n+ u* G# V @5 O' j
- try:
- user = await self.application.objects.get(User,email=public_address)
- except Exception as e:
- user = await self.application.objects.create(User,email=public_address,password=create_password("third"),role=1)6 ]- F0 N$ Q* y
- myjwt = MyJwt()
- 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方法对签名进行反编译操作,如果反编译后的钱包地址和前端传过来的钱包地址吻合,那么说明当前账户的身份验证通过:" M& h6 t; Y* v. d
$ B) h2 ^9 e4 R* m/ r7 F
4 n" W& ?1 B* l- c6 X
当验签通过之后,利用钱包地址在后台创建账号,随后将钱包地址、token等信息返回给前端,前端将其保存在stroage中即可。
2 y( [& e* R6 h
结语/ \/ C/ s) ]8 f5 x
没错,将至已至,未来已来,是时候将Web3.0区块链技术融入产品了,虽然有些固有的思维方式依然在人们的脑海挥之不去,但世界却在时不我待地变化着,正是:青山遮不住,毕竟东流去!项目开源在https://github.com/zcxey2911/Tornado6_Vuejs3_Edu