SIWE : un puissant outil pour renforcer l'identification des Dapps

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 grand public prennent en charge cette méthode d'authentification simple, il suffit de signer les informations dans le plugin.

Cet article se concentrera sur les scénarios de signature sur Ethereum, sans aborder d'autres blockchains publiques telles que Solana, SUI, etc.

Quand faut-il utiliser SIWE ?

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

• Avoir un système utilisateur indépendant
• Besoin de consulter des informations liées à la confidentialité des utilisateurs

Pour les Dapps ( qui offrent principalement des fonctionnalités de recherche, comme les explorateurs de blocs ), SIWE peut ne pas être utilisé.

Bien que l'identification semble avoir été prouvée après avoir connecté le portefeuille sur le Dapp, cela n'est vrai que pour le front-end. Pour les appels d'interface nécessitant un support back-end, il ne suffit pas de transmettre l'adresse, car l'adresse est une information publique, facilement usurpée.

Principe et processus de SIWE

Le processus SIWE peut être résumé en trois étapes : connecter le portefeuille - signer - obtenir une identification. Examinons en détail ces trois étapes.

connecter le portefeuille

C'est une opération Web3 courante, qui connecte le portefeuille de l'utilisateur 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.

Tout d'abord, il est nécessaire d'appeler l'interface backend pour obtenir la valeur de Nonce. Le backend générera un Nonce aléatoire et l'associera à l'adresse actuelle, en préparation pour la signature ultérieure.

Après avoir obtenu la valeur Nonce à partir du frontend, construisez le contenu de la signature, qui comprend généralement la valeur Nonce, le nom de domaine, l'ID de la chaîne et le contenu de la signature, etc. Ensuite, utilisez la méthode fournie par le portefeuille pour signer le contenu.

Enfin, envoyez la signature au backend pour vérification.

obtenir l'identification

Après que la vérification de la signature par le backend a réussi, un identifiant d'utilisateur sera renvoyé, tel que JWT. Lors des demandes 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 une application SIWE simple avec Next.js, l'objectif est de permettre à Dapp de renvoyer un JWT pour l'identification. Notez que cette démonstration est uniquement destinée à présenter le processus de base, il peut y avoir des vulnérabilités de sécurité dans un environnement de production.

préparation

Nous devons préparer l'environnement Node.js et utiliser Next.js pour développer un projet full stack.

installation des dépendances

Tout d'abord, installez Next.js :

npx create-next-app@14

Après avoir terminé l'installation selon les instructions, accédez au répertoire du projet et exécutez :

npm run dev

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

Installer les dépendances SIWE

Nous allons utiliser Ant Design Web3, qui est gratuit, maintenu en continu, avec une expérience utilisateur similaire à celle d'une bibliothèque de composants classique et qui prend en charge SIWE. La commande d'installation est la suivante:

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)=""> (await getNonce(address)).data, 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;

Ensuite, ajoutez le bouton de connexion du portefeuille :

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)} : ""; retourner Se connecter en tant que ${ellipsisAddress}; };

return ( <>

À ce stade, nous avons déjà mis en place le cadre de connexion SIWE de base.

implémentation de l'interface

Maintenant, nous allons mettre en œuvre l'interface de vérification de l'identification de l'utilisateur côté serveur.

Nonce

Nonce est utilisé pour augmenter la fiabilité de la signature. Nous générons une chaîne de caractères aléatoire et l'associons à l'identification :

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

signMessage

signMessage est généralement effectué par un plugin de portefeuille, nous utilisons la méthode de signature de Wagmi.

verifyMessage

Le back-end doit vérifier le contenu de la signature et effectuer une vérification de sécurité:

javascript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt from "jsonwebtoken"; import { parseSiweMessage } from "viem/siwe"; importer { addressMap } de "../cache";

const JWT_SECRET = "your-secret-key"; // Veuillez utiliser une clé plus sécurisée et ajouter des vérifications d'expiration, etc.

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 vérification, il est recommandé d'utiliser un service de nœud spécialisé. Vous pouvez utiliser le service de nœud ZAN, obtenir une connexion HTTPS RPC, puis remplacer le RPC par défaut dans le code.

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

Cela réduira considérablement le temps de validation et améliorera la vitesse de l'interface.