Guide d'utilisation de SIWE : améliorez les fonctionnalités de votre Dapp

SIWE (Sign-In with Ethereum) est un moyen de vérifier l'identité 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 ce mode d'authentification simple, il suffit de signer dans le plugin.

Cet article discute principalement des scénarios de signature sur Ethereum, sans aborder d'autres chaînes publiques telles que Solana, SUI, etc.

Votre 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, similaire à etherscan, vous pouvez ne pas utiliser SIWE.

Vous pourriez vous demander, après avoir connecté un portefeuille sur Dapp, cela ne signifie-t-il pas que la propriété du portefeuille est établie ? Ce n'est pas tout à fait exact. Pour le frontend, connecter un portefeuille indique en effet une identité, mais pour les appels d'interface qui nécessitent un support backend, il ne suffit pas de transmettre l'adresse pour prouver l'identité, car l'adresse est une information publique que n'importe qui peut utiliser.

Principe et processus de SIWE

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

Connecter un portefeuille

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

signature

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

Pour obtenir la valeur Nonce, il est nécessaire d'appeler l'interface backend. Le backend génère une valeur Nonce aléatoire et l'associe à l'adresse actuelle, en préparation pour la signature ultérieure.

Après avoir obtenu la valeur Nonce à l'avant, construisez le contenu de la signature, y compris la valeur Nonce, le nom de domaine, l'ID de la chaîne et le contenu de la signature, généralement en utilisant les méthodes fournies par le portefeuille pour signer.

Après avoir construit la signature, envoyez-la au backend.

Obtenir l'identifiant

Après que la vérification de la signature en arrière-plan soit réussie, un identifiant d'utilisateur est renvoyé, tel que JWT. Lors des demandes ultérieures du front-end, l'adresse et l'identifiant d'utilisateur doivent être fournis pour prouver la propriété du portefeuille.

Pratique

Nous allons développer une application full-stack avec Next.js, intégrant la fonctionnalité SIWE. Notez que cette démo est uniquement destinée à montrer le processus de base et n'est pas adaptée à une utilisation en production.

travaux préparatoires

Assurez-vous que l'environnement Node.js est installé.

Installer les dépendances

Tout d'abord, installez Next.js :

npx create-next-app@14

Terminez l'installation en suivant les instructions.

Entrez dans le répertoire du projet, exécutez le projet :

npm run dev

Accéder à localhost:3000 permet de voir un projet Next.js de base.

Installer les dépendances liées à SIWE

Nous choisissons d'utiliser Ant Design Web3, car il est gratuit, maintenu en continu, offre une bonne expérience utilisateur et prend en charge SIWE.

Installer les dépendances :

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

Introduire Wagmi

Importer le Provider pertinent 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);

retourner ( <wagmiweb3configprovider siweconfig="｛｛" getnonce:="" async="" (address)=""> (attendre getNonce(adresse)).données, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, vérifierMessage: 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 au portefeuille :

typescript "utiliser le 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)} : ""; retour Connexion en tant que ${ellipsisAddress}; };

retourner ( <>

implémentation de l'interface

Nonce

Générer un Nonce aléatoire et l'associer à une adresse:

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(adresse, nonce); return Response.json({ données : nonce, }); }

vérifierMessage

Vérifiez la signature et renvoyez le JWT :

typescript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt depuis "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("Nonce invalide"); }

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

si (!valid) { throw new Error("Signature invalide"); }

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

Suggestions d'optimisation

Pour améliorer la vitesse de vérification, il est recommandé d'utiliser un service de nœud spécialisé. Vous pouvez utiliser le service de nœud de ZAN, après avoir obtenu la connexion RPC, remplacez le RPC par défaut dans le code.

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

Cela peut considérablement améliorer la vitesse de réponse de l'interface.