SIWE : un puissant outil de connexion Ethereum

SIWE (Se connecter avec Ethereum) est une méthode pour vérifier l'identité des utilisateurs sur Ethereum. Semblable à l'initiation d'une transaction, elle prouve le contrôle de l'utilisateur sur le portefeuille par une signature. Actuellement, la plupart des plugins de portefeuille grand public prennent en charge cette méthode simple d'authentification.

Cet article discute principalement des scénarios de signature sur Ethereum, sans aborder d'autres blockchains publiques comme 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 principalement fournissant des fonctionnalités de recherche comme les explorateurs de blocs (, il se peut que SIWE ne soit pas nécessaire.

Bien que la connexion via un portefeuille puisse prouver l'identité sur le front-end, pour les appels API nécessitant un support back-end, il ne suffit pas de transmettre l'adresse, car l'adresse est une information publique que n'importe qui peut utiliser.

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

Le principe et le 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 courante dans les applications Web3, qui connecte le portefeuille de l'utilisateur via un plugin de portefeuille.

signature

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

Tout d'abord, récupérez la valeur Nonce générée aléatoirement depuis le backend, le backend l'associera à l'adresse actuelle.

Après avoir obtenu la valeur Nonce côté front-end, construisez le contenu de la signature, y compris le Nonce, le nom de domaine, l'ID de la chaîne, etc., puis utilisez la méthode de signature du portefeuille pour signer.

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

obtenir une identité

Après la validation de la signature par le backend, un identifiant d'utilisateur ### sera renvoyé, comme JWT(. Lors des requêtes ultérieures du frontend, il suffit d'inclure l'adresse et l'identifiant d'utilisateur pour prouver la propriété du portefeuille.

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

Pratique SIWE

Nous allons pratiquer le processus de base de SIWE à travers une simple démo, avec pour objectif de permettre à la Dapp de renvoyer un JWT pour la vérification de l'identité.

Attention : cette démonstration est uniquement utilisée pour montrer le processus de base, l'utilisation en environnement de production peut présenter des risques de sécurité.

) préparation

Nous utilisons Next.js pour développer des applications full stack, nous devons préparer l'environnement Node.js.

Installer les dépendances

Tout d'abord, installez Next.js :

npx create-next-app@14

Suivez les instructions pour terminer l'installation.

Accédez au répertoire du projet et démarrez :

npm run dev

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

Installer les dépendances SIWE

Nous utilisons Ant Design Web3 pour connecter le portefeuille et réaliser la fonctionnalité SIWE :

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

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

) introduire 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 de "react"; importer { createSiweMessage } de "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 = ){ enfants }( => { const [jwt, setJwt] = React.useState)null(;

retourner ) <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={)}
  transports=｛｛
    [Mainnet.id]: http[Mainnet](,
  ｝｝
  walletConnect=｛｛
    projectId: YOUR_WALLET_CONNECT_PROJECT_ID,
  ｝｝
  portefeuilles={[ 
    MetaMask)(,
    WalletConnect)(,
    TokenPocket){
      groupe: "Populaire",
    }(,
    OkxWallet)(,
  ]}
  queryClient={queryClient}
>
  {children}
</wagmiweb3configprovider>

); };

export default WagmiProvider;

Ensuite, ajoutez le bouton de connexion au portefeuille :

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

return ) <> </connecteur></boutonconnexion></espace>

Ainsi, un cadre de connexion SIWE de base a été réalisé.

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

) implémentation de l'interface

Maintenant, réalisons certaines interfaces nécessaires pour le backend.

Nonce

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

javascript import { randomBytes } from "crypto"; importer { addressMap } de "../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)adresse, nonce(; return Response.json){ données : nonce, }(; }

)# verifyMessage

Vérifier la signature et retourner le JWT:

javascript import { createPublicClient, http } from "viem"; importer { mainnet } de "viem/chains"; import jwt de "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 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 : token, }(; }

À ce stade, une application Dapp SIWE de base est développée.

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

Optimisation des performances

Pour améliorer la vitesse de validation, il est conseillé d'utiliser un service de nœud spécialisé. Ici, nous utilisons le service de nœud de ZAN, remplaçant le RPC par défaut de publicClient :

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

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(