Aplicaciones y prácticas de SIWE en aplicaciones Web3

SIWE(Iniciar sesión con Ethereum) es un método de autenticación de usuario basado en Ethereum, similar a iniciar una transacción desde una billetera, utilizado para demostrar el control del usuario sobre la billetera. Actualmente, los principales complementos de billetera han apoyado ampliamente este sencillo método de autenticación, simplemente se necesita firmar la información en el complemento. Este artículo se centra principalmente en los escenarios de firma en Ethereum, sin abordar otras cadenas públicas.

Escenarios de aplicación de SIWE

SIWE se utiliza principalmente para resolver el problema de la verificación de identidad de la dirección de la cartera. Si tu aplicación 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 función de consulta, como exploradores de bloques, no es necesario utilizar SIWE.

Aunque la conexión de billetera en el front-end de la aplicación puede indicar la identidad, para las llamadas a interfaces que requieren soporte de back-end, solo transmitir la dirección no es suficiente, porque la dirección es información pública y puede ser fácilmente robada por otros.

Principios y proceso de SIWE

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

Conectar billetera

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

1. Obtener el valor de Nonce: Llamar a la interfaz del backend para obtener un valor de Nonce aleatorio y asociarlo con la dirección actual.

2. Construir el contenido de la firma: incluye el valor Nonce, el dominio, el ID de la cadena, el contenido de la firma, etc., utilizando el método proporcionado por la billetera para firmar.

3. Enviar firma: enviar la firma al backend para su verificación.

Obtener identificación

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

Guía de Práctica

A continuación se presenta cómo integrar rápidamente SIWE en la aplicación, con el objetivo de devolver un JWT para la verificación de identidad del usuario. Tenga en cuenta que este ejemplo se utiliza únicamente para mostrar el proceso básico, el uso en un entorno de producción puede presentar riesgos de seguridad.

Preparación del entorno

Este artículo utiliza Next.js para desarrollar aplicaciones de pila completa, y se necesita preparar un entorno de Node.js.

instalación de dependencias

Primero instala Next.js:

npx create-next-app@14

Ingrese al directorio del proyecto y ejecute:

npm run dev

Instalar dependencias relacionadas con SIWE

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

Configurar Wagmi

Importar WagmiProvider en layout.tsx:

javascript "usar cliente"; 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 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 (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} > {children} ); };

export default WagmiProvider;

añadir botón de conexión

javascript "use client"; 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)} : ""; iniciar sesión como ${ellipsisAddress}; };

return ( <>

implementación de la interfaz

Interfaz Nonce

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

Interfaz de verificación de mensajes

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, utilice una clave más segura y añada comprobaciones de caducidad, 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);

si (!nonce || nonce !== addressMap.get(address)) { throw new Error("Nonce inválido"); }

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

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

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

Optimización del rendimiento

Para mejorar la velocidad de respuesta del inicio de sesión SIWE, se recomienda utilizar un servicio de nodo dedicado en lugar del nodo RPC predeterminado. Este artículo utiliza el servicio de nodo de ZAN, que se puede obtener en su consola para la conexión RPC.

Reemplazar el RPC predeterminado de publicClient:

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

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