Laravel+JavaScript环境下，Reown AppKit签名消息后如何获取钱包地址？

因为你使用了@reown/appkit-adapter-wagmi，可以直接通过Wagmi客户端的API来获取钱包地址，不管是连接后还是签名操作完成后，方法都是一致的。

核心解决方案 #

通过Wagmi Adapter获取客户端实例，两种方式获取地址：

1. 监听账户连接状态：实时获取钱包连接/断开状态及地址
2. 主动查询账户：在需要的时机（比如签名完成后）直接获取地址

修改后的完整代码 #

JavaScript 部分

import { createAppKit } from '@reown/appkit'
import { mainnet, arbitrum } from '@reown/appkit/networks'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

const projectId = 'PROJECT_ID_HERE'

export const networks = [mainnet, arbitrum]

const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks
})

const metadata = {
  name: 'AppKit',
  description: 'AppKit Example',
  url: 'https://example.com',
  icons: ['https://avatars.githubusercontent.com/u/179229932']
}

const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  metadata,
  projectId,
  features: {
    analytics: true
  }
})

// 获取Wagmi客户端实例
const wagmiClient = wagmiAdapter.getClient()

// 1. 监听账户连接状态变化，实时获取地址
wagmiClient.watchAccount((account) => {
  if (account.isConnected) {
    console.log('已连接钱包地址:', account.address)
    // 示例：将地址发送到Laravel后端
    fetch('/api/wallet/verify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
      },
      body: JSON.stringify({
        address: account.address
      })
    })
    .then(res => res.json())
    .then(data => console.log('后端响应:', data))
    .catch(err => console.error('请求失败:', err))
  } else {
    console.log('钱包未连接')
  }
})

// 2. 主动获取地址的工具函数（可在签名完成后调用）
const getCurrentWalletAddress = async () => {
  const account = await wagmiClient.getAccount()
  return account.isConnected ? account.address : null
}

// 示例：消息签名并获取地址
const signAndGetAddress = async () => {
  try {
    // 执行消息签名
    const signature = await wagmiClient.signMessage({
      message: '确认此操作来自您的钱包'
    })
    console.log('签名结果:', signature)
    
    // 签名完成后获取地址
    const address = await getCurrentWalletAddress()
    if (address) {
      console.log('签名对应的钱包地址:', address)
      // 可将地址和签名一起发送到后端验证
    }
  } catch (error) {
    console.error('签名失败:', error)
  }
}

// 绑定按钮事件
const openConnectModalBtn = document.getElementById('open-connect-modal')
const openNetworkModalBtn = document.getElementById('open-network-modal')
// 可选：添加签名按钮事件
const signMessageBtn = document.getElementById('sign-message-btn')

openConnectModalBtn.addEventListener('click', () => modal.open())
openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' }))
signMessageBtn?.addEventListener('click', signAndGetAddress)

HTML 部分（新增签名按钮示例）

<button id="open-connect-modal" class="bg-blue-600 text-white px-4 py-2 rounded">Login with Wallet</button>
<button id="sign-message-btn" class="bg-green-600 text-white px-4 py-2 rounded mt-2">Sign Message</button>

关键说明 #

• Wagmi Client 核心作用：wagmiAdapter.getClient() 获取的客户端包含所有Web3操作能力，包括账户管理、签名、链切换等
• 监听账户状态：watchAccount 会在钱包连接/断开、地址变化时自动触发回调，适合实时更新UI或同步状态到后端
• Laravel 后端适配：发送请求时必须携带Laravel的CSRF令牌，通过页面meta标签获取即可
• 签名后获取地址：签名操作依赖已连接的钱包，所以签名完成后直接调用getAccount就能拿到对应地址，无需额外操作

内容的提问来源于stack exchange，提问作者John Tuks