SIWE:Ethereum Giriş yapmanın basit bir uygulaması

SIWE(Ethereum ile Giriş Yap), kullanıcının kimliğini Ethereum üzerinde doğrulamanın bir yoludur, cüzdanın işlem başlatmasına benzer, kullanıcının bu cüzdan üzerinde kontrolü olduğunu gösterir. Şu anda kimlik doğrulama süreci oldukça basit, sadece cüzdan eklentisinde bilgileri imzalamanız yeterlidir, çoğu yaygın cüzdan eklentisi bunu desteklemektedir.

Bu makalede Ethereum üzerindeki imza senaryoları tartışılmakta, Solana, SUI gibi diğer blok zincirleri ele alınmamaktadır.

Projenin SIWE'ye ihtiyacı var mı

Eğer Dapp'inizin aşağıdaki gereksinimleri 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 gibi bir uygulama ise, SIWE'ye kesinlikle ihtiyacınız olmayabilir.

Cüzdanla bağlantı sağlandığında Dapp üzerinde cüzdanın sahibi olduğunuzu gösterse de, bu yalnızca ön uç için geçerlidir. Arka uç desteği gerektiren API çağrıları için yalnızca adres iletmek yeterli değildir, çünkü adresler kamuya açıktır ve herkes "ödünç alabilir".

SIWE'nin Prensibi ve Süreci

SIWE sürecini üç adımda özetleyebiliriz: cüzdanı bağlama - imzalama - kimlik belirleme.

Cüzdanı bağla

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

İmza

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

Nonce değerini almak için arka uç arayüzünü çağırmak gerekir. Arka uç isteği aldıktan sonra 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, imza içeriği vb. dahil olmak üzere imza içeriğini oluşturur. Genellikle içerik için cüzdan tarafından sağlanan imza yöntemleri kullanılır.

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

kimlik bilgisi al

Arka uç imza doğrulaması başarılı olduktan sonra, ilgili kullanıcı kimlik belirleyicisi, örneğin JWT, dönecektir. Ön uç daha sonra arka uca istek gönderirken ilgili adres ve kimlik belirleyicisini ekleyerek cüzdanın sahipliğini kanıtlayabilir.

Uygulama

Next.js kullanarak basit bir SIWE giriş çerçevesi geliştireceğiz. Bu demo, SIWE'nin temel sürecini tanıtmak amacıyla hazırlanmıştır ve üretim ortamında güvenlik sorunları olabilir.

Hazırlık çalışmaları

Öncelikle Next.js'i kurun:

npx create-next-app@14

Yönergelere göre kurulumu tamamlayın. Proje dizinine girdikten sonra, ç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ükle

Ant Design Web3 kullanacağız, çünkü ücretsiz, aktif olarak bakım yapılıyor ve kullanım deneyimi normal bileşen kütüphanelerine benziyor, SIWE'yi destekliyor.

Aşağıdaki komutu çalıştırarak bağımlılıkları yükleyin:

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

Wagmi'yi tanıt

Ant Design Web3'ün SIWE'si Wagmi kütüphanesine bağımlıdır. layout.tsx dosyasında ilgili Provider'ı içe aktarın:

javascript "use client"; import { getNonce, verifyMessage } from "@/app/api"; import { Ana ağ, MetaMask, OkxCüzdan, 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} ); };

export default WagmiProvider;

Sonra bir bağlantı düğmesi tanımlayın:

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

return ( <>

Arayüz Uygulaması

Nonce

Nonce, imzanın güvenilirliğini artırmak için kullanılır. Uygulaması şöyledir:

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(address, nonce); return Response.json({ veri: nonce, }); }

mesajı doğrula

Arka uçta imza doğrulama uygulaması:

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 ilgili süre aşımı doğrulamasını 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, });

if (!valid) { throw new Error("Geçersiz imza"); }

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

Optimizasyon Önerileri

Arayüz yanıt hızını artırmak için özel bir düğüm hizmeti kullanmanız önerilir. Örneğin, publicClient'in varsayılan RPC'sini değiştirmek için ZAN'ın düğüm hizmetini kullanabilirsiniz:

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

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