SIWE Kullanım Kılavuzu: Dapp Fonksiyonlarınızı Geliştirin

SIWE (Ethereum ile Giriş Yap) Ethereum üzerinde kullanıcı kimliğini 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 cüzdan eklentisi bu basit kimlik doğrulama yöntemini desteklemektedir, eklentide imza atmak yeterlidir.

Bu makale, Ethereum üzerindeki imza senaryolarını tartışmaktadır, Solana, SUI gibi diğer halka açık zincirleri kapsamaz.

Projenizin SIWE'ye ihtiyacı var mı?

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 kontrol etmeniz gerekiyor.

Ancak Dapp'iniz esas olarak sorgulama işlevine sahipse, etherscan'a benzer şekilde, SIWE kullanmanıza gerek yoktur.

Bağlantı kurduğunuzda cüzdan sahipliğini göstermez mi? Bu ifade tamamen doğru değil. Ön yüz için cüzdanı bağlamak gerçekten de kimliği gösterir, ancak arka uç desteği gerektiren API çağrıları için yalnızca adres ile kimlik kanıtlamak yeterli değildir, çünkü adresler kamuya açıktır ve herkes tarafından kullanılabilir.

SIWE'nin Prensibi ve Süreci

SIWE süreci üç adımda özetlenebilir: cüzdan bağlama, imzalama, kimlik belirleme.

Cüzdanı Bağla

Bu yaygın bir Web3 işlemi, Dapp içinde cüzdanı bağlamak için cüzdan eklentisi kullanır.

imza

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

Nonce değerini almak için arka uç arayüzü çağrılmalıdır. Arka uç, rastgele bir Nonce değeri oluşturur ve bunu mevcut adresle ilişkilendirir, sonraki imzalama işlemleri için hazırlık yapar.

Ön uç, Nonce değerini aldıktan sonra, Nonce değeri, alan adı, zincir ID'si ve imza içeriği gibi imza içeriğini oluşturur ve genellikle cüzdanın sağladığı yöntemler kullanılarak 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 bilgisi döndürülür, örneğin JWT. Ön uç, sonraki isteklerde adres ve kimlik bilgisi taşıyarak cüzdan sahipliğini kanıtlayabilir.

Uygulamalı İşlemler

Next.js kullanarak SIWE işlevselliği entegre edilmiş bir tam yığın uygulama geliştireceğiz. Dikkat, bu demo yalnızca temel süreci göstermek içindir, doğrudan üretim ortamında kullanmak için uygun değildir.

hazırlık çalışmaları

Node.js ortamının kurulu olduğundan emin olun.

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

Öncelikle Next.js'i kurun:

npx create-next-app@14

Kurulum talimatlarını izleyerek tamamlayın.

Proje dizinine girin, projeyi çalıştırın:

npm run dev

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

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

Ant Design Web3'ü kullanmayı seçiyoruz çünkü ücretsiz, sürekli bakım yapılmakta, iyi bir kullanıcı deneyimi sunmakta ve SIWE'yi desteklemektedir.

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

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

Wagmi'yi tanıtmak

layout.tsx dosyasında ilgili Provider'ları içe aktarın:

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

Cüzdan bağlantı düğmesi ekle:

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

    </connector></connectbutton></space>
    <div>JWT: {jwt}</div>
  </flex>
<!---->

); }

arayüz uygulaması

Nonce

Rastgele Nonce oluştur ve adresle ilişkilendir:

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

mesajı doğrula

İmzayı doğrula ve JWT'yi döndür:

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

const publicClient = createPublicClient({ zincir: ana ağ, taşıma: http(), });

export async function POST(request: Request) { const { signature, message } = 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: "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. RPC bağlantısını aldıktan sonra kodda varsayılan RPC'yi değiştirmek için ZAN'ın düğüm hizmetini kullanabilirsiniz.

typescript const publicClient = createPublicClient({ zincir: ana ağ, taşımacılık: http('), //ZAN düğüm hizmeti RPC });

Bu, arayüz yanıt hızını önemli ölçüde artırabilir.