Ethereum TANIMLAMA doğrulaması: SIWE uygulama kılavuzu

SIWE(Ethereum ile Giriş), kullanıcıların belirli bir cüzdan üzerindeki kontrolünü kanıtlamak için cüzdanın işlem başlatması gibi, Ethereum tabanlı bir kullanıcı tanımlama yöntemidir. Şu anda, ana akım cüzdan eklentileri bu basit kimlik doğrulama yöntemini desteklemektedir, sadece eklentide bilgilerin imzalanması yeterlidir.

Bu makale, Ethereum üzerindeki SIWE uygulamasına odaklanacak, Solana, SUI gibi diğer halka açık blok zincirleri ile ilgili olmayacaktır.

SIWE Kullanım Senaryoları

Eğer merkeziyetsiz uygulamanız (Dapp) aşağıdaki gereksinimlere sahipse, SIWE kullanmayı düşünebilirsiniz:

• Bağımsız bir kullanıcı sistemi sahip olmak
• Kullanıcı gizliliği ile ilgili bilgileri sorgulamak gerekiyor.

Sorgulama odaklı uygulamalar için (, blok gezgini ) gibi, SIWE kullanılmayabilir.

Dapp içinde cüzdan bağlantısı ile kimliği belirtmek mümkün olsa da, bu yalnızca ön uç için geçerlidir. Arka uç desteği gerektiren arayüz çağrıları için yalnızca adres bilgisi ile kimliği kanıtlamak yeterli değildir, çünkü adresler kamuya açık bilgilerdir.

SIWE Çalışma Prensibi

SIWE süreci üç adımda özetlenebilir: cüzdanı bağla, imzala, TANIMLAMA al.

Cüzdanı Bağla

Bu yaygın bir Web3 işlemdir, kullanıcı cüzdanını Dapp içinde cüzdan eklentisi aracılığıyla bağlar.

imza

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

Arka uç, rastgele bir Nonce değeri üretir ve bunu adresle ilişkilendirir, böylece sonraki imza işlemleri için hazırlanır. Ön uç, Nonce değerini aldıktan sonra imza içeriğini oluşturur; bu, Nonce değeri, alan adı, zincir kimliği gibi bilgileri içerir ve imza işlemi için cüzdanın sağladığı yöntemi kullanır. Son olarak, imza arka uca doğrulama için gönderilir.

TANIMLAMA almak

Arka uç imzası doğrulandıktan sonra, kullanıcı tanımlayıcısı ( olarak döner, örneğin JWT). Ön uç, sonraki isteklerinde adres ve tanımlayıcıyı taşıyarak cüzdanın mülkiyetini kanıtlayabilir.

SIWE Uygulama Örneği

Aşağıda, Dapp'in kullanıcı kimlik doğrulaması için JWT döndürmesini sağlamak amacıyla Nextjs projesinde SIWE işlevselliğinin nasıl uygulanacağını göstereceğim.

Çevre Hazırlığı

Bu örnek, Nextjs ile geliştirilmiştir ve Node.js ortamının hazırlanması gerekmektedir. Nextjs kullanarak, ön ve arka uçları ayırmadan tam yığın projeler geliştirmek mümkündür.

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

Öncelikle Nextjs'i kurun:

npx create-next-app@14

Kurulum tamamlandıktan sonra projeye gidin ve başlatın:

npm run dev

localhost:3000 adresini ziyaret ederek temel bir Nextjs projesini görebilirsiniz.

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

Cüzdan bağlantısını sağlamak için Ant Design Web3 kullanacağız, bu ücretsizdir, sürekli bakım yapılmaktadır ve kullanım deneyimi sıradan bileşen kütüphanelerine benzer, SIWE işlevini destekler.

Gerekli 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 et:

typescript "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 siweconfig="｛｛" 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} ); };

export default WagmiProvider;

bağlantı düğmesi gerçekleştirme

Cüzdanı bağlama ve imzalama butonunu ekle:

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

ihraç varsayılan fonksiyon Uygulama() { 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ı döndür. };

return ( <> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton>

arka uç arayüzünü gerçekleştirmek

Nonce arayüzü

Rastgele Bir Nonce Üretin ve Adresle İlişkilendirin:

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

export async function GET(request: Request) { const { aramaParametreleri } = new URL(istek.url); const address = searchParams.get("address");

if (!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ü

İmzanızı doğrulayın ve JWT'yi geri döndürün:

typescript 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şımak: http(), });

export async function POST(request: Request) { const { imza, mesaj } = 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, }); }

Performans Optimizasyonu

Doğrulama hızını artırmak için, özel düğüm hizmetleri kullanılması önerilir. ZAN düğüm hizmetini örnek alarak, Ethereum ana ağının HTTPS RPC bağlantısını aldıktan sonra, publicClient'ın varsayılan RPC'sini değiştirin:

typescript 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 yanıt hızını artırabilir.