MetaMask (Symfony, jQuery or VanillaJS)

🔧 연동 흐름

1. front end

<button id="connect-metamask">MetaMask 연결</button>
<script>
document.getElementById('connect-metamask').addEventListener('click', async () => {
  if (typeof window.ethereum !== 'undefined') {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      const address = accounts[0];
      console.log("사용자 지갑 주소:", address);

      // 서버로 전송 예시 (ajax)
      fetch('/metamask-connect', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({address}),
      });

    } catch (err) {
      console.error("MetaMask 연결 실패", err);
    }
  } else {
    alert('MetaMask가 설치되어 있지 않습니다.');
  }
});
</script>

2. back end

namespace Eccube\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Request;

class MetaMaskController extends AbstractController
{
    /**
     * @Route("/metamask-connect", name="metamask_connect", methods={"POST"})
     */
    public function connect(Request $request)
    {
        $data = json_decode($request->getContent(), true);
        $address = $data['address'] ?? null;

        if ($address) {
            // 예: DB 저장, 사용자 세션 연결 등
            return new JsonResponse(['success' => true, 'address' => $address]);
        }

        return new JsonResponse(['success' => false], 400);
    }
}

 

🔹 3) CSRF 예외 처리 (필요 시)

 

Symfony는 POST 요청에 CSRF 토큰을 요구하므로, API용 라우트는 예외 설정 필요.

src/Eccube/EventListener/CsrfValidationListener.php 또는 설정파일에 /metamask-connect 예외 처리

---

https://metamask.io/

MetaMask: The Leading Crypto Wallet Platform, Blockchain Wallet

 

 

• MetaMask Wallet API 개요: 이 문서에서는 MetaMask의 Wallet API가 Ethereum provider API와 JSON-RPC API로 구성되어 있으며, window.ethereum 객체를 통해 dapp과 MetaMask 간의 상호작용을 가능하게 한다고 설명합니다. 주요 기능으로는 사용자 계정 접근, 트랜잭션 서명, 네트워크 관리 등이 포함됩니다.
• JSON-RPC API 참조: MetaMask의 Wallet API는 JSON-RPC API를 래핑하여 다양한 메서드를 제공합니다. 이 문서에서는 표준 Ethereum JSON-RPC 메서드와 MetaMask 고유의 메서드에 대한 정보를 제공합니다
  https://docs.metamask.io/wallet/concepts/wallet-api/?utm_source=chatgpt.com 

About the Wallet API | MetaMask developer documentation

• Ethereum Provider API 참조 : Ethereum Provider API는 MetaMask의 Wallet API의 핵심 구성 요소로, dApp이 사용자의 MetaMask 지갑과 상호 작용할 수 있도록 지원합니다. 이 API는 window.ethereum 객체를 통해 제공되며, 계정 요청, 트랜잭션 서명, 네트워크 상태 감지 등 다양한 기능을 제공합니다. 

• 계정 요청: 사용자의 계정 정보를 요청할 수 있습니다.
• 트랜잭션 서명: 사용자에게 트랜잭션 서명을 요청할 수 있습니다.
• 네트워크 감지: 사용자가 연결된 네트워크 정보를 확인할 수 있습니다.
• 이벤트 리스닝: 계정 변경, 네트워크 변경 등의 이벤트를 감지할 수 있습니다.
  EIP-1193 : Ethereum Provider JavaScript API 표준 : https://eips.ethereum.org/EIPS/eip-1193?utm_source=chatgpt.com
  MetaMask Ethereum Provider API : https://docs.metamask.io/wallet/reference/provider-api/?utm_source=chatgpt.com
  https://docs.senderwallet.io/api-reference/ethereum/ethereum-provider-api?utm_source=chatgpt.com

Ethereum provider API | MetaMask developer documentation

 

// MetaMask 설치 여부 확인
if (window.ethereum && window.ethereum.isMetaMask) {
  // 계정 요청
  const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
  console.log('사용자 계정:', accounts[0]);

  // 네트워크 ID 확인
  const chainId = await window.ethereum.request({ method: 'eth_chainId' });
  console.log('현재 네트워크 ID:', chainId);

  // 계정 변경 이벤트 리스닝
  window.ethereum.on('accountsChanged', (accounts) => {
    console.log('계정 변경됨:', accounts);
  });

  // 네트워크 변경 이벤트 리스닝
  window.ethereum.on('chainChanged', (chainId) => {
    console.log('네트워크 변경됨:', chainId);
  });
} else {
  console.log('MetaMask가 설치되어 있지 않습니다.');
}

About the Wallet API | MetaMask developer documentation