SIWE:Güçlü Dapp tanımlama aracı

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 çoğu ana akım cüzdan eklentisi, bu basit kimlik doğrulama yöntemini desteklemektedir, sadece eklentide bilgilerin imzalanması yeterlidir.

Bu makalede, Ethereum üzerindeki imza senaryoları üzerinde durulacak, Solana, SUI gibi diğer kamu blok zincirleri ele alınmayacaktır.

SIWE ne zaman kullanılmalıdır?

Eğer Dapp'in aşağıdaki gereksinimlere sahipse, SIWE kullanmayı düşünebilirsiniz:

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

Ana olarak sorgulama işlevi sağlayan Dapp( gibi blok gezginleri) için SIWE kullanılmayabilir.

Cüzdan bağlandıktan sonra Dapp'ta kimliğin kanıtlanmış gibi görünse de, bu yalnızca ön uç için geçerlidir. Arka uç desteği gerektiren API çağrıları için yalnızca adresin iletilmesi yeterli değildir, çünkü adres kamusal bir bilgidir ve kolayca taklit edilebilir.

SIWE'nin Prensibi ve Süreci

SIWE süreci üç aşamada özetlenebilir: Cüzdanı bağla - İmza at - Tanımlayıcı al. Bu üç aşamayı daha ayrıntılı inceleyelim.

Cüzdanı Bağla

Bu, Dapp'te kullanıcı cüzdanını bağlamak için cüzdan eklentisi aracılığıyla yapılan 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 almanız gerekiyor. Arka uç rastgele bir Nonce üretecek ve mevcut adresle ilişkilendirecek, böylece sonraki imzalamalar için hazırlık yapılacak.

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

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

TANIMLAMA almak

Arka uç imza doğrulaması başarılı olduktan sonra, kullanıcı tanımlayıcısı, örneğin JWT, dönecektir. Ön uç sonraki taleplerinde adres ve tanımlayıcıyı ekleyerek cüzdanın sahipliğini kanıtlayabilir.

Pratik SIWE

Next.js kullanarak basit bir SIWE uygulaması geliştireceğiz, hedef Dapp'ın kimlik doğrulama için JWT döndürmesini sağlamaktır. Dikkat, bu gösterim yalnızca temel süreci tanıtmak içindir, üretim ortamında güvenlik açıkları olabilir.

Hazırlık çalışmaları

Node.js ortamını hazırlamamız ve Next.js kullanarak tam yığın projeler geliştirmemiz gerekiyor.

Bağımlılıkları kur

Öncelikle Next.js'i kurun:

npx create-next-app@14

Yardımları takip ederek kurulumu tamamladıktan sonra, proje dizinine girin ve çalıştırın:

npm run dev

localhost:3000 adresine erişerek temel bir Next.js projesini görebilirsiniz.

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

Ant Design Web3'ü kullanacağız, bu ücretsizdir, sürekli olarak bakım yapılmaktadır, kullanım deneyimi sıradan bileşen kütüphanesine benzer ve SIWE'yi destekler. Kurulum komutu aşağıdaki gibidir:

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

Wagmi'yi tanıtmak

layout.tsx dosyasına WagmiProvider'ı dahil etme:

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 ( \u003cwagmiweb3configprovider 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;

Sonra cüzdanı bağla butonunu ekleyin:

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 ( <>

Buna göre, temel SIWE giriş çerçevesini gerçekleştirmiş bulunuyoruz.

arayüz uygulaması

Şimdi arka uçta kullanıcı tanımlamasını doğrulayan bir arayüzü gerçekleştireceğiz.

Nonce

Nonce, imzanın güvenilirliğini artırmak için kullanılır. Rastgele bir dize oluşturuyoruz ve bunu adresle ilişkilendiriyoruz:

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

if (!address) { throw new Error("Geçersiz adres"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ veri: nonce, }); }

signMessage

signMessage genellikle cüzdan eklentisi tarafından gerçekleştirilir, Wagmi'nin imza yöntemini kullanıyoruz.

verifyMessage

Arka uç, imza içeriğini doğrulamalı ve güvenlik kontrolü yapmalıdı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 süre aşımı doğrulaması 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 (!geçerli) { throw new Error("Geçersiz imza"); }

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

Optimizasyon Önerileri

Doğrulama hızını artırmak için özel bir düğüm hizmeti kullanmanız önerilir. HTTPS RPC bağlantısını aldıktan sonra ZAN'ın düğüm hizmetini kullanarak 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 azaltacak ve arayüz hızını artıracaktır.