SIWE: Torne a autenticação da sua Dapp mais segura e confiável

SIWE(Entrar com Ethereum) é um método de verificação da identidade do usuário na Ethereum, semelhante a uma transação iniciada pela carteira, usado para provar que o usuário tem controle sobre essa carteira. Atualmente, a maioria dos plugins de carteira já suporta esse método de autenticação simples, bastando assinar as informações na carteira.

Este artigo discute principalmente o cenário de assinatura SIWE na Ethereum, sem envolver outras blockchains públicas como Solana, SUI, etc.

Quando é necessário usar o SIWE?

Se a sua Dapp tem os seguintes requisitos, pode considerar usar SIWE:

• Ter um sistema de utilizadores independente
• É necessário consultar informações relacionadas à identificação do usuário

Para Dapps( com foco na funcionalidade de consulta, como exploradores de blocos), pode não ser necessário o SIWE.

Você pode se perguntar, ao conectar a carteira ao Dapp, isso não indicaria a propriedade da carteira? Essa afirmação não é completamente precisa. Para o frontend, a conexão da carteira realmente pode provar a identificação, mas para chamadas de interface que requerem suporte de backend, apenas transmitir o endereço não pode verificar a identificação, pois o endereço é uma informação pública.

Princípio e Processo do SIWE

O processo do SIWE pode ser resumido em três etapas: conectar a carteira - assinar - obter identificação. Vamos entender melhor essas três etapas:

conectar carteira

Esta é uma operação comum de Web3, que permite conectar a carteira do usuário ao Dapp através de um plugin de carteira.

assinatura

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

Primeiro, é necessário chamar a interface de backend para obter o valor de Nonce. O backend irá gerar um Nonce aleatório e associá-lo ao endereço atual, preparando-se para a assinatura subsequente.

Após obter o valor de Nonce no front-end, construa o conteúdo da assinatura, que geralmente inclui Nonce, nome de domínio, ID da cadeia e conteúdo da assinatura, entre outros. Em seguida, use o método de assinatura fornecido pela carteira para assinar o conteúdo.

Por fim, envie a assinatura para o backend para verificação.

obter identificação

Após a validação da assinatura pelo backend, será retornada a correspondente identificação do usuário, que geralmente é um token JWT. O frontend deve incluir o endereço e a identificação na solicitação subsequente para provar a propriedade da carteira.

Prática SIWE

Podemos implementar a funcionalidade SIWE através de operações práticas, com o objetivo de permitir que o Dapp retorne JWT para verificação da identificação do usuário. É importante notar que o seguinte demo é apenas para demonstrar o fluxo básico, podendo haver riscos de segurança em ambientes de produção.

trabalho de preparação

Este artigo utiliza Next.js para desenvolver aplicações, sendo necessário preparar o ambiente Node.js. A vantagem de usar Next.js é que se pode desenvolver projetos full-stack diretamente, sem a necessidade de separar o front-end e o back-end.

Instalação de dependências

Primeiro, instale o Next.js:

npx create-next-app@14

Após concluir a instalação conforme as instruções, entre no diretório do projeto e inicie o projeto:

npm run dev

Instalar dependências relacionadas ao SIWE

Utilizamos a biblioteca de componentes Ant Design Web3 para implementar a conexão da carteira e a funcionalidade SIWE:

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

Introduzindo Wagmi

A SIWE do Ant Design Web3 depende da biblioteca Wagmi. Introduzimos o Provider relevante no layout.tsx, permitindo que todo o projeto utilize os Hooks fornecidos pelo Wagmi.

Primeiro defina a configuração do WagmiProvider:

jsx "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)=""> (await getNonce(address)).data, 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, ｝｝ carteiras={[} MetaMask(), WalletConnect(), TokenPocket({ grupo: "Popular", }), OkxWallet(), ]} queryClient={queryClient} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

export default WagmiProvider;

Depois adicione o botão de conectar carteira:

jsx "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 { endereço } = conta ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; retornar Iniciar sessão como ${ellipsisAddress}; };

return ( <>

Assim, implementamos uma estrutura de login SIWE simples.

implementação da interface

Nonce

Nonce é usado para gerar conteúdos de assinatura diferentes a cada vez, aumentando a confiabilidade da assinatura. O código de implementação é o seguinte:

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

verifyMessage

O backend precisa validar o conteúdo da assinatura e retornar o JWT para a verificação de permissões subsequente:

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("Invalid nonce"); }

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 login do SIWE, recomenda-se utilizar serviços de nós especializados para acelerar o tempo de resposta da interface. Pode-se usar serviços de nós como o ZAN, obtendo a conexão RPC correspondente e substituindo o RPC padrão no código:

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

Desta forma, é possível reduzir significativamente o tempo de validação e aumentar a velocidade da interface.