SIWE: DApp'inizi daha güçlü bir TANIMLAMA yöntemi ile güçlendirin

SIWE(Ethereum ile Giriş), Ethereum üzerinde kullanıcı kimliğini doğrulamak için bir yöntemdir, işlem başlatmaya benzer, kullanıcının cüzdan üzerindeki kontrolünü kanıtlar. Şu anda çoğu cüzdan eklentisi bu basit kimlik doğrulama yöntemini desteklemekte, sadece eklentide bilgileri imzalamak yeterlidir. Bu makale, Ethereum üzerindeki imza senaryolarını tartışmakta, diğer halka açık blok zincirlerini kapsamamaktadır.

Projenin SIWE'ye ihtiyacı var mı?

Eğer DApp'inizin aşağıdaki ihtiyaçları varsa, SIWE kullanmayı düşünebilirsiniz:

• Kendi kullanıcı sistemine sahip olmak
• Kullanıcı gizliliği ile ilgili bilgileri sorgulamak gerekmektedir.

Ancak DApp'iniz esas olarak sorgulama işlevine sahipse, etherscan gibi uygulamalar, SIWE'ye ihtiyaç duymayabilir.

Cüzdanın DApp üzerinde bağlanması cüzdanın mülkiyetini temsil etse de, bu yalnızca ön uç için geçerlidir. Arka uç desteği gerektiren API çağrıları için yalnızca adresin iletilmesi kimliği kanıtlamaz, çünkü adresler kamuya açık bilgilerdir.

SIWE'nin Prensibi ve Süreci

SIWE süreci üç adımda özetlenebilir: cüzdanı bağlama - imzalama - TANIMLAMA alma.

Cüzdanı Bağla

Bu, bir cüzdan eklentisi aracılığıyla DApp'te cüzdanı bağlamanın yaygın bir Web3 işlevidir.

İMZA

İmza adımları, Nonce değerinin alınmasını, cüzdan imzasını ve arka uç imza doğrulamasını içerir.

Öncelikle arka uç API'sini çağırarak Nonce değerini alın, arka uç rastgele bir Nonce oluşturacak ve bu değeri adresle ilişkilendirecektir. Ön uç Nonce değerini aldıktan sonra imza içeriğini oluşturur, bu içerik Nonce, alan adı, zincir ID'si vb. öğeleri içerir, cüzdan tarafından sağlanan yöntemi kullanarak imza atar ve ardından imzayı arka uca gönderir.

TANIMLAMA almak

Arka uç imza doğrulaması başarılı olduktan sonra, kullanıcı kimlik tanımlayıcısı, örneğin JWT dönecektir. Ön uç, sonraki isteklere adres ve kimlik tanımlayıcısını ekleyerek cüzdanın sahipliğini kanıtlayabilir.

SIWE Uygulaması

Next.js kullanarak SIWE destekleyen bir DApp geliştireceğiz, hedefimiz kimlik doğrulama için JWT döndürmektir.

hazırlık çalışması

1. Next.js'i kurun:

npx create-next-app@14

2. SIWE ile ilgili bağımlılıkları yükleyin:

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

Wagmi'yi tanıtma

layout.tsx dosyasına WagmiProvider'ı ekleyin:

typescript "kullanıcıyı kullan"; import { getNonce, verifyMessage } from "@/app/api"; import { Ana ağ, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } "@ant-design/web3-wagmi"dan; import { QueryClient } from "@tanstack/react-query"; import React from "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 ( \u003cwagmiweb3configprovider siwe="｛｛" getnonce:="" async="" (address)=""\u003e (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, ｝｝ cüzdanlar={[ MetaMask(), WalletConnect(), TokenPocket({ grup: "Popüler", }), OkxWallet(), ]} queryClient={queryClient} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

export default WagmiProvider;

bağlantı düğmesi ekle

typescript "client kullan"; 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, hesap?: Hesap ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; ${ellipsisAddress} olarak oturum aç. };

return ( <>

arayüzü uygulamak

Nonce arayüzü

typescript 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");

eğer (!adres) { throw new Error("Geçersiz adres"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ veri: nonce, }); }

Mesaj Doğrulama Arayüzü

typescript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; jwt'yi "jsonwebtoken"'dan içe aktar import { parseSiweMessage } from "viem/siwe"; import { addressMap } from "../cache";

const JWT_SECRET = "your-secret-key";

const publicClient = createPublicClient({ zincir: ana ağ, taşıma: http(), });

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

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

eğer (!nonce || nonce !== addressMap.get(address)) { throw new Error("Geçersiz nonce"); }

const valid = await publicClient.verifySiweMessage({ mesaj, adres, imza, });

eğer (!valid) { throw new Error("Geçersiz imza"); }

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

Optimize Önerileri

SIWE girişinin yanıt hızını artırmak için, varsayılan RPC düğümünün yerine özel bir düğüm hizmeti kullanılması önerilir. ZAN düğüm hizmetini örnek alarak, Ethereum ana ağı HTTPS RPC bağlantısını aldıktan sonra, publicClient'in varsayılan RPC'sini değiştirmek.

typescript const publicClient = createPublicClient({ zincir: ana ağ, transport: http('), //ZAN düğüm hizmeti RPC });

Bu, doğrulama süresini önemli ölçüde azaltabilir ve arayüz hızını artırabilir.