SIWE : un puissant outil d'identification pour les Dapps

SIWE (Sign-In with 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 ce mode de signature simple.

Cet article traite principalement des scénarios de signature sur Ethereum, sans aborder d'autres chaînes publiques.

Votre projet a-t-il besoin de SIWE ?

Si votre Dapp a les exigences suivantes, vous pouvez envisager d'utiliser SIWE:

• Avoir son propre système d'identification
• Il est nécessaire de consulter les informations liées à l'identification des utilisateurs.

Pour les Dapp( qui offrent principalement des fonctions de recherche comme etherscan), il n'est pas nécessaire d'utiliser SIWE.

Bien que l'identification puisse être confirmée par le front-end après la connexion du portefeuille, pour les appels d'interface nécessitant un support back-end, le simple transfert d'adresse ne peut pas prouver l'identification, car l'adresse est une information publique.

Principe et processus de SIWE

Le processus de SIWE comprend trois étapes : connecter le portefeuille, signer, obtenir l'identification.

connecter le portefeuille

C'est une opération Web3 courante, connectée à Dapp via un plugin de portefeuille.

signature

Les étapes de signature de SIWE comprennent :

1. Obtenir la valeur de Nonce : appeler l'interface backend pour obtenir une valeur de Nonce aléatoire, associée à l'adresse.

2. Construire le contenu de la signature : inclut la valeur Nonce, le nom de domaine, l'ID de la chaîne, etc.

3. Signature de portefeuille : signer le contenu en utilisant les méthodes fournies par le portefeuille.

4. Envoyer la signature : Envoyez la signature au backend pour vérification.

obtenir l'identification

Après que la vérification de la signature par le backend soit réussie, renvoyez l'identification de l'utilisateur ( comme JWT ). Les requêtes suivantes doivent inclure l'adresse et l'identification pour prouver la propriété du portefeuille.

Pratique SIWE

Nous allons développer une application full stack prenant en charge SIWE avec Next.js.

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

introduire Wagmi

Importer WagmiProvider dans layout.tsx :

jsx import { WagmiWeb3ConfigProvider } from "@ant-design/web3-wagmi";

const WagmiProvider = ({ children }) => { return ( <wagmiweb3configprovider config="｛｛" siwe:="" {="" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => createSiweMessage({ ...props, statement: "Ant Design Web3" }), verifyMessage: async (message, signature) => { const jwt = (attendre vérifierMessage(message, signature)).données; setJwt(jwt); return !!jwt; }, }, chaînes : [Mainnet], transports : { [Mainnet.id]: http(), }, portefeuilles: [MetaMask(), WalletConnect(), TokenPocket(), OkxWallet()] ｝｝ > {children} ); };

ajouter un bouton de connexion

Créer un bouton pour connecter le portefeuille et signer :

jsx export default function App() { const jwt = React.useContext(JwtProvider);

return ( <connectbutton.connector> {({ compte, connecter }) => ( {account ? connecté : ${account.address.slice(0,6)}...${account.address.slice(-4)} : "Connecter le portefeuille"} )} </connectbutton.connector> ); }

réaliser l'interface backend

Interface Nonce

javascript export async function GET(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(address, nonce); return Response.json({ data: nonce }); }

Interface de vérification de signature

javascript export async function POST(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, });

if (!valid) { throw new Error("Invalid signature"); }

const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ data: token }); }

Optimisation des performances

Pour améliorer la vitesse de vérification, il est conseillé d'utiliser un service de nœud spécialisé. Vous pouvez utiliser le service de nœud de ZAN pour remplacer le RPC par défaut :

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

Cela améliorera considérablement la vitesse de réponse de l'interface.