SIWE: Utilizando la firma de Ethereum para lograr una autenticación de identidad Dapp más robusta

SIWE(Iniciar sesión con Ethereum) es una forma de verificar la identificación del usuario en Ethereum, similar a iniciar una transacción, utilizada para demostrar el control del usuario sobre la billetera. Actualmente, la mayoría de los complementos de billetera ya han apoyado este método de verificación de firma simple.

¿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 privacidad del usuario

Para aplicaciones centradas en consultas ( como etherscan ), no es necesario usar SIWE.

Aunque la identificación se puede indicar al conectar una cartera en el frontend de Dapp, para las llamadas a interfaces que requieren soporte backend, solo transmitir la dirección no es suficiente, ya que la dirección es información pública y puede ser fácilmente suplantada.

Principio y proceso de SIWE

El proceso básico de SIWE incluye tres pasos: conectar la cartera, firmar y obtener la identificación.

Conectar billetera

Conectar la billetera del usuario en Dapp a través del complemento de billetera.

firma

Los pasos de la firma incluyen:

1. Obtener el valor de Nonce: llamar a la interfaz del backend para obtener un valor de Nonce generado aleatoriamente
2. Construir el contenido de la firma: incluye el valor Nonce, el dominio, el ID de la cadena, etc.
3. Usar la billetera para firmar
4. Enviar la firma para la verificación del backend

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). Luego, al realizar la solicitud desde el frontend, se debe incluir la dirección y la identificación, lo que demuestra la propiedad de la billetera.

Práctica SIWE

A continuación se presenta cómo implementar SIWE en el proyecto, el objetivo es permitir que Dapp devuelva JWT para la verificación de la identificación del usuario.

trabajo preparatorio

Este artículo utiliza Next.js para desarrollar una aplicación de pila completa, y necesita preparar el entorno de Node.js.

instalar dependencias

Primero instala Next.js:

npx create-next-app@14

Accede al directorio del proyecto y ejecuta:

npm run dev

Accede a localhost:3000 para ver un proyecto básico de Next.js.

instalar dependencias relacionadas con SIWE

Uso de Ant Design Web3 para la conexión de billetera:

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

Introducción a 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"; import React from "react"; import { createSiweMessage } from "viem/siwe"; import { http } from "wagmi";

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;

implementar botón de conexión

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

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 ( <> </connector></connectbutton></space>

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

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

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

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

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

Sugerencias de optimización

Para mejorar la velocidad de verificación, se recomienda utilizar un servicio de nodos especializado para reemplazar el RPC predeterminado. Por ejemplo, usar el servicio de nodos ZAN:

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

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