SIWE: Implémentation simple de la connexion à Ethereum

SIWE(Se connecter avec Ethereum) est une méthode de vérification de l'identité de l'utilisateur sur Ethereum, similaire à l'initiation d'une transaction par le portefeuille, indiquant que l'utilisateur a le contrôle sur ce portefeuille. Actuellement, le processus d'authentification est très simple, il suffit de signer les informations dans le plugin de portefeuille, la plupart des plugins de portefeuille courants le prennent en charge.

Cet article discute des scénarios de signature sur Ethereum, sans aborder d'autres blockchains comme Solana ou SUI.

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

Mais si votre Dapp est principalement une fonction de requête, comme une application similaire à etherscan, alors vous n'avez pas nécessairement besoin de SIWE.

Bien que la connexion à un portefeuille via Dapp signifie que vous possédez le portefeuille, cela ne s'applique qu'au 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 et n'importe qui peut "emprunter".

Principe et processus de SIWE

Le processus SIWE peut être résumé en trois étapes : connexion du portefeuille - signature - obtention de l'identifiant.

se connecter au portefeuille

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

signature

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

Obtenir la valeur Nonce nécessite d'appeler l'interface backend. Après avoir reçu la demande, 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 par le front-end, construisez le contenu de la signature, y compris la valeur Nonce, le nom de domaine, l'ID de chaîne, le contenu de la signature, etc. En général, utilisez la méthode de signature fournie par le portefeuille pour signer le contenu.

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

obtenir une identification

Après que la vérification de la signature par le backend ait réussi, un identifiant d'utilisateur correspondant sera renvoyé, tel que JWT. Lorsque le frontend envoie ultérieurement une requête au backend, il doit inclure l'adresse et l'identifiant correspondant, ce qui permet de prouver la propriété du portefeuille.

Pratique

Nous allons développer un cadre de connexion SIWE simple avec Next.js. Cette démo est uniquement destinée à présenter le processus de base de SIWE, et il pourrait y avoir des problèmes de sécurité dans un environnement de production.

préparation

Tout d'abord, installez Next.js :

npx create-next-app@14

Suivez les instructions pour terminer l'installation. Une fois dans le répertoire du projet, exécutez :

npm run dev

Visitez localhost:3000 pour voir un projet Next.js de base.

Installer les dépendances liées à SIWE

Nous allons utiliser Ant Design Web3, car il est gratuit, activement maintenu et l'expérience utilisateur est similaire à celle d'une bibliothèque de composants ordinaire, prenant en charge SIWE.

Exécutez la commande suivante pour installer les dépendances :

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

introduire Wagmi

Ant Design Web3 dépend de la bibliothèque Wagmi pour SIWE. Importez le Provider correspondant dans layout.tsx :

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

Puis, définissez un bouton de connexion :

javascript "use client"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; importer React depuis "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 ( <>

Implémentation de l'interface

Nonce

Nonce est utilisé pour augmenter la fiabilité de la signature. Implémentation comme suit :

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

vérifierMessage

Implémentation de la vérification de signature côté serveur :

javascript importer { createPublicClient, http } de "viem" ; importer { mainnet } de "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 les vérifications d'expiration correspondantes.

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("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 l'interface, il est conseillé d'utiliser des services de nœuds dédiés. Par exemple, vous pouvez utiliser le service de nœuds de ZAN pour remplacer le RPC par défaut de publicClient :

javascript const publicClient = createPublicClient({ chaîne : mainnet, transport: http('), // service RPC ZAN });

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