SIWE: Ajouter des capacités d'identification aux Dapps

SIWE(Se connecter avec Ethereum) est une méthode de vérification de l'identification des utilisateurs sur Ethereum, similaire à l'initiation d'une transaction, prouvant le contrôle de l'utilisateur sur le portefeuille. Actuellement, la plupart des plugins de portefeuille prennent en charge cette méthode simple d'authentification, il suffit de signer les informations dans le plugin. Cet article discutera des scénarios de signature sur Ethereum.

Quand avez-vous besoin de SIWE

Si votre Dapp a les besoins suivants, vous pouvez envisager d'utiliser SWIE:

• Avoir un système utilisateur indépendant
• Besoin de consulter des informations liées à la vie privée des utilisateurs

Pour les applications axées sur la requête, comme etherscan, SIWE n'est pas nécessaire.

Bien que l'identification puisse être indiquée sur le front grâce à la connexion du portefeuille, pour les appels d'interface nécessitant un support backend, il n'est pas possible de prouver l'identification en ne transmettant que l'adresse, car l'adresse est une information publique.

Principe et processus de SIWE

Le processus SIWE peut être résumé comme suit : connecter le portefeuille - signer - obtenir une identification. Les étapes spécifiques sont les suivantes :

1. Connecter le portefeuille : Connectez le portefeuille dans le Dapp via le plugin de portefeuille.

2. Signature :

   • Obtenir la valeur de Nonce : appeler l'interface backend pour obtenir une valeur de Nonce aléatoire.
   • Construire le contenu de la signature : inclut la valeur Nonce, le nom de domaine, l'ID de la chaîne, etc.
   • Utilisez la méthode de signature de portefeuille pour signer le contenu.
   • Envoyer la signature au backend.

3. Obtenir une identification:

   • Après vérification de la signature par le backend, renvoie l'identification de l'utilisateur ( comme JWT ).
   • Les requêtes ultérieures doivent inclure l'adresse et l'identification, prouvant la propriété du portefeuille.

Pratique SIWE

Nous allons développer un Dapp supportant SIWE avec Next.js, l'objectif est de retourner un JWT pour la vérification de l'identification de l'utilisateur.

préparation

1. Installer Next.js :

npx create-next-app@14

2. Installer les dépendances SIWE :

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

réaliser SIWE

1. Importer WagmiProvider 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)="">

      (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;

2. 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}; };

return ( <> {jwt} ); }

mise en œuvre de l'interface

1. 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("Invalid address"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ données : nonce, }); }

2. 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";

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

if (!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 vérification de connexion SIWE, il est conseillé d'utiliser un service de nœud dédié. Vous pouvez utiliser le service de nœud ZAN pour remplacer le RPC par défaut de publicClient :

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

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