SIWE: una poderosa herramienta de identificación para Dapp

SIWE (Iniciar sesión con Ethereum) es un método para verificar la identificación del usuario en Ethereum, similar a iniciar una transacción, que demuestra el control del usuario sobre la billetera. Actualmente, la mayoría de los complementos de billetera admiten este método de firma simple.

Este artículo se centra en los escenarios de firma en Ethereum, sin abordar otras cadenas públicas.

¿Tu proyecto necesita SIWE?

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

• Tener su propio sistema de usuarios
• Necesita consultar información relacionada con la identificación del usuario.

Para Dapp( que principalmente proporciona funciones de consulta como etherscan), no es necesario utilizar SIWE.

Aunque la interfaz de usuario puede confirmar la identificación después de conectar la billetera, para las llamadas a la interfaz que requieren soporte del backend, simplemente pasar la dirección no puede probar la identificación, ya que la dirección es información pública.

El principio y el proceso de SIWE

El proceso de SIWE incluye tres pasos: conectar la billetera, firmar, obtener la identificación.

conectar billetera

Esta es una operación común en Web3, conectando a Dapp a través de un complemento de billetera.

firma

Los pasos de firma de SIWE incluyen:

1. Obtener el valor de Nonce: llamar a la interfaz de backend para obtener un valor de Nonce aleatorio, asociado a la dirección.

2. Construir el contenido de la firma: incluye el valor Nonce, el nombre de dominio, el ID de la cadena, entre otra información.

3. Firma de la billetera: utilizar el método proporcionado por la billetera para firmar el contenido.

4. Enviar firma: enviar la firma para la verificación del backend.

obtener identificación

Después de que la firma de verificación en el backend sea aprobada, se devuelve la identificación de usuario ( como JWT). Las solicitudes posteriores que lleven la dirección y la identificación, podrán demostrar la propiedad de la billetera.

Práctica SIWE

Desarrollaremos una aplicación de pila completa que soporte SIWE utilizando Next.js.

trabajo preparatorio

1. Instalar Next.js:

npx create-next-app@14

2. Instalar dependencias relacionadas con 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 import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";

const WagmiProvider = ({ children }) => { return ( <wagmiweb3configprovider config="｛｛" siwe:="" {="" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => createSiweMessage({ ...props, statement: "Ant Design Web3" }), verifyMessage: async (message, signature) => { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt); return !!jwt; }, }, chains: [Mainnet], transportes: { [Mainnet.id]: http(), }, wallets: [MetaMask(), WalletConnect(), TokenPocket(), OkxWallet()] ｝｝ > {children} ); };

añadir botón de conexión

Crear un botón para conectar la billetera y firmar:

jsx export default function App() { const jwt = React.useContext(JwtProvider);

return ( <connectbutton.connector> {({ cuenta, conectar }) => ( {cuenta ? Conectado: ${account.address.slice(0,6)}...${account.address.slice(-4)} : "Conectar billetera"} )} </connectbutton.connector> ); }

implementación de la interfaz de backend

Interfaz Nonce

javascript export async function GET(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 }); }

Interfaz de verificación de firma

javascript export async function POST(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 no válida"); }

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

Optimización del rendimiento

Para aumentar la velocidad de verificación, se recomienda utilizar un servicio de nodo especializado. Puede utilizar el servicio de nodo de ZAN para reemplazar el RPC predeterminado:

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

Esto mejorará significativamente la velocidad de respuesta de la interfaz.