SIWE: A tecnologia chave para aprimorar as funcionalidades de Dapp

SIWE (Sign-In with Ethereum) é um método de verificação de identidade do usuário na Ethereum, semelhante a iniciar uma transação de carteira, provando que o usuário tem controle sobre a carteira. O método de autenticação atual é muito simples, basta assinar as informações no plugin da carteira, e a maioria dos plugins de carteira comuns já oferece suporte.

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

É necessário SIWE

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

• Ter seu próprio sistema de usuários
• É 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, pode não usar o SIWE.

Você pode se perguntar, ao conectar a carteira no Dapp, não está provando a propriedade da carteira? Essa afirmação é parcialmente correta. Do ponto de vista do front-end, a conexão da carteira realmente indica a identidade, mas para chamadas de interface que precisam 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 "pegar emprestado".

Princípio e processo do SIWE

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

Conectar carteira

Conectar a carteira é uma operação comum do Web3, e através de plugins de carteira é possível conectar a carteira em Dapp.

assinatura

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

Para obter o valor Nonce, é necessário chamar a interface do backend. 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 Nonce no front-end, é necessário construir o conteúdo da assinatura, incluindo o valor Nonce, o 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.

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

Obter Identificação

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

Prática

Existem muitos componentes e bibliotecas que suportam a conexão rápida com carteiras e SIWE. O nosso objetivo é permitir que o Dapp retorne JWT para verificação de identidade do usuário. Nota: esta demonstração é apenas para apresentar o fluxo básico do SIWE, o uso em ambientes de produção pode apresentar problemas de segurança.

trabalho preparatório

Este artigo utiliza Next.js para desenvolver aplicações, necessitando do ambiente Node.js. A vantagem de usar Next.js é que é possível desenvolver projetos full-stack diretamente, sem precisar dividi-los em dois projetos, front-end e back-end.

Instalar dependências

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

npx create-next-app@14

Após a instalação de acordo com as instruções, entre no diretório do projeto e execute:

npm run dev

De acordo com o aviso do terminal, acesse localhost:3000 para ver o projeto básico de Next.js.

Instalação de dependências relacionadas ao SIWE

O SIWE necessita de um sistema de login, portanto é necessário conectar a carteira. Aqui estamos a usar Ant Design Web3, porque:

1. Totalmente gratuito e mantido ativamente
2. Como uma biblioteca de componentes Web3, a experiência de uso é semelhante à de uma biblioteca de componentes comum, sem carga mental adicional.
3. Suporte SIWE

Executar 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. Precisamos importar o Provider relacionado em layout.tsx para que todo o projeto possa usar os Hooks fornecidos pelo 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"; 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={[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;

Em seguida, adicione o botão de conectar carteira, assim foi adicionado um ponto de entrada para conexão na interface. Até aqui, o SIWE já foi integrado, o processo é muito simples.

Em seguida, defina o botão de conexão, implemente a conexão da carteira e a assinatura:

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

Desta forma, foi implementada uma estrutura de login SIWE muito simples.

implementação de interface

SIWE precisa de algumas interfaces para ajudar o backend a verificar a identidade do usuário. Vamos implementar isso de forma simples agora.

Nonce

Nonce é utilizado para garantir que o conteúdo gerado pelo wallet ao assinar seja diferente a cada vez, aumentando a confiabilidade da assinatura. A geração do Nonce deve estar associada ao endereço fornecido pelo usuário, aumentando a precisão da verificação.

A implementação do Nonce é muito direta, primeiro gera uma string aleatória ( composta por letras e números ), em seguida, estabelece a ligação entre nonce e 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("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údos, esta parte da funcionalidade é normalmente realizada por plugins de carteira, geralmente não precisamos configurar, apenas precisamos especificar o método. Neste demo, usamos o método de assinatura do Wagmi.

verificarMensagem

Após o usuário assinar, é necessário enviar o conteúdo anterior à assinatura e a assinatura para a verificação no backend. O backend irá extrair o conteúdo correspondente da assinatura para comparação; se for igual, isso indica que a verificação foi bem-sucedida.

Além disso, é necessário realizar uma verificação de segurança do conteúdo da assinatura, como se o valor Nonce no conteúdo da assinatura é o mesmo que o enviado ao usuário, entre outros. Após a verificação bem-sucedida, é necessário retornar o JWT do usuário para a validação de permissões subsequente, o código de exemplo é o seguinte:

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.

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 do nonce é consistente se (!nonce || nonce !== addressMap.get(address)) { throw new Error("Nonce inválido"); }

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

Com isso, uma Dapp básica para implementar o login SIWE foi desenvolvida.

Sugestões de Otimização

A autenticação SIWE usando o nó RPC padrão pode levar cerca de 30 segundos, por isso é altamente recomendável usar um serviço de nó dedicado para melhorar o tempo de resposta da interface. Este artigo utiliza o serviço de nó da ZAN, que pode ser obtido no console de serviços de nó da ZAN.

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

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

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