SIWE: una forma de identificación más poderosa para tu 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 sencillo método de autenticación, que solo requiere firmar la información en el complemento. Este artículo se centra en los escenarios de firma en Ethereum y no aborda otras cadenas de bloques públicas.

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

Pero si tu DApp se centra principalmente en funciones de consulta, como aplicaciones del tipo etherscan, entonces no necesariamente necesitas identificación.

Aunque conectar la billetera en el DApp representa la propiedad de la billetera, esto solo es válido para el front-end. Para las llamadas a interfaces que requieren apoyo del back-end, solo 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 se puede resumir en tres pasos: conectar la cartera - firmar - obtener la identificación.

conectar billetera

Esta es una operación común de Web3, conectar la billetera en el DApp a través del complemento de billetera.

firma

Los pasos de firma incluyen obtener el valor de Nonce, la firma de la billetera y la verificación de la firma en el backend.

Primero se llama a la interfaz de backend para obtener el valor de Nonce, el backend generará un Nonce aleatorio y lo asociará con la dirección. Una vez que el frontend obtiene el Nonce, construye el contenido de la firma, que incluye Nonce, nombre de dominio, ID de cadena, etc., utiliza el método proporcionado por la billetera para firmar y luego envía la firma al backend.

obtener identificación

Una vez que la verificación de la firma del backend se complete, se devolverá la identificación del usuario, como JWT. En las solicitudes posteriores del frontend, se debe incluir la dirección y la identificación para demostrar la propiedad de la billetera.

Práctica SIWE

Vamos a desarrollar un DApp que soporte SIWE utilizando Next.js, con el objetivo de devolver un JWT para la identificación.

trabajo preparatorio

1. Instalar Next.js:

npx create-next-app@14

2. Instalar las dependencias relacionadas con SIWE:

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

Introducción de 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"; 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)="">

      (esperar getNonce(dirección)).datos,
    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}
>
  <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider>
</wagmiweb3configprovider>

); };

export default WagmiProvider;

añadir botón de conexión

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

return ( <>

implementación de la interfaz

Interfaz Nonce

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

typescript 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("Invalid signature"); }

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

Sugerencias de optimización

Para mejorar la velocidad de respuesta del inicio de sesión SIWE, se recomienda utilizar un servicio de nodo especializado en lugar del nodo RPC predeterminado. 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:

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

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