如何将 metamask 连接到 dapp？

Question

我正在构建一个 dapp，我希望它连接到元掩码。 我从https://docs.metamask.io/guide/getting-started.html#basic-lookingations得到了下面的代码。 我的浏览器上安装了 Metamask，但它不起作用。 当浏览器加载页面时，控制台写入MetaMask not installed! . 当我单击enableEthereumButton ，控制台给了我一个错误：

 demo.js:16 Uncaught (in promise) ReferenceError: ethereum is not defined
    at getAccount (demo.js:16)
    at HTMLButtonElement.<anonymous> (demo.js:12)
getAccount @ demo.js:16
(anonymous) @ demo.js:12

索引.html

<!DOCTYPE html>
<html>
<head>
  <title>Dapp</title>
</head>
<body>

  <button class="enableEthereumButton">Enable Ethereum</button>
  <h2>Account: <span class="showAccount"></span></h2>

<script src="demo.js"></script>
</body>
</html>

演示.js

if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask is installed!');
 }
else{
      console.log('MetaMask not installed!');
}

const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');

ethereumButton.addEventListener('click', () => {
  getAccount();
});

async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  const account = accounts[0];
  showAccount.innerHTML = account;
}

我错过了什么？ 我按照上面提供的网站上的说明进行操作。

Answer 1

@slaven tojic 在 Chrome 中安装 Metamask 扩展后，你激活了吗？
从设置中打开扩展程序或在浏览器中打开一个选项卡并输入 chrome://extensions/。
检查 Metamask 块，是否打开了切换按钮。 如果没有激活它。
此外，在浏览器上固定 Metamask 扩展 -> 检查以下图像。 Chrome MetaMask 扩展设置和激活后的 Metamask

在此之后检查您的代码是否正常工作。 如果您已经完成了上述设置，那么肯定还有其他问题。
此外，在您的代码中，您指的是 account[0]。 您是使用 Testnet 帐户进行连接还是本地帐户（使用 Ganache https://www.trufflesuite.com/ganache ）。
如果您使用的是本地 Ganache 服务器，则必须在 MetaMask 中进行配置。 你可以找到很多关于相同的文章。 如果您已经在关注此附加信息，请忽略它。

Answer 2

问题来了，Metamask 需要一个普通的主机来注入（例如 localhost），它不会注入在你自己的工作站上打开的随机文件，因此你的验证找不到 window.ethereum 对象的原因。

此外，根据您运行项目的方式，我会将 ethereumButton const 放在 window.onload 函数中，以避免查询选择器找不到它，因为它尚不存在。

我会做以下事情：

window.onload = function() {
   const ethereumButton = 
   document.querySelector('.enableEthereumButton');

   ethereumButton.addEventListener('click', () => {
       if (typeof window.ethereum !== 'undefined') {
           getAccount();
       } else {
           alert('Please install MetaMask');
       }
   });
};

async function getAccount() {
   const showAccount = document.querySelector('.showAccount');
   const accounts = await ethereum.request({ method: 
   'eth_requestAccounts' });
   const account = accounts[0];
   showAccount.innerHTML = account;
}

如何将 metamask 连接到 dapp？

问题描述

2 个解决方案

解决方案1
0 2021-08-02 18:39:44

解决方案2
0 2021-12-23 12:37:00

如何将 metamask 连接到 dapp？

问题描述

2 个解决方案

解决方案1 0 2021-08-02 18:39:44

解决方案2 0 2021-12-23 12:37:00

解决方案1
0 2021-08-02 18:39:44

解决方案2
0 2021-12-23 12:37:00