SIWE: Um método de identificação mais poderoso para a sua DApp

SIWE(Entrar 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 suporta esse método de autenticação simples, que só requer a assinatura de informações no plugin. Este artigo discute principalmente cenários de assinatura na Ethereum, sem abordar outras blockchains.

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 com a privacidade do utilizador

Mas se o seu DApp for principalmente uma aplicação de consulta, como aplicações do tipo etherscan, então não é necessariamente necessário o SIWE.

Embora conectar a carteira no DApp represente a propriedade da carteira, isso só é válido para o front-end. Para chamadas de interface que requerem suporte do back-end, apenas passar o endereço não pode provar a identificação, porque o endereço é uma informação pública.

Princípio e processo 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, que conecta a carteira no DApp através de um plugin de carteira.

assinatura

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

Primeiro, chame a interface de back-end para obter o valor do Nonce. O back-end gerará um Nonce aleatório e o associará ao endereço. Após obter o Nonce, o front-end construirá o conteúdo da assinatura, incluindo Nonce, domínio, ID da cadeia, etc., usará o método fornecido pela carteira para assinar e, em seguida, enviará a assinatura para o back-end.

obter identificação

Após a verificação da assinatura pelo back-end, será devolvida a identificação do usuário, como o JWT. Nas solicitações subsequentes do front-end, deve-se incluir o endereço e a identificação, a fim de comprovar a posse da carteira.

Prática SIWE

Vamos desenvolver um DApp que suporta SIWE com Next.js, com o objetivo de retornar um JWT para verificação de identificação.

trabalho de preparação

1. Instalar o Next.js:

npx create-next-app@14

2. Instalar as dependências relacionadas ao SIWE:

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

Introduzir Wagmi

Introduzir WagmiProvider em layout.tsx:

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"; import React from "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(endereço)).dados, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verifyMessage: 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, ｝｝ wallets={[ MetaMask(), WalletConnect(), TokenPocket({ grupo: "Popular", }), OkxWallet(), ]} queryClient={queryClient} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

export default WagmiProvider;

adicionar botão de ligação

typescript "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 Entrar como ${ellipsisAddress}; };

return ( <>

implementação da interface

Interface Nonce

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

Interface de verificação de mensagens

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 { signature, message } = 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 (!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 do login SIWE, recomenda-se usar um serviço de nó especializado em vez do nó RPC padrão. Usando o serviço de nó ZAN como exemplo, 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 da interface.