SIWE : un moyen d'identification plus puissant pour votre DApp

SIWE(Se connecter avec Ethereum) est une méthode de vérification de l'identification des utilisateurs sur Ethereum, similaire à l'initiation d'une transaction, prouvant le contrôle de l'utilisateur sur le portefeuille. Actuellement, la plupart des plugins de portefeuille prennent en charge cette méthode d'authentification simple, il suffit de signer les informations dans le plugin. Cet article discute principalement des scénarios de signature sur Ethereum, sans aborder d'autres blockchains publiques.

Le projet a-t-il besoin de SIWE ?

Si votre DApp a les besoins suivants, vous pouvez envisager d'utiliser SIWE:

• Avoir son propre système d'utilisateurs
• Besoin de consulter des informations liées à la vie privée des utilisateurs

Mais si votre DApp est principalement une fonction de consultation, comme des applications telles qu'etherscan, il n'est pas nécessaire d'avoir SIWE.

Bien que la connexion d'un portefeuille sur une DApp représente la propriété du portefeuille, cela n'est valable que pour le front-end. Pour les appels d'interface nécessitant un support back-end, transmettre uniquement l'adresse ne peut pas prouver l'identification, car l'adresse est une information publique.

Principe et processus de SIWE

Le processus SIWE peut être résumé en trois étapes : connecter le portefeuille - signer - obtenir l'identification.

connecter le portefeuille

C'est une opération Web3 courante, qui connecte le portefeuille dans le DApp via un plugin de portefeuille.

signature

Les étapes de signature comprennent l'obtention de la valeur Nonce, la signature du portefeuille et la vérification de la signature par le backend.

Tout d'abord, appelez l'interface backend pour obtenir la valeur Nonce, le backend générera un Nonce aléatoire et l'associera à l'adresse. Après avoir obtenu le Nonce, le frontend construira le contenu de la signature, y compris le Nonce, le nom de domaine, l'ID de la chaîne, etc., en utilisant la méthode fournie par le portefeuille pour signer, puis enverra la signature au backend.

obtenir l'identification

Après la vérification de la signature par le backend, l'identification de l'utilisateur sera renvoyée, comme le JWT. Lors des requêtes ultérieures du frontend, il suffit d'inclure l'adresse et l'identification pour prouver la propriété du portefeuille.

Pratique SIWE

Nous allons développer un DApp prenant en charge SIWE avec Next.js, l'objectif est de retourner un JWT pour l'identification.

préparation

1. Installer Next.js :

npx create-next-app@14

2. Installer les dépendances liées à SIWE :

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

introduire Wagmi

Inclure WagmiProvider dans layout.tsx:

typescript "use client"; import { getNonce, verifyMessage } from "@/app/api"; importer { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } de "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; importer 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)="">

      (attendre getNonce(adresse)).données,
    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,
  ｝｝
  portefeuilles={[ 
    MetaMask(),
    WalletConnect(),
    TokenPocket({
      groupe : "Populaire", 
    }),
    OkxWallet(),
  ]}
  queryClient={queryClient}
>
  <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider>
</wagmiweb3configprovider>

); };

export default WagmiProvider;

ajouter un bouton de connexion

typescript "use client"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; importer React de "react"; import { JwtProvider } from "./JwtProvider";

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

const renderSignBtnText = ( defaultDom: React.ReactNode, compte?: Compte ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; retournez Se connecter en tant que ${ellipsisAddress}; };

return ( <>

implémentation de l'interface

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

si (!adresse) { throw new Error("Adresse invalide"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ données : nonce, }); }

Interface de vérification des messages

typescript 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({ chaîne : mainnet, transport: 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("Invalid nonce"); }

const valid = await publicClient.verifySiweMessage({ message, adresse, signature, });

if (!valid) { throw new Error("Invalid signature"); }

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

Suggestions d'optimisation

Pour améliorer la vitesse de réponse de la connexion SIWE, il est recommandé d'utiliser un service de nœud spécialisé à la place du nœud RPC par défaut. Prenons l'exemple du service de nœud ZAN, après avoir obtenu la connexion HTTPS RPC du réseau principal Ethereum, remplacez le RPC par défaut de publicClient :

typescript const publicClient = createPublicClient({ chaîne : mainnet, transport: http('), //Service RPC des nœuds ZAN });

Cela peut réduire considérablement le temps de validation et améliorer la vitesse de l'interface.