SIWE: Añadir capacidad de identificación a Dapp

SIWE(Iniciar sesión con Ethereum) es un método para verificar la identificación de los usuarios en Ethereum, similar a iniciar una transacción, que prueba el control del usuario sobre la billetera. Actualmente, la mayoría de los complementos de billetera admiten este método de autenticación simple, que solo requiere firmar la información en el complemento. Este artículo discutirá los escenarios de firma en Ethereum.

¿Cuándo se necesita la identificación?

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

• Tener un sistema de usuarios independiente
• Necesita consultar información relacionada con la identificación del usuario

Para aplicaciones basadas en consultas, como etherscan, no es necesario utilizar SIWE.

Aunque la identificación se puede indicar en el front-end a través de la conexión de la billetera, para las llamadas a interfaces que requieren soporte de back-end, solo transmitir la dirección no puede probar la identificación, ya que la dirección es información pública.

Principio y proceso de SIWE

El proceso SIWE se puede resumir en: conectar la billetera - firmar - obtener la identificación. Los pasos específicos son los siguientes:

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

2. Firma:

   • Obtener el valor de Nonce: llamar a la interfaz del backend para obtener un valor de Nonce aleatorio.
   • Construir contenido de firma: incluye el valor Nonce, el dominio, el ID de la cadena, etc.
   • Utilizar el método de firma de billetera para firmar el contenido.
   • Enviar la firma al backend.

3. Obtener identificación:

   • Después de verificar la firma en el backend, devuelve la identificación del usuario ( como JWT).
   • La solicitud posterior debe incluir la dirección y la identificación, para probar la propiedad de la billetera.

Práctica SIWE

Vamos a desarrollar una Dapp que soporte SIWE utilizando Next.js, con el objetivo de devolver JWT para la identificación del usuario.

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

implementar SIWE

1. 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)="">

      (esperar getNonce(dirección)).datos,
    createMessage: (props) => {
      return createSiweMessage({ ...props, statement: "Ant Design Web3" });
    },
    verificarMensaje: async (mensaje, firma) => {
      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}
</wagmiweb3configprovider>

); };

export default WagmiProvider;

2. Agregar botón de conexión:

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

return ( <> {jwt} ); }

implementación de la interfaz

1. 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 no válida"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ datos: nonce, }); }

2. Interfaz de verificación de mensajes:

javascript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt from "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);

si (!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 verificación de inicio de sesión de SIWE, se recomienda utilizar un servicio de nodo especializado. Se puede utilizar el servicio de nodo ZAN, reemplazando 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 verificación y mejorar la velocidad de respuesta de la interfaz.