SIWE: Ethereum Giriş yap için güçlü bir araç

SIWE (Ethereum ile Giriş Yap), Ethereum üzerinde kullanıcı kimliğini doğrulamanın bir yoludur. İşlemleri başlatmaya benzer şekilde, kullanıcıların cüzdan üzerindeki kontrolünü kanıtlamak için imza kullanır. Şu anda, çoğu ana akım cüzdan eklentisi bu basit kimlik doğrulama yöntemini desteklemektedir.

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

SIWE ne zaman gereklidir?

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

• Bağımsız bir kullanıcı sistemi var
• Kullanıcı gizliliği ile ilgili bilgilere erişim gereklidir.

Ana olarak sorgulama işlevi sunan Dapp( gibi blok gezginleri ), SIWE'ye ihtiyaç duymayabilir.

Cüzdan bağlantısı aracılığıyla kimlik kanıtı sağlamak mümkün olsa da, arka uç desteği gerektiren API çağrıları için yalnızca adres iletmek yeterli değildir, çünkü adres kamuya açık bir bilgidir ve herkes tarafından kullanılabilir.

SIWE'nin İlkeleri ve Süreci

SIWE süreci üç adımda özetlenebilir: cüzdanı bağla - imzala - kimlik belirteci al.

Cüzdanı bağla

Bu, Web3 uygulamalarında yaygın bir işlemdir, kullanıcı cüzdanını cüzdan eklentisi aracılığıyla bağlamaktır.

imza

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

Öncelikle arka uçtan rastgele üretilen Nonce değerini alın, arka uç bunu mevcut adresle ilişkilendirecektir.

Ön uç Nonce değerini aldıktan sonra, Nonce, alan adı, zincir ID'si gibi bilgileri içeren imza içeriğini oluşturur ve ardından cüzdanın imzalama yöntemini kullanarak imzalar.

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

kimlik belirleyici al

Arka uç imza doğrulaması başarıyla geçtikten sonra, kullanıcı kimlik tanımlayıcısı ( gibi JWT) dönecektir. Ön uç, sonraki isteklerde adres ve kimlik tanımlayıcısını ekleyerek cüzdanın mülkiyetini kanıtlayabilir.

Pratik SIWE

Aşağıda SIWE'nin temel sürecini uygulamak için basit bir Demo ile ilerleyeceğiz, hedef Dapp'in kimlik doğrulama için kullanılan JWT'yi geri döndürebilmesidir.

Not: Bu Demo yalnızca temel süreci göstermek için kullanılır, üretim ortamında kullanımı güvenlik riskleri içerebilir.

Hazırlık çalışmaları

Next.js ile tam yığın uygulama geliştiriyoruz, Node.js ortamını hazırlamamız gerekiyor.

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

Öncelikle Next.js'i kurun:

npx create-next-app@14

Kurulumu tamamlamak için yönergeleri izleyin.

Proje dizinine girin ve başlatın:

npm run dev

localhost:3000 adresine giderek temel bir Next.js projesini görebilirsiniz.

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

Cüzdanı bağlamak ve SIWE işlevini gerçekleştirmek için Ant Design Web3 kullanıyoruz:

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

Wagmi'yi tanıt

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

jsx "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(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;

Sonra cüzdanı bağlama düğmesini 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";

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)} : ""; return Giriş yap olarak ${ellipsisAddress}; };

return ( <>

Böylece temel bir SIWE Giriş yap çerçevesi gerçekleştirilmiş oldu.

arayüz uygulaması

Şimdi arka uçta gereken bazı arayüzleri gerçekleştirelim.

Nonce

Rastgele Nonce oluştur ve adresle ilişkilendir:

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

İmza doğrula ve JWT'yi döndü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"; // Lütfen daha güvenli bir anahtar kullanın ve ilgili süre aşımı kontrolü gibi 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);

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

Böylece, temel bir SIWE Giriş yap Dapp geliştirilmiş oldu.

Performans Optimizasyonu

Doğrulama hızını artırmak için özel bir düğüm hizmeti kullanılması önerilir. Burada publicClient'ın varsayılan RPC'sini değiştirmek için ZAN düğüm hizmetini kullanıyoruz:

javascript const publicClient = createPublicClient({ zincir: ana ağ, taşıma: http('), // ZAN düğüm hizmeti RPC'sini almak için değiştirin });

Bu, doğrulama süresini önemli ölçüde azaltabilir ve arayüz hızını artırabilir.