A aplicação e a prática do SIWE em aplicações Web3

SIWE(Entrar com Ethereum) é um método de autenticação de usuário baseado em Ethereum, semelhante a iniciar uma transação com uma carteira, usado para provar o controle do usuário sobre a carteira. Atualmente, as principais extensões de carteira já suportam amplamente esse método simples de autenticação, bastando assinar as informações na extensão. Este artigo discute principalmente os cenários de assinatura em Ethereum, não abordando outras blockchains.

Cenários de Aplicação do SIWE

O SIWE é principalmente utilizado para resolver problemas de autenticação de endereço de carteira. Se a sua aplicação tiver as seguintes necessidades, pode considerar usar o SIWE:

• Ter um sistema de usuários independente
• É necessário consultar informações relacionadas à privacidade do usuário

Para aplicações que têm como principal função a consulta, como exploradores de blocos, o SIWE pode não ser utilizado.

Embora a conexão da carteira na interface do aplicativo possa indicar a identidade, para chamadas de interface que requerem suporte do backend, passar apenas o endereço não é suficiente, pois o endereço é uma informação pública e pode ser facilmente roubada por outros.

Princípios e Fluxo do SIWE

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

Conectar carteira

Esta é uma operação comum do Web3, conectando a carteira na aplicação através de um plugin de carteira.

Assinatura

Os passos de assinatura incluem obter o valor Nonce, a assinatura da carteira e a verificação da assinatura pelo backend.

1. Obter o valor de Nonce: chame a interface de backend para obter um valor de Nonce aleatório e associe-o ao endereço atual.

2. Construir o conteúdo da assinatura: inclui o valor Nonce, nome de domínio, ID da cadeia, conteúdo da assinatura, etc., utilizando os métodos fornecidos pela carteira para assinar.

3. Enviar assinatura: Envie a assinatura para o backend para verificação.

Obter identificação

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

Guia Prático

Abaixo está uma introdução sobre como integrar rapidamente o SIWE no aplicativo, com o objetivo de retornar um JWT para verificação de identidade do usuário. Nota: este exemplo é apenas para demonstrar o fluxo básico, o uso em ambiente de produção pode apresentar riscos de segurança.

Preparação do Ambiente

Este artigo utiliza Next.js para desenvolver aplicações full stack, sendo necessário preparar o ambiente Node.js.

Instalar dependências

Primeiro, instale o Next.js:

npx create-next-app@14

Após entrar no diretório do projeto, execute:

npm run dev

Instalar dependências relacionadas ao SIWE

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

Configurar Wagmi

Importar WagmiProvider em layout.tsx:

javascript "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 siwe="｛｛" getnonce:="" async="" (address)=""> (aguardar getNonce(endereço)).dados, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verifyMessage: async (message, signature) => { 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 conexão

javascript "use client"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; import React from "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 Iniciar sessão como ${ellipsisAddress}; };

return ( <>

implementação da interface

Interface Nonce

javascript 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(address, nonce); return Response.json({ dados: nonce, }); }

Interface de verificação de mensagens

javascript 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"; // Por favor, use uma chave mais segura e adicione verificação de expiração, etc.

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, }); }

Otimização de desempenho

Para melhorar a velocidade de resposta do login SIWE, recomenda-se utilizar um serviço de nós especializado em vez do nó RPC padrão. Este artigo utiliza o serviço de nós da ZAN, que pode ser obtido no seu console para conexão RPC.

Substituir o RPC padrão do publicClient:

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

Isto pode reduzir significativamente o tempo de validação e aumentar a velocidade da interface.