SIWE: Implementação simples de login Ethereum

SIWE(Iniciar sessão com Ethereum) é um método para verificar a identidade do usuário na Ethereum, semelhante à iniciação de transações por uma carteira, indicando que o usuário tem controle sobre essa carteira. Atualmente, o processo de verificação de identidade é muito simples, basta assinar as informações no plugin da carteira, e a maioria dos plugins de carteira comuns suporta isso.

Este artigo discute cenários de assinatura na Ethereum, não envolvendo outras blockchains como Solana ou SUI.

O projeto precisa de 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 à privacidade 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 ser necessário SIWE.

Embora a conexão da carteira na Dapp represente a propriedade da carteira, isso só é válido para o front-end. Para chamadas de interface que requerem suporte do back-end, basta passar o endereço não é suficiente, pois o endereço é uma informação pública e qualquer pessoa pode "emprestar".

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, conectar a sua carteira na 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.

Para obter o valor Nonce, é necessário chamar a interface do backend. Após receber o pedido, o backend gera um valor Nonce aleatório e o associa ao endereço atual, preparando-se para a assinatura subsequente.

Depois de obter o valor Nonce no front-end, construa o conteúdo da assinatura, incluindo o valor Nonce, o nome de domínio, o ID da cadeia, o conteúdo da assinatura, etc. Normalmente, utiliza-se o método de assinatura fornecido pela carteira para assinar o conteúdo.

Após construir a assinatura, envie-a para o backend.

Obter identificação de identidade

Após a verificação da assinatura no backend ser bem-sucedida, será retornada a identificação do usuário correspondente, como o JWT. Quando o frontend enviar uma solicitação ao backend posteriormente, deverá incluir o endereço e a identificação correspondente, o que pode provar a propriedade da carteira.

Prática

Vamos desenvolver uma estrutura simples de login SIWE usando Next.js. Esta demonstração destina-se apenas a apresentar o fluxo básico do SIWE, podendo haver problemas de segurança em ambientes de produção.

Trabalho de preparação

Primeiro, instale o Next.js:

npx create-next-app@14

Siga as instruções para concluir a instalação. Após entrar no diretório do projeto, execute:

npm run dev

Aceda a localhost:3000 para ver um projeto básico de Next.js.

Instalar dependências relacionadas ao SIWE

Vamos usar o Ant Design Web3, porque é gratuito, mantido ativamente e a experiência de uso é semelhante a uma biblioteca de componentes comum, suportando SIWE.

Execute o seguinte comando para instalar as dependências:

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

Introduzir Wagmi

O SIWE do Ant Design Web3 depende da biblioteca Wagmi. Importe os Providers relevantes em layout.tsx:

javascript "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 }) =\u003e { 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" }); }, verificarMensagem: async (mensagem, assinatura) => { 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} > {children} ); };

export default WagmiProvider;

Depois, defina um botão de ligaçã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

Nonce

Nonce é usado para aumentar a confiabilidade da assinatura. Implementação da seguinte forma:

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

Implementação da verificação de assinatura no backend:

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

se (!nonce || nonce !== addressMap.get(address)) { throw new Error("Nonce inválido"); }

const valid = await publicClient.verifySiweMessage({ mensagem, endereço, assinatura, });

if (!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 melhorar a velocidade de resposta da interface, recomenda-se o uso de serviços de nós dedicados. Por exemplo, pode-se usar o serviço de nós da ZAN, substituindo o RPC padrão do publicClient:

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

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