SIWE'nin Web3 Uygulamalarındaki Uygulamaları ve Uygulamaları

SIWE(Ethereum ile Giriş), cüzdanın işlem başlatması gibi, kullanıcıların cüzdan üzerindeki kontrolünü kanıtlamak için kullanılan Ethereum tabanlı bir kullanıcı kimlik doğrulama yöntemidir. Şu anda, ana akım cüzdan eklentileri bu basit kimlik doğrulama yöntemini geniş ölçüde desteklemekte olup, yalnızca eklentide bilgilerin imzalanması gerekmektedir. Bu makale, Ethereum üzerindeki imza senaryolarını tartışmakta olup, diğer kamu blok zincirlerini içermemektedir.

SIWE Uygulama Alanları

SIWE, cüzdan adresinin kimlik doğrulama sorununu çözmek için kullanılır. Uygulamanızın aşağıdaki gereksinimleri varsa, SIWE'yi kullanmayı düşünebilirsiniz:

• Bağımsız bir kullanıcı sistemi sahibi olmak
• Kullanıcı gizliliği ile ilgili bilgi sorgulama gerekmektedir.

Sorgu işlevine odaklanan uygulamalar için, örneğin blok gezginleri gibi, SIWE kullanılmayabilir.

Cüzdan bağlantısı aracılığıyla kimliği göstermek mümkün olsa da, arka uç desteği gerektiren API çağrıları için yalnızca adresin iletilmesi yeterli değildir, çünkü adres kamuya açık bir bilgidir ve başkaları tarafından kötüye kullanılabilir.

SIWE'nin Prensibi ve Süreci

SIWE süreci üç adımda özetlenebilir: Cüzdanı bağlama, imzalama, kimlik belirleme.

Cüzdanı Bağla

Bu, bir cüzdan eklentisi aracılığıyla uygulamada cüzdanı bağlamak için yaygın bir Web3 işlevidir.

imza

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

1. Nonce değerini al: Arka uç arayüzünü çağırarak rastgele bir Nonce değeri al ve bunu mevcut adresle ilişkilendir.

2. İmza içeriğini oluşturun: Nonce değeri, alan adı, zincir ID'si, imza içeriği vb. dahil olmak üzere, imzalamak için cüzdanın sağladığı yöntemi kullanın.

3. İmzayı gönder: İmzayı doğrulama için arka uca gönder.

Kimlik Belgesi Al

Arka uç imza doğrulaması geçtikten sonra, kullanıcı kimlik tanımlayıcısı ( olarak döner, örneğin JWT ). Ön uç, sonraki isteklerde adres ve kimlik tanımlayıcısını ekleyerek, cüzdan sahipliğini kanıtlayabilir.

Uygulama Rehberi

Aşağıda, uygulamada SIWE'yi hızlı bir şekilde nasıl entegre edeceğinizi tanımlayan bir kılavuz bulunmaktadır. Amaç, kullanıcı kimlik doğrulaması için JWT döndürmektir. Lütfen bu örneğin yalnızca temel süreci göstermek için kullanıldığını, üretim ortamında kullanıldığında güvenlik açıkları olabileceğini unutmayın.

Çevre Hazırlığı

Bu makalede Next.js kullanarak tam yığın uygulama geliştirmek için Node.js ortamının hazırlanması gerekmektedir.

bağımlılıkları yükle

Öncelikle Next.js'i kurun:

npx create-next-app@14

Proje dizinine girdikten sonra çalıştırın:

npm run dev

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 yapılandır

layout.tsx dosyasına WagmiProvider'ı dahil etme:

javascript "client kullan"; import { getNonce, verifyMessage } from "@/app/api"; import { Ana ağ, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } from "@ant-design/web3-wagmi"; 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 ( <wagmiweb3configprovider siwe="｛｛" getnonce:="" async="" (address)=""> (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} > {children} ); };

varsayılan olarak WagmiProvider'ı dışa aktar;

bağlantı düğmesi ekle

javascript "kullanıcıyı 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";

ihracı varsayılan fonksiyon 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 giriş yapın; };

return ( <>

arayüz uygulaması

Nonce arayüzü

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

eğer (!address) { 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ü

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"; // Daha güvenli bir anahtar kullanın ve son kullanma kontrolü ekleyin.

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

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

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

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

Performans Optimizasyonu

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. Bu makalede ZAN'ın düğüm hizmeti kullanılmaktadır, RPC bağlantısını kontrol panelinden alabilirsiniz.

publicClient'in varsayılan RPC'sini değiştir:

javascript const publicClient = createPublicClient({ zincir: ana ağ, taşıma: http)'(, //ZAN düğüm hizmeti RPC }(;

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

![SIWE Kullanım Kılavuzu: Dapp'inizi Nasıl Daha Güçlü Hale Getirirsiniz?])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp)