基于web3.0使用钱包Metamask的三方登陆

什么是web3.0

想要理解web3，就必须了解去中心化、区块链和代币（token）的概念。

web3沿用了区块链去中心化的概念，用户通过代币来创作和消费内容，同时可以获得自己创作内容的所有权。

web3建立在点对点的计算机网络基础设施上，不需要通过中心化的巨型服务器进行分发。

1.去中心化

在传统的web2.0，我们下载打开一个app，往往第一个操作就是登录注册，同意一些看都不会看一眼的用户隐私协议。

我们在app上产生的个人数据逐渐被收集，它们可能会在我们不知情的情况下贩卖到其他厂商，我们的数据并不属于我们。

web3基于区块链加密的技术加上完全去中心化的存储方式能够允许用户对自己的数据有完全的所有权，用户可以决定数据是否开放给其他机构使用。

而数据通过区块链的形式存储在所有的节点中，不会发生服务器宕机数据丢失或被窃取的情况。

2.什么是区块链

以转账举例：如果我用某个支付app向a转账100元，那么支付ap需要检查我的余额是否有100元，转账后我的账户还剩多少钱。

这些交易信息都需要支付app进行记录，所有的交易都需要一个交易中心。

区块链的世界中，是没有交易中心的概念的。

任何人都可以记录，但是为什么要浪费自己的资源记录跟自己无关的东西呢？

答案是记账的奖励机制，所有人记账都可以收到手续费的奖励，相较于中心化的交易手续费是一个很低的数字

在web3中，交易的前提是拥有一个虚拟钱包。

与传统的银行账户不同，虚拟钱包没有中心化的交易记录，而是通过无数个节点来进行记录。

虚拟钱包分为三种类别：

1. 在交易所开通的账户钱包，和传统的账户类似，都需要一个中心化的机构运行；
2. 第二类是冷钱包，需要一个特定的硬件装置才可以运行， 类似网银的u盾；
3. 第三类就是一个单纯的app（metamask），只需要通过密钥就可以进行交易。

如果我向a转账100元（当然，货币必须换为等值的虚拟币），同时广播告诉了网络上的所有人，这个网络上的所有人进行交易时的记录都会广播。

假设在一段时间内收集到了一千条交易记录，那么将这一千条交易记录封装为一个块，这个块就是区块链的其中之一。

把封装的这一块链接到上一个交易记录的块，如此延伸，就形成了一个区块链。

3.什么是代币（token）

以游戏举例：同质化代币可以理解为我们充值的点券，非同质化代币可以理解为我们购买的皮肤、装备等等道具。

代币只会存在于区块链上，也就是说，用户的所有互联网资产，是以区块链的形式存在于互联网之上的。

4.小结

web3通过区块链技术，让用户对自己的数据有了真正的自主权。但是正如现在，大众对web3还处于一无所知的状态，所以去中心化的网络依然进展缓慢。

具体详细介绍请看@汉堡怪兽 原创发布于人人都是产品经理。

MetaMask

MetaMask是用于与以太坊区块链进行交互的软件加密货币钱包。MetaMask允许用户通过浏览器插件或移动应用程序访问其以太坊钱包，然后可以使用这些扩展程序与去中心化应用程序进行交互。当然了，首先需要拥有一个MetaMask钱包，进入

MetaMask - Microsoft Edge Addons

安装metamask浏览器插件：(浏览器版本不一样，根据自己电脑浏览器的版本下载，我的是edge)

随后点开插件，创建账号，记录密码、钱包地址、以及助记词等信息。

安装好插件之后，我们就可以利用这个插件和网站应用做交互了。

钱包登录的流程

登录逻辑和传统的三方登录还是有差异的，传统三方登录一般是首先跳转三方平台进行授权操作，随后三方平台将code验证码返回给登录平台，登录平台再使用code请求三方平台换取token，再通过token请求用户账号信息，而钱包登录则是先在前端通过Web3.js浏览器插件中保存的私钥对钱包地址进行签名操作，随后将签名和钱包地址发送到后端，后端利用Web3的库用同样的算法进行验签操作，如果验签通过，则将钱包信息存入token，并且返回给前端。

web3.0三方登陆流程图

前端具体代码展示

        // metamask三方登陆
        metamask: function () {
            var that = this
            // 开启浏览器插件
            ethereum.enable().then(function () {

                // 声明实例
                var provider = new ethers.providers.Web3Provider(web3.currentProvider);

                // 上链
                provider.getNetwork().then(function (result) {

                    if (result['chainId'] != 1) {
                        alert("请更换区块链")
                        return false
                    }
                    // 上链成功
                    // 列出所有的钱包地址
                    provider.listAccounts().then(function (result) {

                        console.log(result)
                        //获取用户钱包地址
                        that.accountaddress = result[0];
                        //获取签名
                        var signer = provider.getSigner()
                        //时间戳
                        var rightnow = (Date.now() / 1000).toFixed(0)
                        var sortanow = rightnow - (rightnow % 600)
                        // 生成签名                             //当前域名
                        signer.signMessage('Signning in to ' + document.domain + 'at' + sortanow, that.accountaddress,
                            'test password!').then(signature => {
                                console.log(that.accountaddress, signature)
                                that.signature = signature;
                                that.send_acc();
                            })

                    })

                })
            })

        },
   

启动浏览器的metamask钱包，获取钱包地址并生成

 通过使用signMessage方法返回签名，这里加签过程中使用基于时间戳的随机数防止未签名，当前端签名生成好之后，立刻异步请求后台接口：

     send_acc: function () {
           
            this.myaxios(this.weburl + "/account/", "put", { acc: this.accountaddress, sign: this.signature, cate: this.cate }).then(res => {
                console.log(res)
                if (res.errcode == 0) {
                    this.$message.info(res.msg)
                    localStorage.setItem('token', res.token)
                    localStorage.setItem('phone', res.phone)
                    

                } else {
                    this.$message.info(res.msg)
                }
            })

        },

这里将当前账户的钱包地址和签名传递给后端，如图所示：

后端接收前端传递的钱包地址和签名

后端验签的方式就是按照加密的方式在生成一遍签名，与传递的签名进行比较

 # 验签
    async def check_sign(self, accountaddress, signature):
        # 获取当前域名
        domain = self.request.host    #
        if ':' in domain:
            domain = domain[0:domain.index(':')]
        # 时间戳
        now = int(time.time())
        sortanow = now - (now % 600)
        # 生成签名
        message = 'Signning in to ' + domain + 'at'+str(sortanow)
        # 反编译
        message_hash = defunct_hash_message(text=message)
        # 获取签名对象
        signer = w3.eth.account.recoverHash(message_hash, signature=signature)
        print(signer)
        if accountaddress == signer:
            return True
        return False

根据返回的结果来判断是否能够成功登录

当验签通过之后，利用钱包地址在后台创建账号，随后将钱包地址、token等信息返回给前端，前端将其保存在stroage中即可。