如何搭建支持Metamask连接、免费发放自发行Ropsten测试网代币的网站

1. 无需自建测试网 #

你已经在Ropsten测试网部署了代币合约，直接使用现有Ropsten链即可，不需要额外搭建测试网。如果后续Ropsten链不稳定，也可以将合约重新部署到目前更活跃的Sepolia或Goerli测试网。

2. 原有代码无法运行的核心问题 #

• 没有引入Web3.js依赖，代码中创建Web3实例的逻辑会直接报错
• 现有逻辑是实现用户向指定地址转账ETH，和你需要的「给用户发放自定义ERC20代币」的逻辑完全不符
• 没有调用你部署的ERC20代币合约的转账逻辑，自然不会有代币转账的效果

3. 前置准备 #

首先你需要确认你的代币合约已经实现了可公开调用的领取逻辑，比如添加了claim()方法，允许用户主动调用领取指定数量的代币，限制每个地址只能领取一次，避免被刷。不要直接把你的管理员私钥放到前端代码中，会直接泄露导致资产被盗。
你需要获取你部署的ERC20合约的ABI，在Remix部署合约的页面可以直接复制ABI内容。

4. 修改后的参考代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 新增引入Web3.js依赖 -->
<script src="https://cdn.jsdelivr.net/npm/web3@1.8.2/dist/web3.min.js"></script>
</head>
<body>
  <div>
    <button class="claim-button">免费领取测试代币</button>
    <div id="status"></div>
  </div>
  <script type="text/javascript">
    // 替换为你自己的合约地址
    const TOKEN_CONTRACT_ADDRESS = "0x7ec4baaa874e77437d45c4f43f6c20ed6d3822a3";
    // 这里替换为你自己的ERC20合约ABI，仅示例需要的claim相关字段
    const TOKEN_ABI = [
      // 如果你的合约有claim方法就加对应的ABI字段
      {
        "constant": false,
        "inputs": [],
        "name": "claim",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
      },
      {
        "constant": false,
        "inputs": [
          {"name": "to", "type": "address"},
          {"name": "value", "type": "uint256"}
        ],
        "name": "transfer",
        "outputs": [{"name": "", "type": "bool"}],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
      }
    ];
    let web3;
    let tokenContract;
    let userAccount;

    window.addEventListener('load', async() => {
      if (window.ethereum) {
        web3 = new Web3(window.ethereum);
        try {
          // 请求用户授权钱包连接
          const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
          userAccount = accounts[0];
          // 初始化代币合约实例
          tokenContract = new web3.eth.Contract(TOKEN_ABI, TOKEN_CONTRACT_ADDRESS);
          initClaimButton();
        } catch (err) {
          $('#status').html('用户拒绝了钱包授权')
          console.error(err)
        }
      } else {
        $('#status').html('未检测到Metamask等Web3钱包插件')
      }
    })

    const initClaimButton = () => {
      $('.claim-button').click(async () => {
        $('#status').html('领取中，请在钱包中确认交易...')
        try {
          // 如果合约有claim方法，直接调用即可
          const tx = await tokenContract.methods.claim().send({
            from: userAccount
          })
          $('#status').html(`领取成功！交易哈希：${tx.transactionHash}`)
        } catch (err) {
          console.log('领取失败', err)
          $('#status').html('领取失败，请确认你已切换到Ropsten测试网，且未重复领取')
        }
      })
    }
  </script>

5. 额外注意事项 #

• 要确保用户的Metamask钱包已经切换到Ropsten测试网，你可以在代码里加自动切换网络的逻辑，调用wallet_switchEthereumChain方法即可
• 如果你的合约没有实现claim方法，就需要搭建一个简单的后端服务，托管拥有大量代币的管理员钱包地址，用户提交领取请求后，后端签名调用合约的transfer方法给用户地址转币，绝对不要把管理员私钥暴露在前端
• 可以添加领取限制逻辑，比如同一个地址24小时内只能领取一次，防止被刷完代币

内容的提问来源于stack exchange，提问作者Fabboy