SIWE: Dapp için TANIMLAMA sağlayan güçlü araç

SIWE (Ethereum ile Giriş) Ethereum üzerinde kullanıcı kimliğini doğrulamanın bir yoludur, 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 imzalama yöntemini desteklemektedir.

Bu makale, Ethereum üzerindeki imza senaryolarını tartışmakta olup, diğer halka açık blok zincirlerini içermemektedir.

Projenizin 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 gerekiyor.

Ana olarak sorgulama işlevi sunan Dapp( için etherscan), SIWE kullanılmayabilir.

Cüzdan bağlandıktan sonra ön uç kimliği doğrulayabilse de, arka uç desteği gerektiren API çağrıları için yalnızca adres ile kimlik kanıtı sağlanamaz, çünkü adres kamuya açık bir bilgidir.

SIWE'nin Prensibi ve Süreci

SIWE süreci üç aşamadan oluşur: cüzdanı bağlama, imzalama, TANIMLAMA alma.

Cüzdanı Bağla

Bu yaygın bir Web3 işlemi, cüzdan eklentisi aracılığıyla Dapp'a bağlanmaktır.

İMZA

SIWE'nin imzalama adımları şunlardır:

1. Nonce değerini al: Rastgele Nonce değerini almak için arka uç API'sini çağırın, adresle ilişkilendirin.

2. İmza içeriği oluşturma: Nonce değeri, alan adı, zincir ID'si gibi bilgileri içerir.

3. Cüzdan imzası: İçeriği imzalamak için cüzdanın sağladığı yöntemi kullanın.

4. İmza gönderme: İmza, arka uca doğrulama için gönderilir.

TANIMLAMA almak

Arka uç doğrulama imzası geçtikten sonra, kullanıcı tanımlayıcısı ( gibi JWT) döner. Sonraki talepler, adres ve tanımlayıcıyı taşıyarak cüzdan sahipliğini kanıtlayabilir.

Uygulama SIWE

Next.js kullanarak SIWE destekleyen bir tam yığın uygulama geliştireceğiz.

HAZIRLIK

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ıtmak

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

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) =\u003e { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt); return !!jwt; }, }, zincirler: [Mainnet], taşıma: { [Ana ağ.id]: http(), }, cüzdanlar: [MetaMask(), WalletConnect(), TokenPocket(), OkxWallet()] ｝｝ > {children} ); };

BAĞLANTI DÜĞMESİ EKLE

Cüzdanı bağlamak ve imzalamak için bir buton oluşturun:

jsx varsayılan dışa aktarma işlevi App() { const jwt = React.useContext(JwtProvider);

return ( <connectbutton.connector> {({ hesap, bağlan }) => ( {hesap ? Bağlandı: ${hesap.adresi.slice(0,6)}...${hesap.adresi.slice(-4)} : "Cüzdanı Bağla"} )} </connectbutton.connector> ); }

Arka uç arayüzü gerçekleştirme

Nonce arayüzü

javascript export async function GET(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({ data: nonce }); }

İMZA DOĞRULAMA ARAYÜZÜ

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

if (!valid) { throw new Error("Geçersiz imza"); }

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

Performans Optimizasyonu

Doğrulama hızını artırmak için özel bir düğüm hizmeti kullanılması önerilir. Varsayılan RPC'yi değiştirmek için ZAN'ın düğüm hizmetini kullanabilirsiniz:

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

Bu, arayüz yanıt hızını önemli ölçüde artıracaktır.