SIWE: Haz que la identificación de tu Dapp sea más segura y confiable

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 desde una billetera, utilizado para demostrar que el usuario tiene control sobre esa billetera. Actualmente, la mayoría de los complementos de billetera admiten este sencillo método de autenticación, solo es necesario firmar la información en la billetera.

Este artículo discute principalmente el escenario de firmas SIWE en Ethereum, sin involucrar otras cadenas públicas como Solana o SUI.

¿Cuándo es necesario usar SIWE?

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

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

Para Dapps ( centradas en la función de consulta, como los exploradores de bloques ), no es necesariamente requerido SIWE.

Es posible que te preguntes, ¿no significa que al conectar la billetera a la Dapp ya se ha indicado la propiedad de la billetera? Esta afirmación no es del todo precisa. Para el front-end, la conexión de la billetera puede probar la identificación, pero para las llamadas a la interfaz que requieren soporte del back-end, solo transmitir la dirección no puede verificar la identificación, porque la dirección es información pública.

Principio y proceso de SIWE

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

conectar cartera

Esta es una operación común de Web3, que permite conectar 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 firma por parte del backend.

Primero es necesario 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 obtiene el valor de Nonce, construye el contenido de la firma, que generalmente incluye Nonce, dominio, ID de cadena y contenido de la firma, entre otros. Luego, utiliza el método de firma 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 firma de validación del backend sea correcta, se devolverá la identificación del usuario correspondiente, que generalmente es un token JWT. El frontend debe incluir la dirección y la identificación en las solicitudes posteriores para demostrar la propiedad de la billetera.

Práctica SIWE

Podemos implementar la función SIWE a través de operaciones prácticas, con el objetivo de permitir que Dapp devuelva JWT para la identificación del usuario. Es importante tener en cuenta que el siguiente demo solo se utiliza para demostrar el proceso básico, y puede haber riesgos de seguridad en un entorno de producción.

trabajo de preparación

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

instalar dependencias

Primero instala Next.js:

npx create-next-app@14

Una vez completada la instalación según las instrucciones, ingresa al directorio del proyecto y inicia el proyecto:

npm run dev

instalar dependencias relacionadas con SIWE

Usamos la biblioteca de componentes Ant Design Web3 para implementar la conexión de la cartera y la función SIWE:

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 para su implementación. Importamos el Provider correspondiente en layout.tsx, lo que permite que todo el proyecto use los Hooks proporcionados por Wagmi.

Primero define la configuración de WagmiProvider:

jsx "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)=""> (await getNonce(address)).data, 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} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

export default WagmiProvider;

Luego añade el botón de conectar la cartera:

jsx "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)} : ""; regresar Iniciar sesión como ${ellipsisAddress}; };

return ( <> </connector></connectbutton></space>

Hasta aquí, hemos logrado implementar un marco de inicio de sesión SIWE simple.

implementación de la interfaz

Nonce

Nonce se utiliza para generar un contenido de firma diferente en cada ocasión, mejorando la fiabilidad de la firma. El código de implementación es el siguiente:

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

verificaciónDeMensaje

El backend necesita verificar el contenido de la firma y devolver un JWT para la posterior verificación de permisos:

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

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

if (!valid) { throw new Error("Invalid signature"); }

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

Sugerencias de optimización

Para mejorar la velocidad de inicio de sesión de SIWE, se recomienda utilizar servicios de nodos especializados para acelerar el tiempo de respuesta de la interfaz. Se pueden utilizar servicios de nodos como ZAN, obtener la conexión RPC correspondiente y reemplazar el RPC predeterminado en el código.

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

Esto puede reducir significativamente el tiempo de validación y mejorar la velocidad de la interfaz.