Authentification Ethereum : Guide de mise en œuvre de SIWE

SIWE(Se connecter avec Ethereum) est un moyen d'authentification des utilisateurs basé sur Ethereum, similaire à une transaction initiée par un portefeuille, permettant de prouver le contrôle d'un utilisateur sur un portefeuille spécifique. Actuellement, la plupart des plugins de portefeuille prennent en charge ce moyen d'authentification simple, il suffit de signer les informations dans le plugin.

Cet article se concentrera sur la mise en œuvre de SIWE sur Ethereum, sans aborder d'autres blockchains publiques telles que Solana, SUI, etc.

Cas d'utilisation de SIWE

Si votre application décentralisée (Dapp) a les besoins suivants, vous pouvez envisager d'utiliser SIWE:

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

Pour les applications principalement axées sur la requête ( telles que les explorateurs de blocs ), il n'est pas nécessaire d'utiliser SIWE.

Bien que la connexion par portefeuille dans les Dapp puisse indiquer une identification, cela n'est valable que pour le front-end. Pour les appels d'interface nécessitant un soutien back-end, il ne suffit pas de transmettre des informations d'adresse, car l'adresse est une information publique.

Fonctionnement de SIWE

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

Connecter le portefeuille

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

Le backend génère une valeur aléatoire Nonce et l'associe à l'adresse, en préparation pour la signature suivante. Le frontend obtient la valeur Nonce et construit le contenu de la signature, y compris la valeur Nonce, le nom de domaine, l'ID de la chaîne, etc., puis utilise la méthode fournie par le portefeuille pour signer. Enfin, la signature est envoyée au backend pour vérification.

obtenir l'identification

Après la validation de la signature par le backend, renvoyez l'identification de l'utilisateur ( comme JWT ). Lors des demandes ultérieures du frontend, portez l'adresse et l'identification, ce qui prouve la propriété du portefeuille.

Exemple d'implémentation de SIWE

Ci-dessous, nous allons démontrer comment implémenter la fonctionnalité SIWE dans un projet Nextjs, permettant à la Dapp de retourner un JWT pour la vérification de l'identification de l'utilisateur.

préparation de l'environnement

Cet exemple est développé avec Nextjs, il est nécessaire de préparer un environnement Node.js. Avec Nextjs, il est facile de développer des projets full stack sans avoir à séparer le front-end et le back-end.

Installer les dépendances

Tout d'abord, installez Nextjs :

npx create-next-app@14

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

npm run dev

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

Installer les dépendances liées à SIWE

Nous allons utiliser Ant Design Web3 pour réaliser la connexion du portefeuille, qui est gratuit, maintenu en continu, et dont l'expérience utilisateur est similaire à celle d'une bibliothèque de composants ordinaire, prenant en charge la fonctionnalité SIWE.

Installer les dépendances associées:

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

configurer Wagmi

Importer WagmiProvider dans layout.tsx :

typescript "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 siweconfig="｛｛" getnonce:="" async="" (address)="">

      (attendre getNonce(adresse)).données,
    createMessage: (props) => {
      return createSiweMessage({ ...props, statement: "Ant Design Web3" });
    },
    verifyMessage: async (message, signature) => {
      const jwt = (attendre verifyMessage(message, signature)).données;
      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;

bouton de connexion

Ajouter un bouton de connexion au portefeuille et de signature :

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

return ( <> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton></connectbutton></space>

réaliser l'interface backend

Interface Nonce

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

typescript 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");

if (!address) { throw new Error("Invalid address"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(adresse, nonce); return Response.json({ données : nonce, }); }

Interface de vérification des messages

Vérifiez la signature et renvoyez le JWT :

typescript 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);

si (!nonce || nonce !== addressMap.get(address)) { throw new Error("Invalid nonce"); }

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

Optimisation de la performance

Pour améliorer la vitesse de vérification, il est conseillé d'utiliser un service de nœud dédié. Prenons comme exemple le service de nœud ZAN, après avoir obtenu la connexion HTTPS RPC du réseau principal Ethereum, remplacez le RPC par défaut de publicClient:

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

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