Guide de mise en œuvre de la technologie SIWE : construire un système d'authentification Dapp puissant

SIWE(Connexion avec Ethereum) est un moyen de vérifier l'identification des utilisateurs sur Ethereum, similaire à l'initiation d'une transaction, prouvant le contrôle des utilisateurs sur leur portefeuille. Actuellement, les principaux plugins de portefeuille prennent en charge ce mode de vérification d'identité simple, il suffit de signer dans le plugin.

Cet article traite principalement des scénarios de signature sur Ethereum, sans aborder d'autres blockchains publiques.

Quand faut-il utiliser SIWE

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

• Avoir un système d'utilisateur indépendant
• Nécessité de consulter des informations liées à la vie privée des utilisateurs

Pour les applications axées sur la requête, comme les explorateurs de blocs similaires à etherscan, il n'est pas nécessaire d'utiliser SIWE.

Bien que l'identification semble avoir été prouvée après la connexion du portefeuille à l'interface utilisateur Dapp, il n'est pas suffisant de simplement transmettre l'adresse pour les appels d'interface nécessitant un support back-end, car l'adresse est une information publique et peut facilement être usurpée.

Principe et processus de SIWE

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

connecter le portefeuille

C'est une opération Web3 courante, connecter un portefeuille dans une Dapp via un plugin de portefeuille.

signature

y compris trois étapes : obtenir la valeur Nonce, la signature du portefeuille et la vérification de la signature du backend.

1. Obtenez la valeur de Nonce générée aléatoirement depuis le backend, associée à l'adresse actuelle.

2. Construire le contenu de la signature côté client, y compris la valeur Nonce, le nom de domaine, l'ID de chaîne et d'autres informations, en utilisant la méthode fournie par le portefeuille pour signer.

3. Envoyer la signature au backend pour vérification.

obtenir une identification

Après la vérification de la signature par le back-end, l'identification de l'utilisateur ( est renvoyée comme JWT). Les requêtes ultérieures du front-end incluent l'adresse et l'identification, ce qui prouve la propriété du portefeuille.

Guide de pratique

Voici comment implémenter la fonctionnalité SIWE dans un projet Nextjs, renvoyant un JWT pour l'identification.

préparation de l'environnement

1. Installer Nextjs:

npx create-next-app@14

2. Installer les dépendances SIWE associées :

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

introduction de Wagmi

Importer WagmiProvider dans layout.tsx :

javascript "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} > {children} ); };

export default WagmiProvider;

Ajouter un bouton de connexion

Ajouter un bouton de connexion de portefeuille et un bouton de signature dans le composant :

javascript "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 Vous connecter en tant que ${ellipsisAddress}; };

return ( <>

implémentation de l'interface

Interface 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 (!adresse) { throw new Error("Invalid address"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ données : nonce, }); }

Interface de vérification de signature

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({ 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, });

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

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

Suggestions d'optimisation

Pour améliorer la vitesse de connexion SIWE, il est recommandé d'utiliser un service de nœud spécialisé. 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 :

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

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