基于React+Web3环境，如何获取MetaMask的头像与用户名？

嘿，这个问题问得很实际！我来给你拆解两种可行的实现方式，都是在React+Web3环境下能直接落地的：

1. 最常用：通过ENS（以太坊名称服务）获取 #

MetaMask本身并没有内置API直接返回用户的头像和用户名，但绝大多数用户会把钱包地址和ENS域名绑定——而ENS正好支持存储域名对应的名称和头像信息，这是目前最通用的解决方案。

实现步骤（以ethers.js为例，比原生web3.js更便捷） #

首先安装依赖：

npm install ethers

然后在React组件里编写逻辑：

import { ethers } from "ethers";
import { useState, useEffect } from "react";

function WalletProfile() {
  const [account, setAccount] = useState("");
  const [ensName, setEnsName] = useState("");
  const [ensAvatar, setEnsAvatar] = useState("");

  // 连接钱包并获取基础信息
  const connectWallet = async () => {
    if (!window.ethereum) {
      alert("请先安装MetaMask钱包！");
      return;
    }

    const provider = new ethers.providers.Web3Provider(window.ethereum);
    // 请求用户授权连接钱包
    const accounts = await provider.send("eth_requestAccounts", []);
    setAccount(accounts[0]);

    // 反向解析地址对应的ENS域名
    const resolvedEnsName = await provider.lookupAddress(accounts[0]);
    if (resolvedEnsName) {
      setEnsName(resolvedEnsName);
      // 获取ENS绑定的头像（通常存储在IPFS上）
      const avatarUrl = await provider.getAvatar(resolvedEnsName);
      // 把IPFS地址转成可直接访问的HTTP链接（可选）
      const accessibleAvatar = avatarUrl?.replace("ipfs://", "https://ipfs.io/ipfs/");
      setEnsAvatar(accessibleAvatar);
    } else {
      setEnsName("未绑定ENS域名");
    }
  };

  // 页面加载时自动检测已连接的钱包
  useEffect(() => {
    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      provider.listAccounts().then(accounts => {
        if (accounts.length > 0) {
          setAccount(accounts[0]);
          // 自动拉取ENS信息
          provider.lookupAddress(accounts[0]).then(name => {
            if (name) {
              setEnsName(name);
              provider.getAvatar(name).then(avatar => {
                setEnsAvatar(avatar?.replace("ipfs://", "https://ipfs.io/ipfs/"));
              });
            }
          });
        }
      });
    }
  }, []);

  return (
    <div className="wallet-profile">
      <button onClick={connectWallet}>
        {account ? `已连接: ${account.slice(0, 6)}...${account.slice(-4)}` : "连接钱包"}
      </button>
      {ensName && <p className="ens-name">用户名: {ensName}</p>}
      {ensAvatar && <img src={ensAvatar} alt="用户头像" width="100" height="100" style={{borderRadius: "50%"}} />}
    </div>
  );
}

export default WalletProfile;

代码解释 #

• lookupAddress：通过钱包地址反向解析对应的ENS域名
• getAvatar：从ENS解析器中获取绑定的头像地址，默认是IPFS格式，我们可以转换成普通HTTP链接方便前端直接渲染
• 如果用户没有绑定ENS，就显示"未绑定ENS域名"，同时可以用钱包地址的缩略形式代替用户名

2. 备选方案：请求MetaMask原生授权获取用户资料 #

MetaMask在最新版本中提供了直接获取用户个人资料的接口，但需要用户主动授权，且不是所有用户都开启了该功能，适合作为ENS方案的补充。

实现代码片段 #

const getUserMetaMaskProfile = async () => {
  if (!window.ethereum) return;

  try {
    // 先请求用户授权获取账号权限
    await window.ethereum.request({
      method: "wallet_requestPermissions",
      params: [{ eth_accounts: {} }]
    });

    // 获取用户的MetaMask个人资料
    const userInfo = await window.ethereum.request({
      method: "wallet_getUserInfo"
    });

    // 拿到后更新状态
    setUserName(userInfo.name || "未设置用户名");
    setUserAvatar(userInfo.avatar || "");
  } catch (error) {
    console.error("用户拒绝授权或请求失败:", error);
  }
};

一些关键注意事项 #

• 如果用户既没有绑定ENS，也拒绝了MetaMask的资料授权，建议显示钱包地址的缩略形式（比如0x1234...abcd）作为 fallback
• IPFS头像地址必须转换为HTTP链接才能在浏览器中正常显示，除了ipfs.io，也可以使用其他公共IPFS网关
• 确保你的页面在HTTPS环境下运行，MetaMask不允许在HTTP页面中调用其接口

内容的提问来源于stack exchange，提问作者Riky Andreas