Guia de Implementação da Tecnologia SIWE: Construir um Sistema de Autenticação de Identidade Dapp Poderoso

SIWE(Iniciar sessão com Ethereum) é uma forma de verificar a identificação do usuário na Ethereum, semelhante ao iniciar uma transação, provando o controle do usuário sobre a carteira. Atualmente, a maioria dos plugins de carteiras populares suporta esta forma simples de autenticação, bastando assinar no plugin.

Este artigo discute principalmente cenários de assinatura na Ethereum, não envolvendo outras blockchains.

Quando é que é necessário usar SIWE

Se a sua Dapp tiver as seguintes necessidades, pode considerar usar SIWE:

• Ter um sistema de utilizadores independente
• É necessário consultar informações relacionadas à identificação do usuário

Para aplicações centradas na consulta, como exploradores de blocos semelhantes ao etherscan, não é necessário usar o SIWE.

Embora a conexão da carteira na interface do Dapp já pareça provar a identificação, para chamadas de interface que requerem suporte de back-end, apenas transmitir o endereço não é suficiente, pois o endereço é uma informação pública e fácil de ser falsificada.

Princípios e Fluxo do SIWE

O processo SIWE pode ser resumido em três etapas: conectar a carteira, assinar, obter identificação.

conectar carteira

Esta é uma operação comum do Web3, conectando a carteira na Dapp através do plugin da carteira.

assinatura

Inclui três etapas: obtenção do valor Nonce, assinatura da carteira e verificação da assinatura no backend:

1. Obter o valor Nonce gerado aleatoriamente do backend, associado ao endereço atual.

2. Construir o conteúdo da assinatura no front-end, incluindo o valor Nonce, o domínio, o ID da cadeia, entre outras informações, e assinar usando o método fornecido pela carteira.

3. Enviar a assinatura para o backend para verificação.

obter identificação

Após a verificação da assinatura no backend, retorne a identificação do usuário ( como JWT). As solicitações subsequentes do frontend devem incluir o endereço e a identificação, para provar a propriedade da carteira.

Guia Prático

A seguir, será apresentada a forma de implementar a funcionalidade SIWE no projeto Nextjs, retornando um JWT para verificação de identificação.

preparação do ambiente

1. Instalar Nextjs:

npx create-next-app@14

2. Instalar dependências relacionadas ao SIWE:

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

introduzir Wagmi

Introduzir WagmiProvider em layout.tsx:

javascript "use client"; import { getNonce, verifyMessage } from "@/app/api"; importar { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, ] de "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; importar 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)=""> (await getNonce(address)).data, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, verificarMensagem: async (mensagem, assinatura) => { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt); return !!jwt; }, ｝｝ chains={[Mainnet]} transports=｛｛ [Mainnet.id]: http(), ｝｝ walletConnect=｛｛ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ carteiras={[} MetaMask(), WalletConnect(), TokenPocket({ grupo: "Popular", }), OkxWallet(), ]} queryClient={queryClient} > {children} ); };

export default WagmiProvider;

adicionar botão de ligação

Adicionar botões de conectar carteira e assinar no componente:

javascript "use client"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; import React from "react"; import { JwtProvider } from "./JwtProvider";

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

const renderSignBtnText = ( defaultDom: React.ReactNode, conta?: Conta ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; retornar Entrar como ${ellipsisAddress}; };

return ( <>

implementação da 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");

se (!endereço) { throw new Error("Endereço inválido"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ dados: nonce, }); }

Interface de verificação de assinatura

javascript importar { criarClientePúblico, http } de "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({ cadeia: mainnet, transporte: http(), });

export async function POST(request: Request) { const { signature, message } = await request.json();

const { nonce, address = "0x" } = parseSiweMessage(message);

se (!nonce || nonce !== addressMap.get(address)) { throw new Error("Nonce inválido"); }

const valid = await publicClient.verifySiweMessage({ mensagem, endereço, assinatura, });

se (!válido) { throw new Error("Invalid signature"); }

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

Sugestões de otimização

Para aumentar a velocidade de login do SIWE, recomenda-se o uso de um serviço de nó dedicado. Tomando como exemplo o serviço de nó ZAN, após obter a conexão HTTPS RPC da rede principal do Ethereum, substitua o RPC padrão do publicClient:

javascript const publicClient = createPublicClient({ cadeia: mainnet, transporte: http('), //Serviço RPC do nó ZAN });

Desta forma, é possível reduzir significativamente o tempo de validação e aumentar a velocidade de resposta da interface.