วิธีใช้ MetaMask API: เชื่อมต่อ dApp กับกระเป๋าเงิน Ethereum

MetaMask เป็นทางเข้าเริ่มต้นสู่ Ethereum สำหรับผู้ใช้งานหลายสิบล้านคน และหากคุณเรียกใช้ dApp, MetaMask API คือสิ่งที่อยู่ระหว่าง UI ของคุณกับคีย์การลงนามของผู้ใช้ “MetaMask API” คือสองสิ่งภายใต้ชื่อเดียว: ผู้ให้บริการ window.ethereum ที่ถูก inject ซึ่งกำหนดโดย EIP-1193 และ MetaMask SDK ที่ขยายขอบเขตเดียวกันไปยังแอปพลิเคชันมือถือ, React Native, และแบ็คเอนด์ Node.js หากคุณเรียนรู้ผู้ให้บริการนี้ คุณได้เรียนรู้ 80% ของการรวมกระเป๋าเงินทุกรูปแบบบนเว็บแล้ว

คู่มือนี้จะอธิบายเกี่ยวกับการตรวจจับผู้ให้บริการ, การร้องขอบัญชี, การอ่านเชนปัจจุบัน, การลงนามข้อความด้วย personal_sign และ EIP-712, การส่งธุรกรรม, การเพิ่มหรือเปลี่ยนเชน, และการใช้ MetaMask SDK เมื่อคุณอยู่นอกส่วนขยายเบราว์เซอร์ นอกจากนี้ คุณยังจะได้เห็นว่า ethers.js v6 และ viem เหมาะสมกับการเป็น wrapper ระดับสูงได้อย่างไร และ Apidog เข้ามามีบทบาทในเวิร์กโฟลว์อย่างไรเมื่อคุณต้องการทดสอบการเรียกใช้ JSON-RPC พื้นฐานโดยไม่ต้องเขียนโค้ด frontend แบบใช้แล้วทิ้ง

หากคุณกำลังสร้างสิ่งใดก็ตามที่เกี่ยวข้องกับกระเป๋าเงิน ให้บุ๊กมาร์กหน้านี้พร้อมกับคู่มือของเราเกี่ยวกับ API กระเป๋าเงินคริปโตที่ดีที่สุด เพื่อมุมมองที่กว้างขึ้นเกี่ยวกับภูมิทัศน์ของผู้ให้บริการ

สรุป

• MetaMask API คือผู้ให้บริการ EIP-1193 ที่แสดงผ่าน window.ethereum ในเบราว์เซอร์ พร้อมด้วย MetaMask SDK สำหรับมือถือและ Node
• เริ่มต้นด้วย eth_requestAccounts เพื่อแจ้งให้ผู้ใช้เชื่อมต่อ จากนั้นฟังเหตุการณ์ accountsChanged และ chainChanged
• ลงนามข้อความด้วย personal_sign และลงนามข้อมูลที่มีโครงสร้างด้วย eth_signTypedData_v4 (EIP-712)
• เปลี่ยนเครือข่ายด้วย wallet_switchEthereumChain (EIP-3326) และเพิ่มเครือข่ายใหม่ด้วย wallet_addEthereumChain (EIP-3085)
• ไลบรารีระดับสูง เช่น ethers.js v6, viem และ wagmi จะห่อหุ้มผู้ให้บริการพื้นฐาน; ส่วน Snaps จะขยาย MetaMask เอง
• ใช้ Apidog เพื่อทดสอบ JSON-RPC endpoints, จำลองการตอบสนองของธุรกรรม และแก้ไขข้อผิดพลาดของการลงนามก่อนที่จะเผยแพร่

MetaMask API คืออะไร?

MetaMask API คืออินเทอร์เฟซที่ MetaMask เปิดเผยต่อหน้าเว็บและแอปพลิเคชันสำหรับการโต้ตอบกับ Ethereum และเชนที่เข้ากันได้กับ EVM ในเบราว์เซอร์ ส่วนขยายจะฉีดออบเจกต์ผู้ให้บริการที่ window.ethereum และออบเจกต์นั้นเป็นไปตามมาตรฐาน EIP-1193 dApp ใด ๆ ที่กำหนดเป้าหมายมาตรฐานนั้นสามารถทำงานร่วมกับ MetaMask, Coinbase Wallet, Rabby, Frame และกระเป๋าเงินอื่น ๆ อีกมากมายโดยไม่ต้องเปลี่ยนโค้ดเลย

นอกเบราว์เซอร์ MetaMask SDK มอบรูปแบบผู้ให้บริการเดียวกันใน React Native, Node.js บริสุทธิ์, แอปพลิเคชัน Electron บนเดสก์ท็อป และแม้กระทั่งสคริปต์ฝั่งเซิร์ฟเวอร์ SDK จะจัดการการเชื่อมโยงแบบ deep-linking และการสแกน QR-code ที่ช่วยให้กระเป๋าเงิน MetaMask บนมือถือสามารถลงนามธุรกรรมที่ร้องขอโดยกระบวนการบนเดสก์ท็อปหรือแบ็คเอนด์ได้ ภายใต้การทำงานนั้นยังคงสื่อสารด้วย EIP-1193 ดังนั้นโค้ดแอปของคุณแทบจะไม่เปลี่ยนแปลงเลย

MetaMask ยังมี Snaps ซึ่งเป็นระบบปลั๊กอินที่ช่วยให้บุคคลที่สามสามารถขยายกระเป๋าเงินด้วยเชนใหม่, เมธอด RPC ที่กำหนดเอง และประเภทบัญชีได้ Snaps อยู่นอกขอบเขตของคู่มือนี้ แต่ก็เป็นสิ่งสำคัญที่ควรทราบหากคุณต้องการรองรับเชนที่ไม่ใช่ EVM หรือขั้นตอนการลงนามที่กำหนดเองภายใน MetaMask เอง

การยืนยันตัวตนและการตั้งค่า

ไม่มี API keys สำหรับผู้ให้บริการเอง การยืนยันตัวตนคือผู้ใช้ต้องอนุมัติแต่ละคำขอใน UI กระเป๋าเงินของพวกเขา คุณต้องมีสองสิ่ง: วิธีการตรวจจับผู้ให้บริการ และวิธีการฟังการเปลี่ยนแปลง

เริ่มต้นด้วยการตรวจจับ ตัวช่วย @metamask/detect-provider จะจัดการกรณีพิเศษ เช่น มีกระเป๋าเงินหลายอันติดตั้งอยู่ แต่คุณก็สามารถตรวจสอบได้โดยตรง

// Vanilla JS detection
import detectEthereumProvider from '@metamask/detect-provider';

const provider = await detectEthereumProvider({ mustBeMetaMask: true });

if (!provider) {
  alert('Please install MetaMask');
} else {
  console.log('MetaMask detected');
}

เมื่อคุณมีผู้ให้บริการแล้ว ให้เชื่อมต่อ Event Listener ก่อนที่คุณจะร้องขอสิ่งใด ๆ การพลาด Event accountsChanged เป็นข้อผิดพลาดในการรวม MetaMask ที่พบบ่อยที่สุด

window.ethereum.on('accountsChanged', (accounts) => {
  if (accounts.length === 0) {
    console.log('User disconnected');
  } else {
    console.log('Active account:', accounts[0]);
  }
});

window.ethereum.on('chainChanged', (chainId) => {
  // Best practice: reload the page on chain change
  window.location.reload();
});

สำหรับแอปพลิเคชัน React, wagmi จะจัดการทั้งหมดนี้ให้คุณและตรวจจับ MetaMask โดยอัตโนมัติผ่าน injected connector ของมัน

เอนด์พอยต์หลัก

การเรียกใช้ผู้ให้บริการทั้งหมดจะผ่าน window.ethereum.request({ method, params }) ชื่อเมธอดเป็นสตริง JSON-RPC และ params เป็นอาร์เรย์หรือออบเจกต์ขึ้นอยู่กับเมธอด นี่คือการเรียกใช้ที่ครอบคลุม 95% ของการรวม dApp

ร้องขอบัญชีและอ่านเชน

// Prompt the user to connect
const accounts = await window.ethereum.request({
  method: 'eth_requestAccounts',
});
const account = accounts[0];

// Read the current chain
const chainId = await window.ethereum.request({
  method: 'eth_chainId',
});

console.log(account, chainId); // '0x...' '0x1' (Ethereum mainnet)

การเรียกใช้ JSON-RPC แบบดิบที่เทียบเท่า ซึ่งคุณสามารถเรียกใช้บนโหนด Ethereum ใดก็ได้ มีลักษณะดังนี้เมื่อใช้ curl

curl https://mainnet.infura.io/v3/YOUR_KEY \
  -X POST \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"eth_chainId","params":[],"id":1}'

สำหรับการเรียกแบบอ่านอย่างเดียว คุณไม่จำเป็นต้องใช้ MetaMask เลย ผู้ให้บริการโหนดอย่าง Alchemy หรือ Infura ก็ให้บริการ RPC แบบเดียวกัน ดู คู่มือ Alchemy API ของเราสำหรับภาพรวมทั้งหมดของโหนด Ethereum ที่โฮสต์

ลงนามข้อความง่ายๆ

personal_sign คือการลงนามแบบคลาสสิกที่มนุษย์อ่านได้ มันจะใส่คำนำหน้าข้อความเพื่อให้ผู้ใช้ไม่ถูกหลอกให้ลงนามไบต์ธุรกรรมที่ไม่พึงประสงค์

const message = 'Sign in to Apidog at ' + new Date().toISOString();
const signature = await window.ethereum.request({
  method: 'personal_sign',
  params: [message, account],
});

ลงนามข้อมูลที่มีโครงสร้างด้วย EIP-712

สำหรับข้อมูลที่ซับซ้อน เช่น permit หรือการท้าทายการเข้าสู่ระบบ ให้ใช้ eth_signTypedData_v4 MetaMask จะแสดงฟิลด์ต่างๆ ได้อย่างชัดเจนในป๊อปอัปยืนยัน ซึ่งทั้งช่วยปกป้องผู้ใช้และสร้างความไว้วางใจ

const typedData = {
  domain: { name: 'Apidog Demo', version: '1', chainId: 1 },
  types: {
    EIP712Domain: [
      { name: 'name', type: 'string' },
      { name: 'version', type: 'string' },
      { name: 'chainId', type: 'uint256' },
    ],
    Login: [
      { name: 'wallet', type: 'address' },
      { name: 'nonce', type: 'uint256' },
    ],
  },
  primaryType: 'Login',
  message: { wallet: account, nonce: 42 },
};

const sig = await window.ethereum.request({
  method: 'eth_signTypedData_v4',
  params: [account, JSON.stringify(typedData)],
});

ส่งธุรกรรม

ธุรกรรมใช้ eth_sendTransaction MetaMask จะจัดการการประมาณค่าแก๊สและการจัดการ nonce โดยอัตโนมัติ

const txHash = await window.ethereum.request({
  method: 'eth_sendTransaction',
  params: [{
    from: account,
    to: '0xRecipientAddressHere',
    value: '0x38d7ea4c68000', // 0.001 ETH in wei, hex
  }],
});

เปลี่ยนหรือเพิ่มเชน

EIP-3326 และ EIP-3085 ครอบคลุมการเปลี่ยนไปยังเชนที่รู้จักและการเพิ่มเชนใหม่

// Switch to Polygon (chainId 137 = 0x89)
try {
  await window.ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0x89' }],
  });
} catch (err) {
  if (err.code === 4902) {
    // Chain not added yet
    await window.ethereum.request({
      method: 'wallet_addEthereumChain',
      params: [{
        chainId: '0x89',
        chainName: 'Polygon',
        rpcUrls: ['https://polygon-rpc.com'],
        nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 },
      }],
    });
  }
}

React กับ MetaMask SDK

SDK ยังทำงานได้ดีใน React ปกติเมื่อคุณต้องการเส้นทางการรวมเดียวที่ครอบคลุมส่วนขยายเดสก์ท็อป, deep-link บนมือถือ และเบราว์เซอร์ในแอป

import { MetaMaskProvider, useSDK } from '@metamask/sdk-react';

function Connect() {
  const { sdk, connected, account } = useSDK();
  return (
    <button onClick={() => sdk?.connect()}>
      {connected ? account : 'Connect MetaMask'}
    </button>
  );
}

export default function App() {
  return (
    <MetaMaskProvider sdkOptions={{ dappMetadata: { name: 'My dApp' } }}>
      <Connect />
    </MetaMaskProvider>
  );
}

สำหรับแอปพลิเคชันที่ใช้งานจริง ให้ห่อหุ้มผู้ให้บริการพื้นฐานด้วย ethers.js v6 หรือ viem สิ่งเหล่านี้จะมอบสัญญาแบบมีประเภท, ตัวถอดรหัส ABI และข้อความแสดงข้อผิดพลาดที่ดีขึ้น ในขณะที่ยังคงสื่อสารกับ MetaMask API ตัวเดียวกันภายใต้พื้นฐาน หากคุณต้องการการเข้าสู่ระบบด้วยอีเมลหรือโซเชียลมีเดียเป็นทางเลือกสำรอง ให้จับคู่ MetaMask กับกระเป๋าเงินแบบฝังผ่าน คู่มือ Privy API ของเรา

ข้อผิดพลาดที่พบบ่อยและข้อจำกัดอัตรา (Rate Limits)

MetaMask จะคืนค่ารหัสข้อผิดพลาด JSON-RPC มาตรฐาน ข้อผิดพลาดที่คุณจะพบได้บ่อยที่สุด:

• 4001: ผู้ใช้ปฏิเสธคำขอ แสดงข้อความแจ้งเตือน “การเชื่อมต่อถูกยกเลิก” ที่เป็นมิตร และอย่าลองใหม่โดยอัตโนมัติ
• 4100: ไม่ได้รับอนุญาต บัญชียังไม่ได้เชื่อมต่อ; เรียกใช้ eth_requestAccounts ก่อน
• 4200: เมธอดไม่รองรับ พบไม่บ่อย แต่ยืนยันว่ากระเป๋าเงินคือ MetaMask ก่อนเรียกใช้เมธอดเฉพาะของผู้จำหน่าย
• 4902: ไม่ได้เพิ่มเชน ดำเนินการต่อด้วย wallet_addEthereumChain
• -32002: คำขอยังคงรอดำเนินการ ผู้ใช้บางครั้งอาจคลิกปุ่มสองครั้ง; ให้ตั้งค่า debounce ทางฝั่งของคุณ

ตัวผู้ให้บริการเองไม่มีข้อจำกัดอัตรา (rate limit) แต่ RPC พื้นฐานมี หากคุณกำลังส่งคำขออ่านผ่าน Infura หรือ Alchemy คุณจะถูกจำกัดด้วยแพ็กเกจของพวกเขา สำหรับการไหลเวียนของเงินเฟียต เช่น การแปลง ETH เป็น USD ทีมส่วนใหญ่จะจับคู่การรวมนี้กับ API on-ramp และ off-ramp ของเงินเฟียต เพื่อให้ผู้ใช้สามารถเติมเงินได้โดยไม่ต้องออกจาก dApp

ราคา MetaMask API

ส่วนขยาย MetaMask และ SDK นั้นฟรี ไม่มีค่าใช้จ่ายต่อการเชื่อมต่อ, ต่อการลงนาม หรือต่อธุรกรรม MetaMask มีรายได้จากค่าธรรมเนียมการแลกเปลี่ยนเมื่อผู้ใช้ซื้อขายภายในกระเป๋าเงินและผ่าน MetaMask Card ไม่ใช่จากนักพัฒนา dApp

ค่าใช้จ่ายที่คุณจะจ่ายมาจาก RPC endpoint ที่ dApp ของคุณเรียกใช้สำหรับการอ่าน แพ็กเกจฟรีของ Alchemy หรือ Infura สามารถรองรับแอปพลิเคชันขนาดเล็กส่วนใหญ่ได้; ส่วน dApp ที่ใช้งานจริงมักจะมีค่าใช้จ่ายระหว่าง $49 ถึง $299 ต่อเดือนสำหรับ throughput เฉพาะ

การทดสอบ MetaMask API ด้วย Apidog

การลงนามผ่านเบราว์เซอร์นั้นยากต่อการดีบักเนื่องจากขั้นตอนการร้องขอครอบคลุมทั้งส่วนขยาย, หน้าเว็บ และบางครั้งก็เป็น deep-link บนมือถือ นั่นคือที่มาที่ Apidog ได้รับตำแหน่งในชุดเครื่องมือสำหรับนักพัฒนากระเป๋าเงิน คุณสามารถเรียกใช้ JSON-RPC endpoint ดิบที่ dApp ของคุณใช้, ยืนยันว่า eth_chainId และ eth_getBalance ส่งคืนค่าที่คุณคาดหวัง และบันทึกขั้นตอนทั้งหมดเป็นชุดทดสอบได้

นำเข้า Ethereum JSON-RPC spec, ตั้งค่า URL โหนดของคุณเป็นตัวแปรสภาพแวดล้อม และคุณก็จะมีชุดคอลเลกชันที่นำกลับมาใช้ใหม่ได้สำหรับทุก EVM chain Apidog ยังสามารถจำลองการตอบสนองได้ ดังนั้นนักพัฒนา frontend ของคุณจึงสามารถสร้างแอปโดยใช้ eth_sendTransaction ปลอมได้ในขณะที่ smart contract ยังอยู่ระหว่างการตรวจสอบ สำหรับ CI คุณสามารถเรียกใช้คอลเลกชันเดียวกันจากบรรทัดคำสั่งและทำให้บิลด์ล้มเหลวหากรูปแบบการตอบสนองเปลี่ยนแปลงไป หากคุณเคยประสบปัญหาเกี่ยวกับ Postman collections ที่ไม่เคยซิงค์ข้ามทีม คู่มือของเราเกี่ยวกับ การทดสอบ API โดยไม่ต้องใช้ Postman ในปี 2026 จะอธิบายว่าทำไม Apidog จึงจัดการการทดสอบ dApp แบบหลายโปรโตคอลได้ดีกว่า

ดาวน์โหลด Apidog เพื่อเริ่มต้นใช้งาน

คำถามที่พบบ่อย

MetaMask API ใช้งานได้บนมือถือหรือไม่? ได้ ใช้ MetaMask SDK ซึ่งจะ deep-link ไปยังแอปพลิเคชันมือถือสำหรับการลงนาม พื้นผิวของผู้ให้บริการเหมือนกับส่วนขยายเบราว์เซอร์ ดังนั้นโค้ดของคุณจึงยังคงเหมือนเดิม สำหรับการเปรียบเทียบเชิงลึกกับ SDK กระเป๋าเงินมือถืออื่น ๆ โปรดดูบทสรุป API กระเป๋าเงินคริปโตที่ดีที่สุด ของเรา

ความแตกต่างระหว่าง eth_sign, personal_sign และ eth_signTypedData_v4 คืออะไร? eth_sign ลงนามไบต์ดิบและเป็นอันตราย; MetaMask เตือนผู้ใช้อย่างจริงจัง personal_sign ใส่คำนำหน้าข้อความที่มนุษย์อ่านได้ eth_signTypedData_v4 ลงนามข้อมูลที่มีโครงสร้างตาม EIP-712 และแสดงฟิลด์ได้อย่างชัดเจนใน UI ของ MetaMask ใช้สองตัวหลัง; หลีกเลี่ยง eth_sign

ฉันต้องใช้ API key แยกต่างหากจาก MetaMask หรือไม่? ไม่ ผู้ให้บริการนี้ฟรีและไม่มี key คุณต้องมีผู้ให้บริการ RPC เช่น Alchemy หรือ Infura สำหรับการอ่านข้อมูลภายนอกกระเป๋าเงิน ซึ่งมี key ของตัวเอง

ฉันสามารถใช้ ethers.js หรือ viem กับ MetaMask ได้หรือไม่? ได้ ทั้งสองตัวจะห่อหุ้มผู้ให้บริการ window.ethereum Ethers v6 เปิดเผย BrowserProvider(window.ethereum) และ viem มี createWalletClient({ transport: custom(window.ethereum) }) dApp ที่ใช้งานจริงส่วนใหญ่ใช้หนึ่งในสองตัวนี้

จะเกิดอะไรขึ้นหากผู้ใช้ติดตั้งกระเป๋าเงินหลายใบ? MetaMask ใช้ EIP-6963 เพื่อให้ dApp สามารถตรวจจับกระเป๋าเงินที่ติดตั้งทั้งหมดได้ แทนที่จะแย่งชิง window.ethereum Wagmi และ RainbowKit จัดการสิ่งนี้โดยอัตโนมัติ

MetaMask Snaps พร้อมสำหรับการใช้งานจริงแล้วหรือยัง? พร้อมแล้ว Snaps เปิดให้บริการทั่วไปในปี 2024 การใช้งานจริงส่วนใหญ่สำหรับการรองรับเชนที่ไม่ใช่ EVM, ข้อมูลเชิงลึกธุรกรรมที่กำหนดเอง และการรวมกระเป๋าเงินฮาร์ดแวร์