자습서: 바닐라 JavaScript를 사용하여 MetaMask에 연결

21881 단어 metamasktutorialjavascriptweb3
이 게시물에서는 간단한 JavaScript 코드를 사용하여 프런트엔드 애플리케이션을 MetaMask Wallet에 간단히 연결하는 방법을 배웁니다.

그 의도는 React와 같은 라이브러리의 모든 잡음 없이 얼마나 단순한지 보여주는 것입니다.

시작하자.

새로운 Vanilla JavaScript Sandbox 만들기



먼저 https://codesandbox.io/을 열고 VanillaJS용 새 샌드박스를 생성합니다.
index.js 파일 내의 모든 콘텐츠를 삭제할 수 있으므로 새로 시작할 수 있습니다.

이제 우리는 갈 준비가 되었습니다!

window.ethereum 이해하기



MetaMask 지갑에 연결하려면 사용자가 브라우저에 MetaMask 확장 프로그램을 설치했는지 프로그래밍 방식으로 확인해야 합니다. 이를 위해 이 코드를 index.js 파일에 붙여넣기만 하면 됩니다.

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


붙여넣은 후 샌드박스의 콘솔 탭을 확인하면 console.log 메시지를 볼 수 있어야 합니다. MetaMask가 설치되어 있지 않은 경우 official website을 방문하여 브라우저에 맞는 버전을 선택하여 설치하십시오.

계속해서 window.ethereum는 무엇입니까? 너무 자세히 설명하지 않고 브라우저 확장은 이 개체를 브라우저에 삽입합니다. 이ethereum 객체는 이름에서 알 수 있듯이 Ethereum 기반 네트워크에 액세스할 수 있는 API를 제공하는 Ethereum 제공자라고 합니다.

Ethereum Provider API에 대해 더 궁금하시다면 자세히 읽어보세요here .

사용자의 브라우저가 MetaMask 지갑에 액세스할 수 있는지 확인



이제 MetaMask에 연결할 준비가 되었는지 또는 window.ethereum가 사용 가능한지 여부를 기반으로 하지 않는지 알려주는 버튼을 만들어 보겠습니다.

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="connect-btn">Connect Wallet</button>

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




// index.js

function isEthereumAvailable() {
  return window.ethereum !== "undefined"
}

const connectButton = document.getElementById('connect-btn')

function init() {
  if (isEthereumAvailable()) {
    connectButton.textContent = 'Connect Wallet'
    connectButton.removeAttribute('disabled')
  } else {
    connectButton.textContent = 'Ethereum not available. Please install MetaMask!'
    connectButton.setAttribute('disabled', true)
  }
}

init()


좋습니다. 이제 비활성화되고 사용할 수 없는 경우 사용자에게 MetaMask를 설치하라고 알리는 버튼이 생겼습니다. 그렇지 않으면 "Connect Wallet"이 표시됩니다.

사용자 계정을 볼 수 있는 권한을 요청하는 MetaMask 팝업 표시



이제 버튼이 있으므로 클릭했을 때 사용자를 위해 MetaMask가 팝업되는지 확인해야 합니다.

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button id="connect-btn">Connect Wallet</button>

        <-- Add this line so we can display the connected account -->
    <div id="account">Account not connected</div>

        <-- Add this line so we can display errors -->
        <div id="error"></div>

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




function isEthereumAvailable() {
  return window.ethereum !== "undefined";
}

const connectButton = document.getElementById("connect-btn");

// + Add this two elements to give feedback to the user
const accountElement = document.getElementById("account");
const errorElement = document.getElementById("error");

// + Add this function to request the user accounts
//   This will display the MetaMask popup to the user
async function getAccounts() {
  return window.ethereum.request({
    method: "eth_requestAccounts"
  });
}

// + Add the connect function that will be triggered by the connectButton
function connect() {
  connectButton.textContent = "Loading...";
  errorElement.textContent = "";
  return getAccounts().then(showAccount).catch(showError);
}

// + Display the selected wallet address
function showAccount(accounts) {
  if (accounts.length > 0) {
    accountElement.textContent = 'Account: ' + accounts[0];
    connectButton.textContent = "Connected";
  }
}

// + Displays an error to the user when trying to connect the wallet
function showError(err) {
  connectButton.textContent = "Connect Wallet";
  errorElement.textContent = err.message;
}

function init() {
  if (isEthereumAvailable()) {
    connectButton.textContent = "Connect Wallet";
    connectButton.removeAttribute("disabled");

    // + Add this line to add the connect function to the button
    connectButton.addEventListener("click", connect);
  } else {
    connectButton.textContent = "Ethereum not available";
    connectButton.setAttribute("disabled", true);
  }
}

init();


현재 네트워크 감지 및 표시


index.html에 새 요소를 추가해 보겠습니다.

... same as before
<body>
  <button id="connect-btn">Connect Wallet</button>
  <div id="account">Account not connected</div>
  <div id="error"></div>

    <!-- Add this line so we can display the connected network --> 
    <div id="chain"></div>

    <script src="src/index.js"></script>
</body>

index.js 파일에 몇 가지 새로운 기능을 추가합니다.

... same as before
// Add this after errorElement variable
const chainElement = document.getElementById("chain");

async function getChainId() {
  const chainId = await window.ethereum.request({ method: "eth_chainId" });
  return chainId;
}

// We will use this to display a friendly name for the chain,
// as the getChainId method will give us the chainId.
function getChainName(chainId) {
  switch (chainId) {
    case "0x1":
      return "Ethereum Main Network";
    case "0x3":
      return "Ropsten Test Network";
    case "0x4":
      return "Rinkeby Test Network";
    case "0x5":
      return "Goerli Test Network";
    case "0x2a":
      return "Kovan Test Network";
    default:
      default: "Chain not supported"
  }
}

function showChain(chainId) {
  chainElement.textContent = getChainName(chainId);
}


그리고 connect 함수에서 다음과 같이 업데이트해 보겠습니다.

function connect() {
  connectButton.textContent = "Loading...";
    chainElement.textContent = "";
  errorElement.textContent = "";
  return getAccounts()
    .then(showAccount)
    .then(getChainId)
    .then(showChain)
    .catch(showError);
}


최종 결과는 다음과 같아야 합니다.

푸시 알림을 위한 장치 토큰을 얻을 수 없는 경우의 조치
Python에서 TripAdvisor 리뷰를 위한 감정 분석 애플리케이션 설계

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage