SIWE: La tecnología clave para mejorar la funcionalidad de Dapp

SIWE (Iniciar sesión con Ethereum) es un método para verificar la identidad del usuario en Ethereum, similar a iniciar una transacción de cartera, que prueba que el usuario tiene control sobre la cartera. El método de autenticación actual es muy simple, solo se requiere firmar la información en el complemento de la cartera, y la mayoría de los complementos de cartera comunes ya lo soportan.

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

¿Es necesario SIWE?

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

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

Pero si tu Dapp se centra principalmente en funciones de consulta, como aplicaciones similares a etherscan, no es necesario usar SIWE.

Es posible que te preguntes, después de conectar la billetera en Dapp, ¿no se ha demostrado ya la propiedad de la billetera? Esta afirmación es parcialmente correcta. Desde el punto de vista del front-end, la conexión de la billetera efectivamente indica la identidad, pero para las llamadas a la interfaz que requieren soporte del back-end, solo pasar la dirección no es suficiente, ya que la dirección es información pública y cualquier persona puede "tomarla prestada".

Principios y procesos 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

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

firma

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

Obtener el valor de Nonce requiere llamar a la interfaz del backend. Una vez que el backend recibe la solicitud, generará un valor de Nonce aleatorio y lo asociará con la dirección actual, preparándose para la firma posterior.

Después de obtener el valor de Nonce en el frontend, es necesario construir el contenido de la firma, que incluye el valor de Nonce, el nombre de dominio, el ID de la cadena, el contenido de la firma, etc. Normalmente se utiliza el método de firma proporcionado por la billetera para firmar.

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

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 correspondiente y la identificación del usuario, lo que probará la propiedad de la billetera.

Práctica

Actualmente hay muchos componentes y bibliotecas que soportan la conexión rápida de carteras y SIWE. Nuestro objetivo es permitir que la Dapp devuelva JWT para la verificación de identidad del usuario. Nota: esta demo solo se utiliza para presentar el flujo básico de SIWE, el uso en un entorno de producción podría presentar problemas de seguridad.

trabajo de preparación

Este artículo utiliza Next.js para desarrollar aplicaciones, requiere un entorno de Node.js. La ventaja de usar Next.js es que se pueden desarrollar proyectos de pila completa directamente, sin necesidad de dividirlos en dos proyectos, frontend y backend.

instalar dependencias

Primero instala Next.js, ejecuta en el directorio del proyecto:

npx create-next-app@14

Una vez que hayas completado la instalación según las instrucciones, entra en el directorio del proyecto y ejecuta:

npm run dev

Según las instrucciones del terminal, accede a localhost:3000 para ver el proyecto básico de Next.js.

Instalar dependencias relacionadas con SIWE

SIWE necesita un sistema de inicio de sesión, por lo tanto, se necesita conectar la billetera. Aquí utilizamos Ant Design Web3, porque:

1. Completamente gratis y mantenido activamente
2. Como biblioteca de componentes Web3, la experiencia de uso es similar a la de una biblioteca de componentes común, sin carga mental adicional.
3. Soporte para SIWE

Ejecutar en la terminal:

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

Introducir Wagmi

La SIWE de Ant Design Web3 depende de la biblioteca Wagmi. Necesitamos importar el Provider correspondiente en layout.tsx para que todo el proyecto pueda utilizar los Hooks proporcionados por Wagmi.

Primero define la configuración de WagmiProvider:

javascript "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 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)=""> (esperar getNonce(dirección)).datos, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verifyMessage: async (message, signature) => { const jwt = (await verifyMessage(mensaje, firma)).datos; 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 billetera, así se ha añadido una entrada de conexión en el frontend. Hasta aquí, se ha integrado SIWE, el proceso es muy sencillo.

A continuación se define el botón de conexión, para conectar la billetera y firmar:

javascript "usar cliente"; importar tipo { Cuenta } de "@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, cuenta?: Cuenta ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; regresar Iniciar sesión como ${ellipsisAddress}; };

return ( <>

Así se ha implementado un marco de inicio de sesión SIWE muy simple.

implementación de interfaz

SIWE necesita algunas interfaces para ayudar al backend a verificar la identidad del usuario. Ahora vamos a implementarlo de manera sencilla.

Nonce

Nonce se utiliza para cambiar el contenido generado por la billetera en cada firma, aumentando la fiabilidad de la firma. La generación de nonce necesita estar asociada con la dirección proporcionada por el usuario, mejorando la precisión de la verificación.

La implementación de Nonce es muy directa, primero se genera una cadena aleatoria ( compuesta por letras y números ), luego se establece una relación entre nonce y address:

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

si (!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 se utiliza para firmar contenido, esta parte de la funcionalidad generalmente es completada por un complemento de billetera, normalmente no necesitamos configurarlo, solo es necesario especificar el método. En esta demostración se utiliza el método de firma de Wagmi.

verificarMensaje

Después de que el usuario firme, debe enviar el contenido antes de la firma junto con la firma al backend para su verificación. El backend extraerá el contenido correspondiente de la firma para compararlo; si coincide, significa que la verificación ha sido exitosa.

Además, también es necesario realizar una verificación de seguridad del contenido de la firma, como si el valor Nonce en el contenido de la firma coincide con el que se ha enviado al usuario, entre otros. Una vez que la verificación se haya completado, se debe devolver el JWT del usuario para la validación de permisos posterior, el código de ejemplo es el siguiente:

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 la verificación de expiración correspondiente.

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); console.log("nonce", nonce, address, addressMap);

// Verificar si el valor del nonce coincide si (!nonce || nonce !== addressMap.get(address)) { throw new Error("Nonce inválido"); }

// Verificar el contenido de la firma const valid = await publicClient.verifySiweMessage({ mensaje, dirección, firma, });

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

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

Hasta aquí, se ha desarrollado una Dapp que implementa básicamente el inicio de sesión SIWE.

Sugerencias de optimización

El uso del nodo RPC predeterminado para la verificación de inicio de sesión SIWE puede tardar hasta 30 segundos, por lo que se recomienda encarecidamente utilizar un servicio de nodo dedicado para mejorar el tiempo de respuesta de la interfaz. Este artículo utiliza el servicio de nodo de ZAN, y se puede obtener la conexión RPC correspondiente desde la consola del servicio de nodo de ZAN.

Después de obtener la conexión RPC HTTPS de la red principal de Ethereum, reemplace el RPC predeterminado de publicClient en el código:

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

Después de la sustitución, el tiempo de verificación se reducirá significativamente y la velocidad de la interfaz aumentará notablemente.