SIWE: Uma poderosa ferramenta de login Ethereum

SIWE (Iniciar sessão com Ethereum) é um método de verificação da identidade do usuário na Ethereum. Semelhante à realização de uma transação, ele prova o controle do usuário sobre a carteira através de uma assinatura. Atualmente, a maioria dos plugins de carteira populares já suporta este método simples de autenticação.

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

Quando é necessário o SIWE?

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

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

Para Dapp( que fornece principalmente funcionalidades de consulta, como exploradores de blocos ), pode não ser necessário SIWE.

Embora a conexão através da carteira possa provar a identidade no front-end, para chamadas de API que requerem suporte do back-end, apenas transmitir o endereço não é suficiente, pois o endereço é uma informação pública que qualquer pessoa pode usar.

Princípios e Processos do SIWE

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

Conectar carteira

Esta é uma operação comum em aplicações Web3, conectando a carteira do utilizador através do plugin da carteira.

assinatura

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

Primeiro, obtenha o valor Nonce gerado aleatoriamente do backend, que será associado ao endereço atual.

Após obter o valor Nonce no front-end, construa o conteúdo da assinatura, incluindo Nonce, nome de domínio, ID da cadeia e outras informações, e então utilize o método de assinatura da carteira para assinar.

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

Obter identificação

Após a validação da assinatura no backend, será retornado o identificador de identidade do usuário (, como JWT). Nas solicitações subsequentes do frontend, traga o endereço e o identificador de identidade, para provar a propriedade da carteira.

Prática SIWE

Abaixo, vamos praticar o fluxo básico do SIWE através de um simples Demo, com o objetivo de permitir que o Dapp retorne um JWT para verificação de identidade.

Nota: Este Demo é apenas para demonstrar o fluxo básico, o uso em ambiente de produção pode apresentar riscos de segurança.

preparação

Usamos Next.js para desenvolver aplicações full stack, e precisamos preparar o ambiente Node.js.

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 e inicie:

npm run dev

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

Instalar dependências relacionadas ao SIWE

Usamos o Ant Design Web3 para conectar a carteira e implementar a funcionalidade SIWE:

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

Introduzir Wagmi

Introduza WagmiProvider em layout.tsx:

jsx "use client"; import { getNonce, verifyMessage } from "@/app/api"; import { 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)=""> (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;

Depois, adicione o botão de conectar a carteira:

jsx "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 ( <>

Dessa forma, foi implementada uma estrutura básica de login SIWE.

implementação da interface

Agora vamos implementar algumas interfaces necessárias para o backend.

Nonce

Gerar um Nonce aleatório e associá-lo 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 (!address) { throw new Error("Invalid address"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ dados: nonce, }); }

verifyMessage

Verificar a assinatura e retornar o JWT:

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

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

Até aqui, uma Dapp básica de login SIWE foi desenvolvida.

Otimização de desempenho

Para aumentar a velocidade de validação, recomenda-se o uso de serviços de nó especializados. Aqui usamos o serviço de nó da ZAN, substituindo o RPC padrão do publicClient:

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

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