SIWE: Ethereum imzasını kullanarak daha güçlü Dapp TANIMLAMA

SIWE(Ethereum ile Giriş Yap), kullanıcıların kimliğini Ethereum üzerinde doğrulamanın bir yoludur, işlem başlatmaya benzer, kullanıcının cüzdan üzerindeki kontrolünü kanıtlamak için kullanılır. Şu anda çoğu cüzdan eklentisi bu basit imza doğrulama yöntemini desteklemektedir.

SIWE ne zaman kullanılmalıdır?

Eğer Dapp'iniz aşağıdaki gereksinimlere sahipse, SIWE kullanmayı düşünebilirsiniz:

• Bağımsız bir kullanıcı sistemi olmak
• Kullanıcı gizliliği ile ilgili bilgi sorgulanması gerekiyor

Sorgulama odaklı uygulamalar için (, etherscan) gibi, SIWE kullanmaya gerek yoktur.

Dapp ön yüzünde cüzdan bağlandığında kimliği gösterebilse de, 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 kötüye kullanılmaya açıktır.

SIWE'nin Prensibi ve Süreci

SIWE'nin temel süreci üç adımdan oluşur: cüzdan bağlama, imzalama, kimlik belirleme alma.

cüzdanı bağla

Kullanıcı cüzdanını Dapp'te cüzdan eklentisi aracılığıyla bağlayın.

imza

İmza adımları şunlardır:

1. Nonce değerini al: Rastgele oluşturulan Nonce değerini almak için arka uç API'sini çağırın.
2. İmza içeriğini oluşturma: Nonce değeri, alan adı, zincir ID'si gibi bilgileri içerir.
3. Cüzdanı kullanarak imzalama
4. İmza, arka uca doğrulama için gönderilir

TANIMLAMA almak

Arka uç imza doğrulaması geçtiğinde, kullanıcı tanımlayıcısı ( ve JWT) döner. Daha sonra, ön uç isteği sırasında adres ve tanımlayıcıyı taşır, böylece cüzdanın sahipliğini kanıtlayabilir.

Pratik SIWE

Aşağıda, projede SIWE'nin nasıl uygulanacağını tanıtıyoruz, hedef Dapp'in kullanıcı kimlik doğrulaması için JWT döndürebilmesidir.

hazırlık çalışmaları

Bu makale, Next.js kullanarak tam yığın uygulama geliştirmek için Node.js ortamının hazırlanması gerektiğini belirtiyor.

Bağımlılıkları Yükle

Öncelikle Next.js'i kurun:

npx create-next-app@14

Proje dizinine girin ve çalıştırın:

npm run dev

localhost:3000 adresine giderek temel bir Next.js projesini görebilirsiniz.

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

Ant Design Web3 kullanarak cüzdan bağlantısı kurma:

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'ı ekleyin:

jsx "client 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";

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=｛｛ projeId: 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üğmesini gerçekleştir

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

varsayılan dışa aktarma işlevi 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çmayı geri döndür. };

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

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

Doğrulama İmza 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";

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

Optimizasyon Önerileri

Doğrulama hızını artırmak için, varsayılan RPC'yi değiştirmek amacıyla özel bir düğüm hizmeti kullanmanız önerilir. Örneğin, ZAN düğüm hizmetini kullanabilirsiniz:

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.