如何将 metamask 连接到 dapp？

Question

I am building a dapp and I want it to connect to metamask.我正在构建一个 dapp，我希望它连接到元掩码。 I got the code below from https://docs.metamask.io/guide/getting-started.html#basic-considerations .我从https://docs.metamask.io/guide/getting-started.html#basic-lookingations得到了下面的代码。 Metamask is installed on my browser, but it's not working.我的浏览器上安装了 Metamask，但它不起作用。 When the browser loads the page the console writes MetaMask not installed!当浏览器加载页面时，控制台写入MetaMask not installed! . . When I click the enableEthereumButton the console gives me an error:当我单击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

index.html索引.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>

demo.js演示.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;
}

What am I missing?我错过了什么？ I followed the instructions on the website provided above.我按照上面提供的网站上的说明进行操作。

Answer 1

@slaven tojic After installing Metamask extension in Chrome, have you activated it? @slaven tojic 在 Chrome 中安装 Metamask 扩展后，你激活了吗？
Open extensions from settings OR Open a tab in browser and type chrome://extensions/.从设置中打开扩展程序或在浏览器中打开一个选项卡并输入 chrome://extensions/。
Check in Metamask block, if toggle button is turned on or not.检查 Metamask 块，是否打开了切换按钮。 If not activate it.如果没有激活它。
Also, pin Metamask extension on browser -> check following images.此外，在浏览器上固定 Metamask 扩展 -> 检查以下图像。 Chrome MetaMask extension setting & Metamask after activation Chrome MetaMask 扩展设置和激活后的 Metamask

After this Check if your code is working.在此之后检查您的代码是否正常工作。 If you have already done above settings, then there must be other issue.如果您已经完成了上述设置，那么肯定还有其他问题。
Also, in your code you are referring to account[0].此外，在您的代码中，您指的是 account[0]。 Are you using Testnet accounts for connecting or local accounts ( using Ganache https://www.trufflesuite.com/ganache ).您是使用 Testnet 帐户进行连接还是本地帐户（使用 Ganache https://www.trufflesuite.com/ganache ）。
If you are using local Ganache server, then you have to configure it in MetaMask.如果您使用的是本地 Ganache 服务器，则必须在 MetaMask 中进行配置。 You can find lots of articles regarding the same.你可以找到很多关于相同的文章。 Please ignore this additional info, if you are already following it.如果您已经在关注此附加信息，请忽略它。

Answer 2

Here's the issue, Metamask requires a normal host to inject (eg localhost), it will not inject on a random file opened on your own workstation, hence the reason why your validation can't find the window.ethereum object.问题来了，Metamask 需要一个普通的主机来注入（例如 localhost），它不会注入在你自己的工作站上打开的随机文件，因此你的验证找不到 window.ethereum 对象的原因。

Also, depending on how you are running your project, I would place the ethereumButton const within a window.onload function to avoid the query selector not finding it because it doesn't exist yet.此外，根据您运行项目的方式，我会将 ethereumButton const 放在 window.onload 函数中，以避免查询选择器找不到它，因为它尚不存在。

I would do the following:我会做以下事情：

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