SIWE: Como implementar a identificação Ethereum para melhorar as funcionalidades do Dapp

SIWE(Entrar com Ethereum) é um método para verificar a identificação do usuário na Ethereum, semelhante ao início de uma transação de carteira, usado para provar o controle do usuário sobre a carteira. O processo de autenticação atual é muito simples, basta assinar as informações no plugin da carteira, e a maioria dos plugins de carteira comuns já oferecem suporte.

Este artigo discute principalmente cenários de assinatura no Ethereum, sem abordar outras blockchains públicas como Solana, SUI, etc.

Quando é necessário usar o 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 à identificação do usuário

Mas se o seu Dapp for principalmente uma funcionalidade de consulta, como uma aplicação semelhante ao etherscan, então pode não precisar de SIWE.

Você pode se perguntar, ao conectar a carteira no Dapp, não está comprovada a posse da carteira? Essa afirmação é parcialmente correta. Para o front-end, a conexão da carteira realmente indica a identificação, mas para chamadas de API que necessitam de suporte do back-end, apenas passar o endereço não é suficiente, pois o endereço é uma informação pública e qualquer um pode "tomar emprestado".

Princípio e Processo do SIWE

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

conectar carteira

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

assinatura

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

Primeiro, é necessário chamar a interface de backend para obter o valor Nonce. Após receber a solicitação, o backend gerará um valor Nonce aleatório e o associará 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, incluindo o valor de Nonce, o nome de domínio, o ID da cadeia, o conteúdo da assinatura, etc., geralmente utilizando o método de assinatura fornecido pela carteira.

Depois de construir a assinatura, envie-a para o backend.

obter identificação

Após a verificação da assinatura no backend, será retornada a respetiva identificação do utilizador, como o JWT. Quando o frontend enviar pedidos ao backend, deve incluir o endereço correspondente e a identificação, para provar a propriedade da carteira.

Prática SIWE

Agora existem muitos componentes e bibliotecas que suportam a rápida integração de conexões de carteira e SIWE. Vamos fazer uma operação prática, com o objetivo de permitir que a sua Dapp retorne um JWT para a autenticação do utilizador.

Atenção, este exemplo é apenas para introduzir o fluxo básico do SIWE, o uso em ambientes de produção pode apresentar problemas de segurança.

trabalho preparatório

Usamos Next.js para desenvolver aplicações e precisamos preparar o ambiente Node.js. A vantagem de usar Next.js é que podemos desenvolver projetos full-stack diretamente, sem a necessidade de separar o front-end e o back-end.

instalar dependências

Primeiro, instale o Next.js, e execute no diretório do projeto:

npx create-next-app@14

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

npm run dev

Depois, acesse localhost:3000 e você verá o projeto básico do Next.js em funcionamento.

Instalar dependências relacionadas ao SIWE

Usamos Ant Design Web3 para implementar SIWE, porque é gratuito, mantido ativamente, a experiência de uso é semelhante à de uma biblioteca de componentes comum e suporta SIWE.

Digite no terminal:

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

introduzir Wagmi

A SIWE do Ant Design Web3 depende da biblioteca Wagmi. Importamos o Provider relevante em layout.tsx para que todo o projeto possa usar os Hooks fornecidos pela Wagmi.

Primeiro, defina a configuração do WagmiProvider:

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"; import React from "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)=""> (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, ｝｝ wallets={[} MetaMask(), WalletConnect(), TokenPocket({ grupo: "Popular", }), OkxWallet(), ]} queryClient={queryClient} > {children} ); };

export default WagmiProvider;

Utilizamos o Provider fornecido pelo Ant Design Web3 e definimos algumas interfaces do SIWE, cuja implementação será apresentada posteriormente.

Em seguida, adicione o botão de conectar a carteira, como entrada de conexão no front-end.

Até aqui, já conectámos de forma simples o SIWE.

Em seguida, defina um botão de conexão para conectar a carteira e assinar:

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 ( <> {(conta) => ( <connectbutton.signin accountcomponent="{false}" renderbuttontext="{(dom)" ==""> renderSignBtnText(dom, account)} /> )} <connectbutton.signin> {jwt} ); }

Desta forma, conseguimos implementar uma estrutura de login SIWE mais simples.

Implementação da interface

O SIWE precisa de algumas interfaces para ajudar o backend a validar a identificação dos usuários. Agora vamos implementar isso de forma simples.

Nonce

Nonce é utilizado para fazer com que a carteira gere um conteúdo de assinatura diferente a cada vez que assina, aumentando a confiabilidade. A geração do Nonce precisa estar associada ao endereço fornecido pelo usuário, para aumentar a precisão da validação.

A implementação do Nonce é bastante direta, primeiro gera-se uma string aleatória ( composta por letras e números ), e depois associa-se o nonce ao endereço:

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

signMessage

signMessage é usado para assinar conteúdo, geralmente realizado através de um plugin de carteira, normalmente só precisamos especificar o método. Neste exemplo, utilizamos o método de assinatura do Wagmi.

verifyMessage

Após o usuário assinar, é necessário enviar o conteúdo antes da assinatura juntamente com a assinatura para validação no backend. O backend analisa o conteúdo a partir da assinatura para comparação; se coincidir, significa que a validação foi aprovada.

Além disso, é necessário verificar a segurança do conteúdo da assinatura, como verificar se o valor Nonce corresponde ao que foi atribuído ao usuário. Após a verificação, retorne o JWT do usuário para a validaçã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 a verificação de expiração correspondente, 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); console.log("nonce", nonce, address, addressMap);

// Verificar se o valor nonce é consistente se (!nonce || nonce !== addressMap.get(address)) { throw new Error("Invalid nonce"); }

// Verificar o conteúdo da assinatura const valid = await publicClient.verifySiweMessage({ mensagem, endereço, assinatura, });

se (!valid) { throw new Error("Invalid signature"); }

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

Assim, uma Dapp básica implementando o login SIWE foi desenvolvida.

Sugestões de otimização

Ao realizar o login SIWE, se usar o nó RPC padrão, o processo de verificação pode levar quase 30 segundos. Portanto, é altamente recomendável usar um serviço de nó dedicado para melhorar o tempo de resposta da interface.

Após obter a conexão HTTPS RPC da rede principal Ethereum, substitua o RPC padrão de publicClient no código:

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

Após a substituição, o tempo de verificação pode ser significativamente reduzido e a velocidade da interface melhorada claramente.