SIWE: una poderosa herramienta para mejorar la identificación de Dapp

SIWE(Iniciar sesión con Ethereum) es un método para verificar la identificación del usuario en Ethereum, similar a iniciar una transacción, demostrando el control del usuario sobre la billetera. Actualmente, la mayoría de los principales complementos de billetera ya admiten este método de autenticación simple, solo es necesario firmar la información en el complemento.

Este artículo se centrará en los escenarios de firma en Ethereum, sin abordar otras cadenas públicas como Solana, SUI, etc.

¿Cuándo se necesita usar SIWE?

Si tu Dapp tiene las siguientes necesidades, puedes considerar usar SIWE:

• Tener un sistema de usuarios independiente
• Necesita consultar información relacionada con la identificación del usuario

Para las Dapp( que ofrecen principalmente funciones de consulta, como el explorador de bloques ), no es necesario utilizar SIWE.

Aunque parece que la identificación ya se ha probado después de conectar la billetera en la Dapp, esto solo es válido para el frontend. Para las llamadas a interfaces que requieren soporte backend, simplemente transmitir la dirección no es suficiente, ya que la dirección es información pública y puede ser fácilmente falsificada.

Principio y proceso de SIWE

El proceso de SIWE se puede resumir en tres pasos: conectar la billetera - firmar - obtener la identificación. Vamos a detallar estos tres pasos.

conectar billetera

Esta es una operación común de Web3, que conecta la billetera del usuario 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.

Primero se necesita llamar a la interfaz de backend para obtener el valor de Nonce. El backend generará un Nonce aleatorio y lo asociará con la dirección actual, preparándose para la firma posterior.

Después de que el frontend obtenga el valor de Nonce, se construye el contenido de la firma, que generalmente incluye el valor de Nonce, el nombre de dominio, la ID de la cadena y el contenido de la firma, entre otros. Luego, se utiliza el método proporcionado por la billetera para firmar el contenido.

Finalmente, envía la firma al backend para su verificación.

obtener identificación

Después de que la verificación de la firma en el backend sea exitosa, se devolverá la identificación del usuario, como JWT. En las solicitudes posteriores del frontend, se debe incluir la dirección y la identificación para demostrar la propiedad de la billetera.

Práctica SIWE

Desarrollaremos una aplicación SIWE simple utilizando Next.js, con el objetivo de permitir que la Dapp pueda devolver un JWT para la identificación. Tenga en cuenta que esta demostración solo se utiliza para presentar el proceso básico, y puede haber vulnerabilidades de seguridad en un entorno de producción.

trabajo de preparación

Necesitamos preparar el entorno de Node.js y usar Next.js para desarrollar un proyecto de pila completa.

instalar dependencias

Primero instala Next.js:

npx create-next-app@14

Una vez completada la instalación según las instrucciones, acceda al directorio del proyecto y ejecute:

npm run dev

Accede a localhost:3000 para ver un proyecto básico de Next.js.

Instalar dependencias relacionadas con SIWE

Usaremos Ant Design Web3, que es gratuito, se mantiene de forma continua, tiene una experiencia de uso similar a la de una biblioteca de componentes normal y soporta SIWE. El comando de instalación es el siguiente:

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

Introducir Wagmi

Importar WagmiProvider en 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"; 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(address)).data, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verificarMensaje: async (mensaje, firma) => { 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;

Luego agrega el botón de conectar la billetera:

javascript "use client"; importar tipo { Cuenta } de "@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 ( <>

Hasta aquí, hemos implementado el marco básico de inicio de sesión SIWE.

implementación de la interfaz

Ahora implementaremos la interfaz de verificación de identificación del usuario en el backend.

Nonce

Nonce se utiliza para aumentar la fiabilidad de la firma. Generamos una cadena aleatoria y la asociamos con la dirección:

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

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

signMessage

signMessage generalmente se realiza a través de un complemento de billetera, utilizamos el método de firma de Wagmi.

verifyMessage

El backend necesita verificar el contenido de la firma y realizar una verificación de seguridad:

javascript 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"; // Por favor, utiliza una clave más segura y añade verificación de expiración, etc.

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 no válido"); }

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

if (!valid) { throw new Error("Firma no válida"); }

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

Sugerencias de optimización

Para mejorar la velocidad de verificación, se recomienda utilizar un servicio de nodo especializado. Puede utilizar el servicio de nodo de ZAN, obtener una conexión HTTPS RPC y luego reemplazar el RPC predeterminado en el código.

javascript const publicClient = createPublicClient({ cadena: mainnet, transporte: http('), //servicio RPC de nodo ZAN });

Esto reducirá significativamente el tiempo de verificación y mejorará la velocidad de la interfaz.