SIWE: Ethereum TANIMLAMA'sını nasıl gerçekleştirilir Dapp işlevselliğini artırmak için

SIWE(Ethereum ile Giriş Yap), kullanıcı kimliğini Ethereum üzerinde doğrulamanın bir yoludur, cüzdan işlemi başlatmaya benzer, kullanıcının cüzdan üzerindeki kontrolünü kanıtlamak için kullanılır. Mevcut kimlik doğrulama süreci oldukça basit hale gelmiştir, yalnızca cüzdan eklentisinde bilgilerin imzalanması yeterlidir ve çoğu yaygın cüzdan eklentisi bunu desteklemektedir.

Bu makale, Ethereum üzerindeki imza senaryolarını ele almakta olup, Solana, SUI gibi diğer halka açık blok zincirlerini içermemektedir.

SIWE Ne Zaman Kullanılmalı

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

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

Ama eğer Dapp'iniz esasen sorgulama işlevine sahipse, örneğin etherscan'a benzer bir uygulama ise, o zaman SIWE'ye ihtiyacınız olmayabilir.

Belki de soruyorsunuz, 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 açısından, cüzdan bağlantısı gerçekten kimliği gösteriyor, ancak arka uç desteği gerektiren API çağrıları için yalnızca adres iletmek yeterli değil, çünkü adres kamuya açık bir bilgidir, herkes "ödünç alabilir".

SIWE'nin Prensibi ve Süreci

SIWE süreci üç adımda özetlenebilir: Cüzdanı bağlama - İmza atma - Tanımlayıcı alma. Bu üç adımı detaylı bir şekilde inceleyelim.

Cüzdanı Bağla

Bu, Dapp'te cüzdanınızı bağlamak için cüzdan eklentisi aracılığıyla yapılan yaygın bir Web3 işlemdir.

imza

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 gerekiyor. 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 vb. dahil olmak üzere imza içeriğini oluşturur ve genellikle cüzdanın sağladığı imza yöntemini kullanarak imza atar.

İmzayı oluşturduktan sonra, bunu arka uca gönderin.

TANIMLAMA elde et

Arka uç imza doğrulaması başarılı olduğunda, ilgili kullanıcı kimlik belirleyicisi, örneğin JWT, dönecektir. Ön uç, daha sonra arka uca yapılan isteklerde ilgili adres ve kimlik belirleyicisini ekleyerek cüzdanın mülkiyetini kanıtlayabilir.

Uygulama SIWE

Şu anda cüzdan bağlantısı ve SIWE için hızlı erişimi destekleyen birçok bileşen ve kütüphane var. Gelin pratik yapalım, hedefimiz Dapp'inizin kullanıcı kimlik doğrulaması için JWT döndürmesini sağlamak.

Dikkat, bu örnek yalnızca SIWE'nin temel süreçlerini tanıtmak için kullanılır, üretim ortamında kullanılması güvenlik sorunları barındırabilir.

hazırlık çalışmaları

Next.js ile uygulama geliştiriyoruz, Node.js ortamını hazırlamamız gerekiyor. Next.js'in avantajı, ön ve arka uçları ayırmadan doğrudan tam yığın projeler geliştirebilmemizdir.

Bağlantıları yükle

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

npx create-next-app@14

Yüklemeyi tamamladıktan sonra, proje dizinine girin ve başlatın:

npm run dev

Ardından localhost:3000 adresine giderek temel bir Next.js projesinin çalıştığını görebilirsiniz.

SIWE ile ilgili bağımlılıkları kurun

Ant Design Web3 kullanarak SIWE'yi uyguluyoruz çünkü ücretsiz, aktif olarak bakım yapılıyor, kullanıcı deneyimi sıradan bileşen kütüphanelerine benziyor ve SIWE'yi destekliyor.

Terminalde girin:

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üphanesine bağımlıdır. layout.tsx dosyasında ilgili Provider'ı içe aktarıyoruz, böylece projenin tamamı Wagmi'nin sağladığı Hooks'u kullanabilir.

Öncelikle WagmiProvider konfigürasyonunu tanımlayın:

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)=""> (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.

Ant Design Web3 tarafından sağlanan Provider'ı kullanıyoruz ve SIWE'nin bazı arayüzlerini tanımlıyoruz, spesifik uygulamalar daha sonra tanıtılacaktır.

Sonra cüzdanı bağlama düğmesini ekleyin, bu ön uç bağlantı girişi olarak.

Bundan böyle, SIWE'ye basit bir şekilde bağlanmış olduk.

Sonraki adım, bir bağlantı düğmesi tanımlamak ve cüzdanı bağlamak ve imzalamak için uygulamaktır:

javascript "client kullan"; import type { Hesap } 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ç. };

return ( <> {(hesap) => ( <connectbutton.signin accountcomponent="{false}" renderbuttontext="{(dom)" ==""> renderSignBtnText(dom, account)} /> )} <connectbutton.signin> {jwt} ); }

Böylece en basit SIWE giriş çerçevesini gerçekleştirmiş olduk.

Arayüz Uygulaması

SIWE, arka uç kullanıcı kimliğini doğrulamak için bazı arayüzlere ihtiyaç duyar. Şimdi bunu basitçe uygulayalım.

Nonce

Nonce, cüzdanın her imza oluşturduğunda farklı imza içeriği üretmesini sağlamak için kullanılır ve güvenilirliği artırır. Nonce'in üretilmesi, doğrulama doğruluğunu artırmak için kullanıcı tarafından sağlanan adresle ilişkilendirilmelidir.

Nonce'in uygulanması oldukça basit, önce ( harfler ve rakamlardan oluşan rastgele bir dize oluşturuluyor ), ardından nonce ile address arasında bir ilişki kurulur:

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

signMessage

signMessage, içeriği imzalamak için kullanılır ve genellikle cüzdan eklentisi aracılığıyla tamamlanır, genellikle yalnızca yöntemi belirtmemiz yeterlidir. Bu örnekte Wagmi'nin imzalama yöntemi kullanılmıştır.

verifyMessage

Kullanıcı imzaladıktan sonra, imzadan önceki içeriği ve imzayı birlikte arka uca göndermelidir. Arka uç, imzadan içeriği çözerek karşılaştırma yapar; eğer tutarlı ise doğrulama başarılı olarak kabul edilir.

Ayrıca, imza içeriğinin güvenliğini kontrol etmek gerekir, örneğin, Kullanıcıya tahsis edilen Nonce değerinin doğruluğunu doğrulamak. Doğrulama başarılı olduktan sonra, sonraki yetki kontrolü için kullanıcıya JWT döndürülür:

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"; // Daha güvenli bir anahtar kullanın ve uygun süre 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 eşitliğini kontrol et eğer (!nonce || nonce !== addressMap.get(address)) { throw new Error("Geçersiz nonce"); }

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

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

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

Böylece, temel bir SIWE oturum açma Dapp'i geliştirilmiş oldu.

Optimizasyon Önerileri

SIWE ile giriş yaparken, varsayılan RPC düğümünü kullanıyorsanız, doğrulama süreci yaklaşık 30 saniye sürebilir. Bu nedenle, arayüz yanıt süresini artırmak için özel bir düğüm hizmeti kullanmanız şiddetle önerilir.

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

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

Değiştirdikten sonra, doğrulama süresi önemli ölçüde azalabilir, arayüz hızı belirgin şekilde artar.