Guia de Uso do SIWE: Melhore as Funcionalidades da Sua Dapp

SIWE (Sign-In with Ethereum) é uma forma de verificar a identidade do usuário na Ethereum, semelhante a iniciar uma transação, provando o controle do usuário sobre a carteira. Atualmente, a maioria dos plugins de carteira suporta essa forma simples de autenticação, que só requer uma assinatura no plugin.

Este artigo discute principalmente os cenários de assinatura na Ethereum, não envolvendo outras blockchains públicas como Solana, SUI, etc.

O seu projeto precisa de SIWE?

Se a sua Dapp tiver as seguintes necessidades, pode considerar usar o SIWE:

• Ter o seu próprio sistema de utilizadores
• É necessário consultar informações relacionadas à privacidade do usuário

Mas se o seu Dapp é principalmente uma funcionalidade de consulta, semelhante ao etherscan, então você pode não usar o SIWE.

Você pode perguntar, ao conectar a carteira no Dapp, isso não indica a propriedade da carteira? Essa afirmação não é totalmente precisa. Para o front-end, conectar a carteira realmente indica a identidade, mas para chamadas de interface que precisam de suporte de back-end, apenas passar o endereço não é suficiente para provar a identidade, pois o endereço é uma informação pública que qualquer um pode usar.

O princípio e o processo do SIWE

O processo do SIWE pode ser resumido em três etapas: conectar a carteira, assinar, obter a identificação de identidade.

Conectar carteira

Esta é uma operação comum do Web3, conectando a carteira na Dapp através do plugin da carteira.

assinatura

Os passos de assinatura do SIWE incluem obter o valor Nonce, assinatura da carteira e verificação da assinatura no backend.

Para obter o valor Nonce, é necessário chamar a interface de backend. O backend gera um valor Nonce aleatório e o associa ao endereço atual, preparando-se para a assinatura subsequente.

Após obter o valor Nonce no front-end, construa o conteúdo da assinatura, incluindo o valor Nonce, o nome de domínio, o ID da cadeia e o conteúdo da assinatura, normalmente utilizando o método fornecido pela carteira para assinar.

Após construir a assinatura, envie-a para o backend.

Obter identificação

Após a verificação da assinatura no backend, retorna-se a identificação do usuário, como JWT. O frontend, em requisições subsequentes, deve incluir o endereço e a identificação do usuário, para provar a propriedade da carteira.

Prática

Vamos desenvolver uma aplicação full stack com Next.js, integrando a funcionalidade SIWE. Note que esta demonstração serve apenas para mostrar o fluxo básico e não é adequada para uso em ambiente de produção.

trabalho de preparação

Certifique-se de que o ambiente Node.js está instalado.

Instalar dependências

Primeiro, instale o Next.js:

npx create-next-app@14

Siga as instruções para concluir a instalação.

Entre no diretório do projeto, execute o projeto:

npm run dev

Aceder a localhost:3000 permite ver um projeto básico de Next.js.

Instalar dependências relacionadas ao SIWE

Escolhemos usar o Ant Design Web3, porque é gratuito, mantido continuamente, tem uma boa experiência de uso e suporta SIWE.

Instalar dependências:

npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

Introduzir Wagmi

Importar o Provider relevante no layout.tsx:

typescript "use client"; import { getNonce, verifyMessage } from "@/app/api"; importar { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } de "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; importar React de "react"; import { createSiweMessage } from "viem/siwe"; import { http } from "wagmi"; import { JwtProvider } from "./JwtProvider";

const YOUR_WALLET_CONNECT_PROJECT_ID = "c07c0051c2055890eade3556618e38a6"; const queryClient = new QueryClient();

const WagmiProvider: React.FC = ({ children }) => { const [jwt, setJwt] = React.useState(null);

return ( <wagmiweb3configprovider siweconfig="｛｛" getnonce:="" async="" (address)=""> (aguardar getNonce(endereço)).dados, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verifyMessage: async (mensagem, assinatura) => { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt); return !!jwt; }, ｝｝ chains={[Mainnet]} transports=｛｛ [Mainnet.id]: http(), ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ wallets={[ MetaMask(), WalletConnect(), TokenPocket({ grupo: "Popular", }), OkxWallet(), ]} queryClient={queryClient} > {children} ); };

export default WagmiProvider;

Adicionar botão de conectar carteira:

typescript "use client"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; importar React de "react"; import { JwtProvider } from "./JwtProvider";

export default function App() { const jwt = React.useContext(JwtProvider);

const renderSignBtnText = ( defaultDom: React.ReactNode, conta?: Conta ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; retornar Entrar como ${ellipsisAddress}; };

return ( <>

implementação da interface

Nonce

Gerar Nonce aleatório e associá-lo ao endereço:

typescript import { randomBytes } from "crypto"; import { addressMap } from "../cache";

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const address = searchParams.get("address");

se (!endereço) { throw new Error("Endereço inválido"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(endereço, nonce); return Response.json({ dados: nonce, }); }

verificarMensagem

Validar a assinatura e retornar o JWT:

typescript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt from "jsonwebtoken"; import { parseSiweMessage } from "viem/siwe"; import { addressMap } from "../cache";

const JWT_SECRET = "your-secret-key";

const publicClient = createPublicClient({ cadeia: mainnet, transporte: http(), });

export async function POST(request: Request) { const { signature, message } = await request.json();

const { nonce, address = "0x" } = parseSiweMessage(message);

se (!nonce || nonce !== addressMap.get(address)) { throw new Error("Nonce inválido"); }

const valid = await publicClient.verifySiweMessage({ mensagem, endereço, assinatura, });

se (!valid) { throw new Error("Assinatura inválida"); }

const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ dados: token, }); }

Sugestões de otimização

Para aumentar a velocidade de verificação, recomenda-se o uso de serviços de nó especializados. Você pode usar o serviço de nó da ZAN, obter a conexão RPC e substituir o RPC padrão no código.

typescript const publicClient = createPublicClient({ cadeia: mainnet, transporte: http('), //Serviço RPC do nó ZAN });

Isso pode aumentar significativamente a velocidade de resposta da interface.