SIWE: Una poderosa herramienta para iniciar sesión en Ethereum

SIWE (Iniciar sesión con Ethereum) es un método para verificar la identidad de los usuarios en Ethereum. Similar a iniciar transacciones, demuestra el control del usuario sobre la billetera a través de la firma. Actualmente, la mayoría de los complementos de billetera más utilizados ya apoyan este método de autenticación simple.

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

¿Cuándo se necesita SIWE?

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

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

Para Dapp( que principalmente ofrece funciones de consulta, como exploradores de bloques ), puede que no sea necesario SIWE.

Aunque la conexión a través de la billetera puede probar la identidad en el front-end, para las llamadas a la API que requieren soporte en el back-end, simplemente pasar la dirección no es suficiente, ya que la dirección es información pública y cualquiera puede usarla.

El principio y el 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 en aplicaciones Web3, conectar la billetera del usuario a través de un complemento de billetera.

firma

Los pasos de firma incluyen obtener el valor Nonce, la firma de la billetera y la verificación de la firma por parte del backend.

Primero, obtenga el valor de Nonce generado aleatoriamente desde el backend, el backend lo asociará con la dirección actual.

Después de que el frontend obtenga el valor de Nonce, construye el contenido de la firma, que incluye Nonce, nombre de dominio, ID de la cadena, etc., y luego utiliza el método de firma de la billetera para firmar.

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

Obtener identificador de identidad

Después de que se valide la firma en el backend, se devolverá el identificador de usuario ( como JWT). En las solicitudes posteriores del frontend, se debe incluir la dirección y el identificador de usuario, lo que demostrará la propiedad de la billetera.

Práctica SIWE

A continuación, practicaremos el proceso básico de SIWE a través de un simple Demo, con el objetivo de permitir que la Dapp pueda devolver un JWT para la verificación de identidad.

Nota: esta demostración solo se utiliza para mostrar el proceso básico, su uso en un entorno de producción puede presentar riesgos de seguridad.

trabajo preparatorio

Desarrollamos aplicaciones de pila completa con Next.js, y necesitamos preparar el entorno de Node.js.

Instalar dependencias

Primero instala Next.js:

npx create-next-app@14

Siga las instrucciones para completar la instalación.

Accede al directorio del proyecto y inicia:

npm run dev

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

Instalar dependencias relacionadas con SIWE

Utilizamos Ant Design Web3 para conectar la billetera e implementar la función SIWE:

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

Introducir Wagmi

Importar WagmiProvider en layout.tsx:

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 siwe="｛｛" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verifyMessage: 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 añade el botón para conectar la billetera:

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

return ( <>

Así se ha implementado un marco básico de inicio de sesión SIWE.

implementación de la interfaz

Ahora vamos a implementar algunas interfaces necesarias para el backend.

Nonce

Generar un Nonce aleatorio y asociarlo 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({ data: nonce, }); }

verifyMessage

Verificar la firma y devolver el JWT:

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, usa una clave más segura y agrega la verificación de expiración correspondiente.

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

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

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

si (!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("Firma no válida"); }

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

Hasta aquí, se ha completado el desarrollo de un Dapp básico de inicio de sesión SIWE.

Optimización del rendimiento

Para aumentar la velocidad de verificación, se sugiere utilizar un servicio de nodo especializado. Aquí usamos el servicio de nodo de ZAN, reemplazando el RPC predeterminado de publicClient:

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

Esto puede reducir significativamente el tiempo de verificación y aumentar la velocidad de la interfaz.