币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】

  • A+
所属分类:以太坊ETH

chatGPT账号

币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】

一、说明

在 web3.js 中,用户交互方式对消息进行签名可以通过以下步骤实现:

  1. 使用 web3.eth.accounts.sign() 方法签名消息。
  2. 在签名之前,需要使用 web3.eth.personal.unlockAccount() 方法来解锁当前用户的账户,以便进行交互式签名。该方法需要传递账户地址和账户密码作为参数。如果账户已经解锁,则无需再次解锁。
  3. 调用 web3.eth.accounts.sign() 方法,并传入要签名的消息和私钥作为参数。
  4. 如果签名成功,该方法将返回一个包含签名消息的对象。

    本dapp示例代码包含通过metamask钱包客户端签名的方式,私钥后台签名的方式,以及solidity链端完成签名验签的过程,最后执行代币的充提接口。

    dapp前端页面展示效果如下:

    币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】

 

二、核心代码实现

1、web3.js类库前端产生签名消息的代码

const Web3 = require('web3');

//web3.js创建web3对象
const web3 = new Web3('https://mainnet.infura.io/v3/<PROJECT_ID>');

// 1. 解锁账户
await web3.eth.personal.unlockAccount(accountAddress, accountPassword);

// 2. 签名消息
const signature = await web3.eth.accounts.sign(message, privateKey);

// 3. 打印签名结果
console.log("Signature: ", signature);

//4. 拆分签名消息,验证签名公钥地址
const r = signature.slice(0, 66);
const s = "0x" + signature.slice(66, 130);
const v = parseInt(signature.slice(130, 132), 16);

2、solidity端签名验签代码如下:

function getEthSignedMessageHash(bytes32 _messageHash)
 private
 pure
 returns (bytes32)
 {
 return
 keccak256(
 abi.encodePacked(
 "\x19Ethereum Signed Message:\n32",
 _messageHash
 )
 );
 }

 function queryEthSignedMessageHash(
 uint256 amount,
 address to,
 uint256 _nonce
 ) external pure returns (bytes32) {
 bytes32 messageHash = getMessageHash(amount, to, _nonce);
 bytes32 ethSignedMessageHash = getEthSignedMessageHash(messageHash);

 return ethSignedMessageHash;
 }

3、dapp前端页面布局代码如下:

<form>
          <label for="address-input">提币地址:</label>
          <input type="text" id="address-input">
          <label for="amount-input">提币数量:</label>
          <input type="number" id="amount-input">
          <label for="nonce-input">提币nonce:</label>
          <input type="number" id="nonce-input">
          <p class="form-note">提币数量需要包含精度,提币nonce值需要唯一,nonce步长值为2</p>
        </form>
        <div class="button-group">
          <button class="connect-wallet-btn" onclick="connWallet()">连接钱包</button>
          <button class="signmgs-btn" onclick="signMessage()">签名消息(钱包)</button>
          <button class="signmgs-btn" onclick="signMessagePriKey()">签名消息(私钥)</button>
          <button class="verifysig-btn" onclick="verifyMessage()">验证签名</button>
          <button class="execute-contract-btn" onclick="withdraw()">执行提币</button>
        </div>

前端根据用户form表达是输入,对多个变量值进行hash签名产生正确的签名消息后,提交到链端,由链端完成签名验签,最终完成代币的自动化提币,dapp中会员可以自动实现链上充提币操作。

至此,完成web3.js中私钥方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提所有操作流程。

pdf+视频币安智能链BSC发币教程及多模式组合合约源代码下载:

币安智能链BSC发币(合约部署、开源、锁仓、LP、参数配置、开发、故障处理、工具使用)教程下载:

币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】

多模式(燃烧、回流指定营销地址、分红本币及任意币种,邀请推广八代收益,LP加池分红、交易分红、复利分红、NFT分红、自动筑池、动态手续费、定时开盘、回购)组合合约源代码下载:

币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】

pdf+视频币安智能链BSC发币教程及多模式组合合约源代码下载地址:

此处为隐藏的内容!
登录后才能查看!

添加VX或者telegram获取全程线上免费指导

币安BSC智能链Dapp开发教程——web3.js中用户交互方式对消息进行签名并实现链端验签,完成系统会员的代币自动充提【pdf+视频BSC链Dapp开发教程下载】

免责声明

发文时比特币价格:$24249

当前比特币价格:[crypto coins=”BTC” type=”text” show=”price”]

当前比特币涨幅:[crypto coins=”BTC” type=”text” show=”percent”]

免责声明:

本文不代表路远网立场,且不构成投资建议,请谨慎对待。用户由此造成的损失由用户自行承担,与路远网没有任何关系;

路远网不对网站所发布内容的准确性,真实性等任何方面做任何形式的承诺和保障;

网站内所有涉及到的区块链(衍生)项目,路远网对项目的真实性,准确性等任何方面均不做任何形式的承诺和保障;

网站内所有涉及到的区块链(衍生)项目,路远网不对其构成任何投资建议,用户由此造成的损失由用户自行承担,与路远网没有任何关系;

路远区块链研究院声明:路远区块链研究院内容由路远网发布,部分来源于互联网和行业分析师投稿收录,内容为路远区块链研究院加盟专职分析师独立观点,不代表路远网立场。

本文是全系列中第139 / 247篇:行业技术

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的电报
  • 这是我的电报扫一扫
  • weinxin
chatGPT账号

发表评论

您必须登录才能发表评论!