SIWE: Dapp TANIMLAMA'nızı daha güvenli ve güvenilir hale getirin

SIWE(Ethereum ile Giriş Yap), kullanıcı kimliğini Ethereum üzerinde doğrulamanın bir yoludur, cüzdanın işlem başlatmasına benzer, kullanıcının bu cüzdan üzerinde kontrol sahibi olduğunu kanıtlamak için kullanılır. Şu anda ana akım cüzdan eklentileri bu basit kimlik doğrulama yöntemini desteklemektedir, yalnızca cüzdanda bilgiyi imzalamanız yeterlidir.

Bu makale, Ethereum üzerindeki SIWE imza senaryosunu tartışmakta olup, Solana, SUI gibi diğer halka açık blok zincirleri ile ilgili değildir.

SIWE'yi ne zaman kullanmalıyız?

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

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

Sorgulama işlevine odaklanan Dapp( gibi blok gezginleri ) için SIWE gerekli olmayabilir.

Cüzdanı Dapp'a bağladığınızda, cüzdanın sahipliğini göstermiş olmuyor musunuz? Bu ifade tam olarak doğru değil. Ön uç açısından, cüzdan bağlantısı gerçekten kimliği kanıtlayabilir, ancak arka uç desteği gerektiren API çağrıları için sadece adresin iletilmesi kimliği doğrulamak için yeterli değildir, çünkü adresler kamuya açıktır.

SIWE'nin Prensibi ve Süreci

SIWE süreci üç adımda özetlenebilir: cüzdan bağlantısı - imza - kimlik tanımlaması. Bu üç adımı detaylıca inceleyelim:

Cüzdanı Bağla

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

İMZA

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

Öncelikle, arka uç API'sini çağırarak Nonce değerini almak gerekir. Arka uç, rastgele bir Nonce oluşturacak ve bunu mevcut adresle ilişkilendirecek, sonraki imza işlemleri için hazırlık yapacaktır.

Ön uç, Nonce değerini aldıktan sonra, genellikle Nonce, alan adı, zincir ID'si ve imza içeriği gibi unsurları içeren imza içeriğini oluşturur. Ardından, cüzdan tarafından sağlanan imza yöntemini kullanarak içeriği imzalayın.

Son olarak, imzayı doğrulama için arka uca gönderin.

TANIMLAMA almak

Arka uç doğrulama imzası geçtikten sonra, ilgili kullanıcı tanımlayıcısını döndürecektir, genellikle bu bir JWT token'dır. Ön uç, sonraki isteklere adres ve tanımlayıcıyı ekleyerek cüzdan üzerindeki mülkiyetini kanıtlayabilir.

Pratik SIWE

SIWE işlevselliğini pratik uygulamalarla gerçekleştirebiliriz, hedef Dapp'in kullanıcı kimlik doğrulaması için JWT döndürebilmesidir. Dikkat edilmesi gereken, aşağıdaki demo yalnızca temel süreci göstermek içindir, üretim ortamında güvenlik açıkları olabilir.

Hazırlık Çalışması

Bu makalede Next.js ile uygulama geliştirmek için Node.js ortamının hazırlanması gerekmektedir. Next.js kullanmanın avantajı, frontend ve backend'i ayırmadan tam yığın projeleri doğrudan geliştirebilmektir.

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

Öncelikle Next.js'i kurun:

npx create-next-app@14

Kurulumu tamamlamak için talimatları izleyin, ardından proje dizinine gidin ve projeyi başlatın:

npm run dev

SIWE ile ilgili bağımlılıkların kurulumu

Cüzdan bağlantısı ve SIWE işlevselliğini gerçekleştirmek için Ant Design Web3 bileşen kütüphanesini kullanıyoruz.

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

Wagmi'yi tanıtmak

Ant Design Web3'ün SIWE'si Wagmi kütüphanesini kullanarak uygulanmaktadır. layout.tsx dosyasında ilgili Provider'ı dahil ediyoruz, böylece tüm proje Wagmi'nin sağladığı Hooks'u kullanabiliyor.

Öncelikle WagmiProvider yapılandırmasını tanımlayın:

jsx "client kullan"; import { getNonce, verifyMessage } from "@/app/api"; import { Ana Ağ, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } "@ant-design/web3-wagmi"'den; 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=｛｛ projeId: YOUR_WALLET_CONNECT_PROJECT_ID, ｝｝ cüzdanlar={[} MetaMask(), WalletConnect(), TokenPocket({ grup: "Popüler", }), OkxWallet(), ]} queryClient={queryClient} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

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

Sonra cüzdanı bağlama butonunu ekleyin:

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"; import { JwtProvider } from "./JwtProvider";

varsayılan dışa aktarma fonksiyonu 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ç. };

return ( <>

Böylece, basit bir SIWE giriş çerçevesi oluşturmuş olduk.

arayüz gerçekleştirme

Nonce

Nonce, her sefer farklı bir imza içeriği oluşturmak için kullanılır ve imza güvenilirliğini artırır. Uygulama kodu aşağıdaki gibidir:

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

verifyMessage

Arka uç, imza içeriğini doğrulamalı ve sonraki yetki kontrolü için JWT döndürmelidir:

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"; // Lütfen daha güvenli bir anahtar kullanın ve süre aşımı 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 (!geçerli) { throw new Error("Geçersiz imza"); }

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

Optimizasyon Önerileri

SIWE giriş hızını artırmak için, arayüz yanıt sürelerini hızlandırmak amacıyla özel bir düğüm servisi kullanılması önerilir. ZAN gibi düğüm servisleri kullanılabilir, ilgili RPC bağlantısını aldıktan sonra koddaki varsayılan RPC'yi değiştirebilirsiniz.

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.