SIWE: uma poderosa ferramenta para melhorar a identificação de Dapps

SIWE(Iniciar sessão com Ethereum) é um método para verificar a identidade do usuário na Ethereum, semelhante ao início de uma transação, provando o controle do usuário sobre a carteira. Atualmente, a maioria dos plugins de carteira populares já suporta este método simples de autenticação, bastando assinar as informações no plugin.

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

Quando é necessário usar SIWE?

Se a sua Dapp tiver as seguintes necessidades, pode considerar usar SIWE:

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

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

Embora a ligação da carteira na Dapp pareça ter provado a identificação, isso é válido apenas para o front-end. Para as chamadas de interface que requerem suporte do back-end, apenas passar o endereço não é suficiente, pois o endereço é informação pública e fácil de ser falsificada.

Princípios e Fluxo do SIWE

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

conectar carteira

Esta é uma operação comum do Web3, que conecta a carteira do utilizador 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 back-end.

Primeiro, é necessário chamar a interface de back-end para obter o valor de Nonce. O back-end 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, constrói-se o conteúdo da assinatura, que geralmente inclui o valor de Nonce, o domínio, o ID da cadeia e o conteúdo da assinatura, entre outros. Em seguida, utiliza-se o método 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 verificação de assinatura no back-end ser bem-sucedida, será retornada a identificação do usuário, como JWT. Nas solicitações subsequentes do front-end, deve-se incluir o endereço e a identificação para provar a propriedade da carteira.

Prática SIWE

Vamos desenvolver uma aplicação SIWE simples usando Next.js, com o objetivo de permitir que o Dapp retorne um JWT para autenticação. Note que esta demonstração é apenas para apresentar o processo básico, podendo haver riscos de segurança em um ambiente de produção.

trabalho de preparação

Precisamos preparar o ambiente Node.js e usar o Next.js para desenvolver projetos full stack.

instalar 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 execute:

npm run dev

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

Instalar dependências relacionadas ao SIWE

Vamos usar o Ant Design Web3, que é gratuito, mantido continuamente, tem uma experiência de uso semelhante a uma biblioteca de componentes comum e suporta SIWE. O comando de instalação é o seguinte:

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

introduzir Wagmi

Importar WagmiProvider em layout.tsx:

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

export default WagmiProvider;

Depois, adicione o botão de conectar carteira:

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

return ( <>

Até aqui, já implementámos a estrutura básica de login SIWE.

implementação da interface

Agora vamos implementar a interface de verificação de identidade do usuário no backend.

Nonce

Nonce é utilizado para aumentar a fiabilidade da assinatura. Geramos uma string aleatória e estabelecemos uma associação com o 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 é geralmente realizado por plugins de carteira, usamos o método de assinatura do Wagmi.

verifyMessage

O backend precisa verificar o conteúdo da assinatura e realizar a verificação de segurança:

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 verificação de expiração, etc.

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

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

se (!válido) { 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 validação, recomenda-se usar um serviço de nó especializado. Pode utilizar o serviço de nó ZAN, obter a conexão HTTPS RPC e substituir o RPC padrão no código.

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

Isto reduzirá significativamente o tempo de validação e melhorará a velocidade da interface.