SIWE Teknolojisi Uygulama Rehberi: Güçlü Bir Dapp Tanımlama Sistemi Kurma

SIWE(Ethereum ile Giriş), kullanıcı kimliğini Ethereum üzerinde doğrulamanın bir yoludur, işlem başlatmaya benzer, kullanıcının cüzdan üzerindeki kontrolünü kanıtlar. Şu anda ana akım cüzdan eklentileri bu basit kimlik doğrulama yöntemini desteklemektedir, yalnızca eklentide imza atmak yeterlidir.

Bu makale, Ethereum'daki imza senaryolarını tartışmakta olup, diğer kamu blok zincirlerini kapsamamaktadır.

SIWE'yi ne zaman kullanmalıyız

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

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

Sorgulamaya dayalı uygulamalar için, etherscan benzeri blok tarayıcıları gibi, SIWE kullanılmayabilir.

Dapp ön yüzünde cüzdan bağlandıktan sonra kimliğin kanıtlandığı görünse de, arka uç desteği gerektiren API çağrıları için yalnızca adresin iletilmesi yeterli değildir, çünkü adres açık bir bilgidir ve kötüye kullanılmaya açıktır.

SIWE'nin Prensibi ve Süreci

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

Cüzdanı Bağla

Bu, Dapp'ta cüzdanı bağlamak için cüzdan eklentisi aracılığıyla gerçekleştirilen yaygın bir Web3 işlevidir.

İMZA

Nonce değerinin alınması, cüzdan imzası ve arka uç imza doğrulama olmak üzere üç adımı içerir:

1. Arka uçtan rastgele üretilen Nonce değerini al, mevcut adresle ilişkilendir.

2. Ön uç, Nonce değeri, alan adı, zincir ID'si gibi bilgileri içeren imza içeriğini oluşturur ve cüzdan tarafından sağlanan yöntemle imzalar.

3. İmza, doğrulama için arka uç sunucusuna gönderilir.

TANIMLAMA almak

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

Uygulama Kılavuzu

Aşağıda, Nextjs projesinde SIWE işlevini nasıl uygulayacağınızı ve kimlik doğrulama için JWT'yi nasıl döndüreceğinizi açıklayacağım.

Ortam Hazırlığı

1. Nextjs'i kurun:

npx create-next-app@14

2. SIWE ile ilgili bağımlılıkları kurun:

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

Wagmi'yi tanıtma

layout.tsx dosyasında WagmiProvider'ı içe aktar:

javascript "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"; 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)=""> (beklemek getNonce(adres)).veri, 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 ekle

Bileşene cüzdan bağlantısı ve imza düğmesi ekle:

javascript "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çmayı döndür. };

return ( <>

arayüz uygulanması

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

İMZA 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";

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

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: "1h" }); return Response.json({ veri: token, }); }

Optimizasyon Önerileri

SIWE giriş hızını artırmak için ö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'ın varsayılan RPC'sini değiştirin:

javascript const publicClient = createPublicClient({ zincir: ana ağ, taşımak: 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.