SIWE: Rendez l'identification de votre Dapp plus sûre et fiable

SIWE(Se connecter avec Ethereum) est une méthode de vérification de l'identification des utilisateurs sur Ethereum, similaire à l'initiation de transactions par un portefeuille, utilisée pour prouver que l'utilisateur a le contrôle de ce portefeuille. Actuellement, les principaux plugins de portefeuille prennent en charge cette méthode simple d'authentification, il suffit de signer les informations dans le portefeuille.

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

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 Dapp( axés sur la fonction de requête, comme les explorateurs de blocs ), il n'est pas nécessaire d'utiliser SIWE.

Vous pourriez vous demander, après avoir connecté le Dapp via le portefeuille, cela signifie-t-il déjà que la propriété du portefeuille est établie ? Cette affirmation n'est pas tout à fait exacte. Pour le frontend, la connexion du portefeuille peut effectivement prouver l'identification, mais pour les appels d'interface nécessitant un support backend, transmettre uniquement l'adresse ne peut pas vérifier l'identification, car l'adresse est une information publique.

Principe et processus de SIWE

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

connexion au portefeuille

C'est une opération Web3 courante, permettant de connecter 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 de Nonce à partir du frontend, construisez le contenu de la signature, qui comprend généralement le Nonce, le nom de domaine, l'ID de la chaîne et le contenu de la signature, etc. Ensuite, utilisez la méthode de signature fournie par le portefeuille pour signer le contenu.

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

obtenir identification

Après que la signature de validation du backend soit réussie, l'identification de l'utilisateur correspondante sera renvoyée, généralement sous forme de jeton JWT. Le frontend doit inclure l'adresse et l'identification dans les requêtes suivantes pour prouver la possession du portefeuille.

Pratique SIWE

Nous pouvons réaliser la fonctionnalité SIWE par des opérations pratiques, l'objectif est de permettre à Dapp de renvoyer un JWT pour la vérification de l'identification de l'utilisateur. Il est à noter que le demo suivant n'est utilisé que pour démontrer le processus de base, il pourrait y avoir des vulnérabilités de sécurité dans un environnement de production.

travaux préparatoires

Cet article utilise Next.js pour développer des applications, il est nécessaire de préparer un environnement Node.js. L'avantage d'utiliser Next.js est qu'il permet de développer directement des projets full-stack, sans avoir besoin de séparer le front-end et le back-end.

installation des dépendances

Tout d'abord, installez Next.js :

npx create-next-app@14

Après avoir terminé l'installation selon les instructions, entrez dans le répertoire du projet et démarrez le projet :

npm run dev

Installer les dépendances SIWE associées

Nous utilisons la bibliothèque de composants Ant Design Web3 pour mettre en œuvre la connexion au portefeuille et les fonctionnalités SIWE :

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

introduire Wagmi

La SIWE d'Ant Design Web3 dépend de la bibliothèque Wagmi. Nous importons le Provider correspondant dans layout.tsx pour que l'ensemble du projet puisse utiliser les Hooks fournis par Wagmi.

Tout d'abord, définissez la configuration du WagmiProvider :

jsx "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)=""> (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} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

export default WagmiProvider;

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

return ( <>

Ainsi, nous avons réalisé un cadre de connexion SIWE simple.

implémentation de l'interface

Nonce

Le nonce est utilisé pour générer un contenu de signature différent à chaque fois, améliorant ainsi la fiabilité de la signature. Le code d'implémentation est le suivant :

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

verifyMessage

Le backend doit vérifier le contenu de la signature et renvoyer un JWT pour les vérifications d'autorisation ultérieures :

javascript 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"; // 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("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 : jeton, }); }

Suggestions d'optimisation

Pour améliorer la vitesse de connexion SIWE, il est conseillé d'utiliser des services de nœuds spécialisés pour accélérer le temps de réponse de l'interface. Vous pouvez utiliser des services de nœuds comme ZAN, obtenir la connexion RPC correspondante 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 peut réduire considérablement le temps de validation et améliorer la vitesse de l'interface.