Guía de uso de SIWE: mejora las funciones de tu Dapp

SIWE (Iniciar sesión con Ethereum) es una forma de verificar la identidad del usuario en Ethereum, similar a iniciar una transacción, que demuestra el control del usuario sobre su billetera. Actualmente, la mayoría de los complementos de billetera admiten este método de autenticación simple, que solo requiere firmar en el complemento.

Este artículo discute principalmente los escenarios de firma en Ethereum, sin involucrar otras cadenas públicas como Solana, SUI, etc.

¿Tu proyecto necesita SIWE?

Si tu Dapp tiene los siguientes requisitos, puedes considerar usar SIWE:

• Tener su propio sistema de usuarios
• Necesita consultar información relacionada con la privacidad del usuario

Pero si tu Dapp se centra principalmente en la función de consulta, similar a etherscan, entonces no es necesario usar SIWE.

Puedes preguntarte, ¿no significa que la propiedad de la billetera está indicada al conectar la billetera en Dapp? Esta afirmación no es del todo precisa. Para el frontend, conectar la billetera sí indica identidad, pero para las llamadas de interfaz que requieren soporte backend, simplemente transmitir la dirección no es suficiente para probar la identidad, ya que la dirección es información pública y cualquiera puede usarla.

Principios y proceso de SIWE

El proceso de SIWE se puede resumir en tres pasos: conectar la cartera, firmar, obtener la identificación.

Conectar billetera

Esta es una operación común de Web3, conectar la billetera en Dapp a través de un complemento de billetera.

firma

Los pasos de firma de SIWE incluyen obtener el valor de Nonce, la firma de la billetera y la verificación de la firma en el backend.

Para obtener el valor Nonce, es necesario llamar a la interfaz de backend. El backend genera un valor Nonce aleatorio y lo asocia con la dirección actual, preparándose para la firma posterior.

Después de obtener el valor Nonce en el front-end, se construye el contenido de la firma, que incluye el valor Nonce, el nombre de dominio, el ID de la cadena y el contenido de la firma, normalmente utilizando el método proporcionado por la billetera para firmar.

Una vez que se complete la firma, envíela al backend.

Obtener identificación

Después de que la verificación de la firma del backend sea exitosa, se devuelve la identificación del usuario, como JWT. En solicitudes posteriores del frontend, se debe llevar la dirección y la identificación del usuario, lo que puede probar la propiedad de la billetera.

Práctica

Vamos a desarrollar una aplicación de pila completa con Next.js, integrando la función SIWE. Tenga en cuenta que esta demostración solo se utiliza para mostrar el proceso básico y no es adecuada para su uso directo en un entorno de producción.

trabajo preparatorio

Asegúrese de tener instalado el entorno de Node.js.

instalar dependencias

Primero instala Next.js:

npx create-next-app@14

Sigue las instrucciones para completar la instalación.

Ingresa al directorio del proyecto, ejecuta el proyecto:

npm run dev

Acceder a localhost:3000 permite ver un proyecto básico de Next.js.

Instalar dependencias relacionadas con SIWE

Elegimos usar Ant Design Web3 porque es gratuito, se mantiene de forma continua, tiene una buena experiencia de uso y soporta SIWE.

Instalar dependencias:

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

Introducir Wagmi

Importar el Provider relevante en layout.tsx:

typescript "use client"; import { getNonce, verifyMessage } from "@/app/api"; importar { Red principal, 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 siweconfig="｛｛" getnonce:="" async="" (address)=""> (esperar getNonce(dirección)).datos, 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;

Agregar botón de conexión de billetera:

typescript "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, cuenta?: Cuenta ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; devuelve Iniciar sesión como ${ellipsisAddress}; };

return ( <>

implementación de interfaz

Nonce

Generar un Nonce aleatorio y asociarlo con la dirección:

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

if (!address) { throw new Error("Dirección inválida"); } const nonce = randomBytes(16).toString(("hex")); addressMap.set(address, nonce); return Response.json({ datos: nonce, }); }

verificarMensaje

Verificar la firma y devolver JWT:

typescript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt de "jsonwebtoken"; import { parseSiweMessage } from "viem/siwe"; import { addressMap } from "../cache";

const JWT_SECRET = "your-secret-key";

const publicClient = createPublicClient({ cadena: mainnet, transporte: http(), });

export async function POST(request: Request) { const { signature, message } = await request.json();

const { nonce, address = "0x" } = parseSiweMessage(message);

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

const valid = await publicClient.verifySiweMessage({ mensaje, dirección, firma, });

si (!valid) { throw new Error("Firma inválida"); }

const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ datos: token, }); }

Sugerencias de optimización

Para aumentar la velocidad de verificación, se recomienda utilizar un servicio de nodo especializado. Se puede utilizar el servicio de nodo de ZAN, obtener la conexión RPC y reemplazar el RPC predeterminado en el código.

typescript const publicClient = createPublicClient({ cadena: mainnet, transporte: http('), //Servicio RPC del nodo ZAN });

Esto puede mejorar significativamente la velocidad de respuesta de la interfaz.