SIWE : Utiliser Ethereum pour des signatures permettant une authentification Dapp plus puissante

SIWE(Se connecter avec Ethereum) est un moyen de vérifier l'identification des utilisateurs sur Ethereum, semblable à l'initiation d'une transaction, utilisé pour prouver le contrôle de l'utilisateur sur le portefeuille. Actuellement, la plupart des plugins de portefeuille prennent en charge ce type de vérification par signature simple.

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
• Besoin de consulter des informations liées à la vie privée des utilisateurs

Pour les applications axées sur la consultation comme etherscan(, il n'est pas nécessaire d'utiliser SIWE.

Bien que l'identification puisse être indiquée après la connexion du portefeuille sur le front-end de la 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 être facilement usurpée.

![Manuel d'utilisation de SIWE : Comment rendre votre Dapp plus puissant ?])https://img-cdn.gateio.im/webp-social/moments-9e9c9e786391f84b004cd8450a29acce.webp(

Principe et processus de SIWE

Le processus de base de SIWE comprend trois étapes : connecter le portefeuille, signer, obtenir une identification.

) Connecter le portefeuille

Connecter le portefeuille de l'utilisateur dans le Dapp via un plugin de portefeuille.

signature

Les étapes de signature comprennent :

1. Obtenir la valeur de Nonce : appeler l'interface backend pour obtenir une valeur de Nonce générée aléatoirement.
2. Construire le contenu de la signature : inclut la valeur Nonce, le nom de domaine, l'ID de la chaîne, etc.
3. Utiliser un portefeuille pour signer
4. Envoyer la signature au backend pour vérification

obtenir l'identification

Après que la vérification de la signature par le backend soit réussie, renvoyez l'identification de l'utilisateur ### comme JWT (. Ensuite, lors de la demande du frontend, il suffit de transporter l'adresse et l'identification pour prouver la propriété du portefeuille.

![Manuel d'utilisation SIWE : Comment rendre votre Dapp plus puissant ?])https://img-cdn.gateio.im/webp-social/moments-138fc08a9148099755d1fe162292922f.webp(

Pratique SIWE

Voici comment implémenter SIWE dans le projet, l'objectif est de permettre à Dapp de renvoyer un JWT pour l'identification de l'utilisateur.

) préparation

Cet article utilise Next.js pour développer des applications full-stack, il est nécessaire de préparer un environnement Node.js.

Installer les dépendances

Tout d'abord, installez Next.js :

npx create-next-app@14

Accédez au répertoire du projet et exécutez :

npm run dev

Accédez à localhost:3000 pour voir le projet de base Next.js.

Installer les dépendances SIWE

Utiliser Ant Design Web3 pour établir une connexion de portefeuille :

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

![Manuel d'utilisation SIWE : comment rendre votre Dapp plus puissant ?]###https://img-cdn.gateio.im/webp-social/moments-355ea961b315585f7d217cbcf6a3fa69.webp(

) introduction de Wagmi

Importer WagmiProvider dans layout.tsx :

jsx "use client"; import { getNonce, verifyMessage } from "@/app/api"; import { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } de "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; importer React depuis "react"; import { createSiweMessage } from "viem/siwe"; import { http } from "wagmi";

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( =\u003e { return createSiweMessage){ ...props, statement: "Ant Design Web3" }(; }, verifyMessage: async )message, signature( => { const jwt = )await verifyMessage(message, signature().data; setJwt)jwt(; return !!jwt; }, ｝｝ chains={)} transports=｛｛ [Mainnet.id]: http[Mainnet](, ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ portefeuilles={[} MetaMask)(, WalletConnect)(, TokenPocket){ groupe : "Populaire", }(, OkxWallet)(, ]} queryClient={queryClient} > {children} ); };

export default WagmiProvider;

![Manuel d'utilisation SIWE : Comment rendre votre Dapp plus puissant ?])https://img-cdn.gateio.im/webp-social/moments-53c03d1cb26f29a9d739e3d1aa0816df.webp(

) bouton de connexion

jsx "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";

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 Connexion en tant que ${ellipsisAddress}; };

return ) <>

![Manuel d'utilisation de SIWE : Comment rendre votre Dapp plus puissant ?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

Mise en œuvre 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)"Adresse invalide"(; } 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(;

if )!nonce || nonce !== addressMap.get(address() { throw new Error)"Nonce invalide"(; }

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 : jeton, }(; }

![Manuel d'utilisation SIWE : Comment rendre votre Dapp plus puissant ?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

Suggestions d'optimisation

Pour améliorer la vitesse de validation, il est conseillé d'utiliser un service de nœud spécialisé pour remplacer le RPC par défaut. Par exemple, utilisez le service de nœud ZAN :

javascript 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.

![Manuel d'utilisation SIWE : Comment rendre votre Dapp plus puissant ?])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(