Guía técnica de SIWE: construir un sistema de identificación de Ethereum para Dapp

Guía de implementación de tecnología SIWE: Construyendo un sólido sistema de autenticación de Dapp

SIWE(Iniciar sesión con Ethereum) es una forma de verificar la identificación del usuario en Ethereum, similar a iniciar una transacción, demostrando el control del usuario sobre la billetera. Actualmente, los complementos de billetera más populares admiten este método de verificación de identidad simple, solo necesitas firmar en el complemento.

Este artículo discute principalmente los escenarios de firmas en Ethereum, sin involucrar otras cadenas públicas.

Cuándo es necesario utilizar 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 aplicaciones centradas en consultas, como exploradores de bloques similares a etherscan, no es necesario usar SIWE.

Aunque parece que se ha demostrado la identificación después de conectar la billetera en el front-end de Dapp, para las llamadas a la interfaz que requieren soporte del back-end, simplemente pasar la dirección no es suficiente, ya que la dirección es información pública y es fácil de falsificar.

Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más potente?

El principio y el proceso de SIWE

El proceso 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, conectar la billetera en Dapp a través de un complemento de billetera.

firma

Incluye tres pasos: obtener el valor de Nonce, firmar la billetera y verificar la firma del backend.

  1. Obtener el valor de Nonce generado aleatoriamente desde el backend, asociado con la dirección actual.

  2. Construir el contenido de la firma en el frontend, incluyendo el valor Nonce, el dominio, la identificación de la cadena, etc., y firmar utilizando los métodos proporcionados por la billetera.

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

obtener identificación

Después de que la verificación de la firma del backend sea exitosa, se devuelve la identificación del usuario ( como JWT ). Las solicitudes posteriores del frontend deben incluir la dirección y la identificación para poder demostrar la propiedad de la billetera.

Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderoso?

Guía práctica

A continuación se presentará cómo implementar la funcionalidad SIWE en un proyecto de Nextjs, devolviendo JWT para la identificación.

preparación del entorno

  1. Instalar Nextjs:

npx create-next-app@14

  1. Instalar las dependencias relacionadas con SIWE:

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

Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderosa?

introducción a Wagmi

Importar WagmiProvider en layout.tsx:

javascript "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 (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;

Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderoso?

añadir botón de conexión

Agregar botones de conectar billetera y firmar en el componente:

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

return ( <>

JWT: {jwt}
); }

Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderosa?

implementación de 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 (!dirección) { 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 firma

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

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

Manual de uso de SIWE: ¿Cómo hacer que tu Dapp sea más poderosa?

Sugerencias de optimización

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

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

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?

Ver originales
Esta página puede contener contenido de terceros, que se proporciona únicamente con fines informativos (sin garantías ni declaraciones) y no debe considerarse como un respaldo por parte de Gate a las opiniones expresadas ni como asesoramiento financiero o profesional. Consulte el Descargo de responsabilidad para obtener más detalles.
  • Recompensa
  • 5
  • Compartir
Comentar
0/400
MrRightClickvip
· 07-16 07:52
Con firmar es suficiente, no lo hagas tan complicado.
Ver originalesResponder0
BearMarketSurvivorvip
· 07-16 03:02
Otra vez con esta cosa tan elegante.
Ver originalesResponder0
SpeakWithHatOnvip
· 07-13 20:00
Con esta dificultad de verificación, cualquier trampa puede pasar.
Ver originalesResponder0
NFTDreamervip
· 07-13 19:58
¿Qué hay para preocuparse? Solo hazlo y ya está.
Ver originalesResponder0
BlockTalkvip
· 07-13 19:57
¿Por qué es tan complicado el proceso de identificación?
Ver originalesResponder0
  • Anclado
Opere con criptomonedas en cualquier momento y lugar
qrCode
Escanee para descargar la aplicación Gate
Comunidad
Español
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)