L'application et la pratique de SIWE dans les applications Web3

SIWE(Se connecter avec Ethereum) est un moyen d'authentification des utilisateurs basé sur Ethereum, similaire à une transaction initiée par un portefeuille, destinée à prouver le contrôle de l'utilisateur sur le portefeuille. Actuellement, les principaux plugins de portefeuille prennent largement en charge cette méthode d'authentification simple, il suffit de signer les informations dans le plugin. Cet article discute principalement des scénarios de signature sur Ethereum, sans aborder d'autres chaînes publiques.

Scénarios d'application de SIWE

SIWE est principalement utilisé pour résoudre le problème de vérification de l'identité des adresses de portefeuille. Si votre application 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 fonction de recherche, comme les explorateurs de blocs, SIWE peut ne pas être utilisé.

Bien que l'identité puisse être indiquée par la connexion du portefeuille sur le front-end de l'application, il n'est pas suffisant de transmettre uniquement l'adresse pour les appels d'interface nécessitant un support back-end, car l'adresse est une information publique et susceptible d'être volée par d'autres.

Principe et processus de SIWE

Le processus de SIWE peut être résumé en trois étapes : connecter le portefeuille, signer, obtenir une identification.

Connecter le portefeuille

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

signature

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

1. Obtenir la valeur Nonce : appeler l'interface backend pour obtenir une valeur Nonce aléatoire et l'associer à l'adresse actuelle.

2. Construire le contenu de la signature : inclut la valeur Nonce, le nom de domaine, l'ID de la chaîne, le contenu de la signature, etc., en utilisant les méthodes fournies par le portefeuille pour signer.

3. Envoyer la signature : envoyer la signature au backend pour vérification.

Obtenir l'identifiant

Une fois la validation de la signature en arrière-plan effectuée, l'identifiant utilisateur ( est renvoyé comme JWT ). Les requêtes ultérieures du front-end doivent inclure l'adresse et l'identifiant, ce qui prouve la propriété du portefeuille.

Guide pratique

Voici comment intégrer rapidement SIWE dans l'application, l'objectif est de retourner un JWT pour la vérification de l'identité de l'utilisateur. Notez que cet exemple est uniquement destiné à démontrer le processus de base, une utilisation en production peut présenter des risques de sécurité.

Préparation de l'environnement

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

Après être entré dans le répertoire du projet, exécutez :

npm run dev

Installer les dépendances liées à SIWE

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

Configuration de Wagmi

Importer WagmiProvider dans layout.tsx :

javascript "utiliser le 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)="">

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

); };

export default WagmiProvider;

Ajouter 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 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 S'identifier en tant que ${ellipsisAddress}; };

retourner ( <>

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

Interface de vérification des messages

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

const JWT_SECRET = "your-secret-key"; // Veuillez utiliser une clé plus sécurisée et ajouter une vérification 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("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, }); }

Optimisation de la performance

Pour améliorer la vitesse de réponse de la connexion SIWE, il est recommandé d'utiliser un service de nœud dédié à la place du nœud RPC par défaut. Cet article utilise le service de nœud ZAN, qui peut être obtenu dans son tableau de bord.

Remplacer le RPC par défaut de publicClient :

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.