Guía de implementación de la verificación de identidad de Ethereum: SIWE

SIWE(Iniciar sesión con Ethereum) es un método de autenticación de usuario basado en Ethereum, similar a que una billetera inicie una transacción, utilizado para demostrar el control del usuario sobre una billetera específica. Actualmente, la mayoría de los complementos de billetera principales ya han apoyado este sencillo método de autenticación, solo es necesario firmar la información en el complemento.

Este artículo se centrará en la implementación de SIWE en Ethereum, sin abordar otras cadenas públicas como Solana, SUI, etc.

Escenarios de uso de SIWE

Si tu aplicación descentralizada (Dapp) tiene los siguientes requisitos, puedes considerar usar SIWE:

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

Para aplicaciones centradas en la consulta como exploradores de bloques (, no es necesario utilizar SIWE.

Aunque la conexión a través de la billetera en la Dapp puede indicar la identificación, esto solo es efectivo en el front-end. Para las llamadas de interfaz que requieren soporte de back-end, simplemente transmitir la información de la dirección no es suficiente para probar la identificación, ya que la dirección es información pública.

Cómo funciona SIWE

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

) conectar billetera

Esta es una operación común de Web3, que conecta la billetera del usuario en la Dapp a través de un plugin 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.

El backend genera un valor nonce aleatorio y lo asocia con la dirección, para preparar la firma posterior. El frontend obtiene el valor nonce y construye el contenido de la firma, que incluye el valor nonce, el nombre de dominio, el ID de la cadena, entre otra información, y utiliza el método proporcionado por la billetera para firmar. Finalmente, se 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 devuelve la identificación del usuario ### como JWT(. En solicitudes posteriores del frontend, se lleva la dirección y la identificación, lo que demuestra la propiedad de la billetera.

![Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más potente?])https://img-cdn.gateio.im/webp-social/moments-9e9c9e786391f84b004cd8450a29acce.webp(

Ejemplo de implementación de SIWE

A continuación se demostrará cómo implementar la funcionalidad SIWE en un proyecto Nextjs, permitiendo que la Dapp devuelva JWT para la verificación de la identidad del usuario.

) preparación del entorno

Este ejemplo está desarrollado con Nextjs y requiere un entorno de Node.js. Usar Nextjs permite desarrollar proyectos de pila completa de manera conveniente, sin necesidad de separar el front-end y el back-end.

instalar dependencias

Primero instala Nextjs:

npx create-next-app@14

Una vez completada la instalación según las instrucciones, entra en el directorio del proyecto y arranca:

npm run dev

Accede a localhost:3000 para ver el proyecto básico de Nextjs.

instalar dependencias relacionadas con SIWE

Usaremos Ant Design Web3 para implementar la conexión de la billetera, es gratuito, se mantiene de forma continua y la experiencia de uso es similar a la de una biblioteca de componentes común, soporta la funcionalidad SIWE.

Instalar dependencias relacionadas:

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

configuración Wagmi

Importar WagmiProvider en layout.tsx:

typescript "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 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={)} transports=｛｛ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ wallets={[} MetaMask)(, WalletConnect)(, TokenPocket){ grupo: "Popular", }(, OkxWallet)(, ]} queryClient={queryClient} > {children} ); };

export default WagmiProvider;

![Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más potente?])https://img-cdn.gateio.im/webp-social/moments-138fc08a9148099755d1fe162292922f.webp(

) implementar botón de conexión

Agregar botones para conectar la cartera y firmar:

typescript "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.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton></connectbutton></space>

![Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderoso?])https://img-cdn.gateio.im/webp-social/moments-355ea961b315585f7d217cbcf6a3fa69.webp(

) implementar la interfaz de backend

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

)# interfaz de verificación de mensajes

Verificar la firma y devolver JWT:

typescript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt from "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, }(;

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

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

![Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderosa?])https://img-cdn.gateio.im/webp-social/moments-53c03d1cb26f29a9d739e3d1aa0816df.webp(

Optimización del rendimiento

Para mejorar la velocidad de verificación, se recomienda utilizar un servicio de nodos especializado. Tomando como ejemplo el servicio de nodos ZAN, después de obtener la conexión HTTPS RPC de la red principal de Ethereum, reemplace el RPC predeterminado de publicClient:

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

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

![Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderosa?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

![Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más potente?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

![Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderosa?])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(