SIWE: Dapp Fonksiyonlarını Geliştiren Anahtar Teknoloji

SIWE (Ethereum ile Giriş Yapma), Ethereum üzerinde kullanıcı kimliğini doğrulamanın bir yoludur, cüzdan işlemi başlatmaya benzer, kullanıcının cüzdan üzerinde kontrol sahibi olduğunu kanıtlar. Mevcut kimlik doğrulama yöntemi oldukça basittir, yalnızca cüzdan eklentisinde bilgileri imzalamak yeterlidir ve çoğu yaygın cüzdan eklentisi bunu desteklemektedir.

Bu makale, Solana, SUI gibi diğer blok zincirlerini kapsamadan, Ethereum üzerindeki imza senaryolarını ana hatlarıyla ele almaktadır.

SIWE'ye ihtiyaç var mı

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

• Kendi kullanıcı sistemine sahip olmak
• Kullanıcı gizliliği ile ilgili bilgi sorgulanması gerekiyor.

Ancak Dapp'iniz esasen sorgulama işlevine sahipse, örneğin etherscan'a benzer bir uygulama ise, SIWE kullanmak zorunda değilsiniz.

Muhtemelen merak ediyorsunuz, Dapp üzerinde cüzdan bağlantısı kurulduğunda, cüzdan sahipliğini kanıtlamış olmuyor muyuz? Bu ifade kısmen doğru. Ön yüz için, cüzdan bağlantısı gerçekten kimliği belirtir, ancak arka uç desteği gerektiren arayüz çağrıları için yalnızca adres iletmek yeterli değildir, çünkü adres kamuya açıktır, herkes "ödünç alabilir".

SIWE'nın Prensibi ve Süreci

SIWE süreci üç adımda özetlenebilir: cüzdanı bağlama - imzalama - kimlik belirleme. Bu üç adımı detaylı olarak inceleyelim.

cüzdanı bağla

Cüzdan bağlamak, yaygın bir Web3 işlemi olup, cüzdan eklentisi aracılığıyla Dapp içinde cüzdan bağlanabilir.

imza

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

Nonce değerini almak için arka uç API'sini çağırmak gerekir. Arka uç isteği aldıktan sonra rastgele bir Nonce değeri oluşturacak ve bunu mevcut adresle ilişkilendirecek, böylece sonraki imzalama işlemleri için hazırlık yapılmış olacak.

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

İmza oluşturulduktan sonra, bunu arka uca gönderin.

kimlik bilgisi al

Arka uç doğrulama imzası geçtikten sonra, kullanıcı kimlik bilgilerini döndürecektir, örneğin JWT. Ön uç, sonraki isteklerinde ilgili adresi ve kimlik bilgilerini ekleyerek cüzdan sahipliğini kanıtlayabilir.

Pratik

Mevcut birçok bileşen ve kütüphane, cüzdan bağlantısı ve SIWE'ye hızlı bir şekilde erişimi desteklemektedir. Amacımız, Dapp'in kullanıcı kimlik doğrulaması için JWT döndürmesidir. Not: Bu demo yalnızca SIWE'nin temel sürecini tanıtmak için kullanılmaktadır, üretim ortamında kullanımı güvenlik sorunları içerebilir.

hazırlık çalışması

Bu makalede Next.js kullanılarak bir uygulama geliştirilmektedir, Node.js ortamına ihtiyaç vardır. Next.js'in avantajı, tam yığın projeleri doğrudan geliştirebilmenizdir; ön ve arka uç projeleri olarak ayırmanıza gerek yoktur.

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

Öncelikle Next.js'i kurun, proje dizininde şu komutu çalıştırın:

npx create-next-app@14

Kurulum tamamlandıktan sonra, proje dizinine girin ve çalıştırın:

npm run dev

Terminal ipuçlarına göre, localhost:3000 adresine erişerek temel bir Next.js projesini görebilirsiniz.

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

SIWE bir giriş sistemi gerektirir, bu nedenle cüzdanı bağlamak gerekir. Burada Ant Design Web3 kullanıyoruz, çünkü:

1. Tamamen ücretsiz ve aktif olarak bakım yapılmaktadır
2. Web3 bileşen kütüphanesi olarak, kullanım deneyimi normal bileşen kütüphanelerine benzer, ek zihinsel yük yok.
3. SIWE'yi destekle

Terminalde yürütün:

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

Wagmi'yi Tanıtın

Ant Design Web3'ün SIWE'si Wagmi kütüphanesine bağımlıdır. Projenin tamamında Wagmi tarafından sağlanan Hook'ları kullanabilmek için layout.tsx dosyasında ilgili Provider'ı dahil etmemiz gerekiyor.

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

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

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

Sonra cüzdanı bağla butonunu ekleyin, böylece ön yüzde bağlantı noktası oluşturmuş olursunuz. Bu noktada SIWE'yi entegre ettik, adımlar oldukça basit.

Bağlantı düğmesini tanımlayın, cüzdanı bağlayın ve imzalamayı gerçekleştirin:

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çın; };

return ( <>

Bu şekilde en basit SIWE oturum açma çerçevesi gerçekleştirilmiştir.

arayüz uygulaması

SIWE, arka ucun kullanıcı kimliğini doğrulamaya yardımcı olacak bazı arayüzlere ihtiyaç duyar. Şimdi bunu basit bir şekilde gerçekleştirelim.

Nonce

Nonce, cüzdanın her imza oluşturduğunda içeriği değiştirmesini sağlamak için kullanılır, bu da imza güvenilirliğini artırır. Nonce'in oluşturulması, kullanıcının sağladığı adresle ilişkilendirilmesi gerekir, bu da doğrulama doğruluğunu artırır.

Nonce'in uygulanması oldukça basittir, önce ( harfler ve sayılardan oluşan rastgele bir dize oluşturun ), ardından nonce ve adres arasında bir bağlantı kurun:

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 (!adres) { throw new Error("Geçersiz adres"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(adres, nonce); return Response.json({ veri: nonce, }); }

signMessage

signMessage, içeriği imzalamak için kullanılır, bu fonksiyon genellikle cüzdan eklentisi tarafından gerçekleştirilir, genellikle yapılandırmamıza gerek yoktur, yalnızca yöntemi belirtmemiz yeterlidir. Bu demo'da Wagmi'nin imzalama yöntemi kullanılmaktadır.

mesajı doğrula

Kullanıcı imzaladıktan sonra, imza öncesi içeriği ve imzayı birlikte arka uca doğrulama için göndermelidir. Arka uç, imzadan ilgili içeriği ayrıştırarak karşılaştırma yapar; eğer aynıysa doğrulama başarılı demektir.

Ayrıca, imza içeriğinin güvenlik kontrolü yapılması gerekmektedir; örneğin, imza içeriğindeki Nonce değeri ile kullanıcıya dağıtılan değer arasındaki uyum gibi. Doğrulama başarılı olduktan sonra, kullanıcının sonraki yetki kontrolü için JWT'si döndürülmelidir, örnek kod aşağıdaki gibidir:

javascript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; "jsonwebtoken" kütüphanesinden jwt'i içe aktar import { parseSiweMessage } from "viem/siwe"; import { addressMap } from "../cache";

const JWT_SECRET = "your-secret-key"; // Daha güvenli bir anahtar kullanın ve uygun süre bitim 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); console.log("nonce", nonce, address, addressMap);

// nonce değerinin tutarlılığını kontrol et eğer (!nonce || nonce !== addressMap.get(address)) { throw new Error("Geçersiz nonce"); }

// İmza içeriğini doğrulayın const valid = await publicClient.verifySiweMessage({ mesaj, adres, imza, });

eğer (!valid) { throw new Error("Geçersiz imza"); }

// jwt oluştur ve geri döndür const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ veri: token, }); }

Böylece, temel bir SIWE girişini gerçekleştiren Dapp geliştirilmiş oldu.

Optimizasyon Önerileri

Varsayılan RPC düğümünü kullanarak SIWE oturum açma doğrulaması yapmak yaklaşık 30 saniye sürebilir, bu nedenle arayüz yanıt süresini artırmak için özel bir düğüm hizmeti kullanılması şiddetle önerilir. Bu makalede ZAN'ın düğüm hizmeti kullanılmaktadır, ilgili RPC bağlantısını ZAN düğüm hizmeti kontrol panelinden alabilirsiniz.

Ethereum ana ağına HTTPS RPC bağlantısı aldıktan sonra, kodda publicClient'ın varsayılan RPC'sini değiştirin:

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

Değiştirildikten sonra, doğrulama süresi önemli ölçüde azalacak ve arayüz hızı belirgin şekilde artacaktır.