Introdução ao SIWE: Torne a autenticação da sua Dapp mais segura

SIWE(Entrar com Ethereum) é um método de autenticação de usuário baseado em Ethereum. Semelhante a iniciar uma transação, o usuário prova o controle sobre a carteira através da assinatura. Atualmente, a maioria dos plugins de carteira populares já suporta este método simples de autenticação.

Cenários de aplicação do SIWE

Se a sua Dapp tiver os seguintes requisitos, pode considerar usar o SIWE:

• Ter um sistema de utilizadores independente
• É necessário consultar informações relacionadas à privacidade do utilizador

Para Dapp( que se baseia principalmente em consultas, como exploradores de blocos), o SIWE pode não ser necessário.

É importante notar que apenas conectar a uma carteira não prova completamente a identificação. Para chamadas de interface que requerem suporte de backend, ainda é necessária validação adicional, caso contrário, qualquer pessoa pode "emprestar" informações de endereço públicas.

Como funciona o SIWE

O fluxo básico do SIWE inclui três etapas: conectar a carteira, assinar, obter identificação.

1. Conectar carteira: conectar a carteira do usuário através do plugin da carteira

2. Assinatura:

   • Obter o valor do Nonce: chamar a interface de back-end para obter um valor de Nonce aleatório
   • Construir conteúdo da assinatura: inclui informações como Nonce, nome de domínio, ID da cadeia, etc.
   • Usar a carteira para assinar
   • Enviar a assinatura para validação no backend

3. Obter identificação: Após a validação da assinatura no backend, retorna a identificação do usuário ( como JWT )

Prática SIWE

Abaixo, vamos praticar o processo SIWE através de um simples Demo. Note que este Demo é apenas para demonstrar o processo básico e não deve ser utilizado diretamente em ambiente de produção.

preparação do ambiente

Usamos Next.js para desenvolver aplicações full-stack, precisamos preparar o ambiente Node.js.

Instalar dependências

Primeiro crie um projeto Next.js:

npx create-next-app@14

Após entrar no diretório do projeto, instale as dependências relacionadas ao SIWE:

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

configurar Wagmi

Importar WagmiProvider em layout.tsx:

jsx "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"; importar React de "react"; import { createSiweMessage } from "viem/siwe"; import { http } from "wagmi";

const YOUR_WALLET_CONNECT_PROJECT_ID = "xxx"; const queryClient = new QueryClient();

const WagmiProvider = ({ 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" }); }, verifyMessage: 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, ｝｝ wallets={[ MetaMask(), WalletConnect(), TokenPocket({ grupo: "Popular", }), OkxWallet(), ]} queryClient={queryClient} > {children} ); };

export default WagmiProvider;

adicionar botão de ligação

Criar um botão para conectar a carteira e assinar:

jsx "use client"; import { ConnectButton } from "@ant-design/web3"; importar React de "react"; import { JwtProvider } from "./JwtProvider";

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

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

return ( <> <connectbutton.signin label="{renderSignBtnText}" onsignmessagesuccess="{(" ==""> { console.log)"Assinatura de mensagem bem-sucedida"(; ｝｝ />

![Manual de Uso do SIWE: Como tornar seu Dapp mais poderoso?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

) implementar a interface de backend

Interface Nonce

javascript import { randomBytes } from "crypto"; import { addressMap } from "../cache";

export async function GET###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 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###{ cadeia: mainnet, transporte: http((, });

export async function POST)request( { const { assinatura, mensagem } = await request.json)(;

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

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

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

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

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

![Manual de uso do SIWE: Como tornar o seu Dapp mais poderoso?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

Sugestões de otimização

Para aumentar a velocidade de verificação, recomenda-se usar um serviço de nós especializado. Pode-se usar o serviço de nós ZAN, substituindo o RPC padrão:

javascript const publicClient = createPublicClient){ cadeia: mainnet, transporte: http('(, });

Desta forma, pode reduzir significativamente o tempo de verificação e aumentar a velocidade de resposta da interface.

![SIWE使用手册：如何让你的Dapp更加强大？])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(</connectbutton.signin>