Ethereum identificação: Guia de implementação SIWE

SIWE(Entrar com Ethereum) é um método de autenticação de utilizador baseado em Ethereum, semelhante à execução de transações por uma carteira, utilizado para provar o controle do utilizador sobre uma carteira específica. Atualmente, a maioria dos plugins de carteira já suporta este método simples de autenticação, que apenas requer a assinatura de informações no plugin.

Este artigo irá focar na implementação de SIWE no Ethereum, não abordando outras blockchains públicas como Solana, SUI, etc.

Cenários de Uso do SIWE

Se a sua aplicação descentralizada (Dapp) tiver os seguintes requisitos, pode considerar usar o SIWE:

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

Para aplicações baseadas em consulta como exploradores de blocos (, pode não ser necessário usar SIWE.

Embora a identificação possa ser indicada através da conexão da carteira no Dapp, isso é válido apenas para a parte frontal. Para chamadas de interface que requerem suporte de backend, passar apenas a informação do endereço não é suficiente para provar a identificação, pois o endereço é uma informação pública.

Funcionamento do SIWE

O processo do 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 do usuário no Dapp 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 no backend.

O backend gera um valor nonce aleatório e o associa ao endereço, preparando-se para a assinatura subsequente. O frontend, após obter o valor nonce, constrói o conteúdo da assinatura, incluindo o valor nonce, o nome de domínio, o ID da cadeia e outras informações, utilizando o método fornecido pela carteira para assinar. Por fim, a assinatura é enviada ao backend para verificação.

obter identificação

Após a validação da assinatura no backend, retorna a identificação do usuário ### como JWT (. Nas solicitações subsequentes do frontend, deve ser incluído o endereço e a identificação para provar a propriedade da carteira.

![Manual de uso do SIWE: Como tornar o seu Dapp mais poderoso?])https://img-cdn.gateio.im/webp-social/moments-9e9c9e786391f84b004cd8450a29acce.webp(

Exemplo de implementação do SIWE

A seguir, será demonstrado como implementar a funcionalidade SIWE em um projeto Nextjs, permitindo que o Dapp retorne JWT para verificação de identificação do usuário.

) Preparação do ambiente

Este exemplo é desenvolvido com Nextjs, e requer um ambiente Node.js. Com o Nextjs, é fácil desenvolver projetos full-stack, sem necessidade de separar front-end e back-end.

Instalar dependências

Primeiro instale o Nextjs:

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

Acesse localhost:3000 para ver o projeto básico do Nextjs.

Instalar dependências relacionadas ao SIWE

Vamos usar o Ant Design Web3 para implementar a conexão da carteira, que é gratuito, mantido continuamente e oferece uma experiência de uso semelhante a uma biblioteca de componentes comum, suportando a funcionalidade SIWE.

Instalar dependências relacionadas:

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

configurar Wagmi

Em layout.tsx, importar WagmiProvider:

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 )message, signature( => { const jwt = )await verifyMessage(message, signature().data; setJwt)jwt(; return !!jwt; }, ｝｝ chains={)} transports=｛｛ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ wallets={[ MetaMask)(, WalletConnect)(, TokenPocket){ grupo: "Popular", }(, OkxWallet)(, ]} queryClient={queryClient} > {children} ); };

export default WagmiProvider;

![Manual de uso do SIWE: Como tornar seu Dapp mais poderoso?])https://img-cdn.gateio.im/webp-social/moments-138fc08a9148099755d1fe162292922f.webp(

) botão de conexão

Adicionar botões para conectar a carteira e assinar:

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 Iniciar sessão como ${ellipsisAddress}; };

return ) <> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton>

![Manual de uso do SIWE: Como tornar seu Dapp mais poderoso?])https://img-cdn.gateio.im/webp-social/moments-355ea961b315585f7d217cbcf6a3fa69.webp(

) implementar a interface de backend

Interface Nonce

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

)# Verificação da mensagem interface

Verificar a assinatura e devolver 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 { assinatura, mensagem } = 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)"Invalid signature"(; }

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

![Manual de uso do SIWE: como tornar seu Dapp mais poderoso?])https://img-cdn.gateio.im/webp-social/moments-53c03d1cb26f29a9d739e3d1aa0816df.webp(

Otimização de desempenho

Para aumentar a velocidade de validação, recomenda-se o uso de serviços de nós especializados. Tomando como exemplo o serviço de nós ZAN, após obter a conexão HTTPS RPC da rede principal Ethereum, substitua o RPC padrão do publicClient:

typescript 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 de resposta da interface.

![Manual de utilização do SIWE: Como tornar a sua Dapp mais poderosa?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

![Manual de uso do SIWE: Como tornar seu Dapp mais poderoso?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

![Manual de utilização do SIWE: Como tornar a sua Dapp mais poderosa?])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(