SIWE TANIMLAMA: Dapp kullanıcılarının doğrulamasını daha güvenli ve güvenilir hale getirir.

SIWE Tanımı: Dapp kimlik doğrulamanızı daha güvenli hale getirin

SIWE(Ethereum ile Giriş), Ethereum tabanlı bir kullanıcı tanımlama yöntemidir. İşlem başlatmaya benzer şekilde, kullanıcı cüzdan üzerindeki kontrolünü kanıtlamak için imza atar. Şu anda çoğu yaygın cüzdan eklentisi bu basit kimlik doğrulama yöntemini desteklemektedir.

SIWE Kullanım Kılavuzu: Dapp'inizi Nasıl Daha Güçlü Hale Getirirsiniz?

SIWE Uygulama Senaryoları

Eğer Dapp'iniz 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

Sorgulama odaklı Dapp(, örneğin blok gezgini ) için SIWE gerekli olmayabilir.

Dikkate değer bir nokta, sadece cüzdan bağlantısı kurmanın kimliği tamamen kanıtlamadığıdır. Backend desteği gerektiren API çağrıları için hala ek bir TANIMLAMA gereklidir, aksi takdirde herkes "açık" adres bilgilerini "ödünç alabilir".

SIWE Çalışma Prensibi

SIWE'nin temel süreci üç adımdan oluşur: cüzdanı bağlama, imzalama, TANIMLAMA alma.

  1. Cüzdanı Bağla: Kullanıcı cüzdanını cüzdan eklentisi ile bağlayın

  2. İmza:

    • Nonce değerini al: Rastgele Nonce değerini almak için arka uç API'sini çağırın.
    • İmza içeriğini oluştur: Nonce, alan adı, zincir ID'si gibi bilgileri içerir
    • Cüzdanı imzalamak için kullanın
    • İmzanızı arka uç doğrulaması için gönderin
  3. TANIMLAMA almak: Arka uç doğrulama imzası geçtikten sonra, kullanıcı TANIMLAMA ( olarak JWT) döner.

SIWE Kullanım Kılavuzu: Dapp'inizi nasıl daha güçlü hale getirebilirsiniz?

SIWE Uygulaması

Aşağıda basit bir Demo ile SIWE sürecini uygulayacağız. Dikkat, bu Demo yalnızca temel süreci göstermek için kullanılmaktadır, doğrudan üretim ortamında kullanılmamalıdır.

Çevre Hazırlığı

Next.js ile tam yığın uygulamalar geliştirmek için Node.js ortamını hazırlamamız gerekiyor.

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

Öncelikle Next.js projesi oluşturun:

npx create-next-app@14

Proje dizinine girdikten sonra, SIWE ile ilgili bağımlılıkları kurun:

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

SIWE Kılavuzu: Dapp'inizi nasıl daha güçlü hale getirebilirsiniz?

Wagmi'yi yapılandır

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

jsx "kullanıcıyı 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";

const YOUR_WALLET_CONNECT_PROJECT_ID = "xxx"; const queryClient = new QueryClient();

const WagmiProvider = ({ 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={{ [Ana Ağ.id]: http(), }} walletConnect={{ projectId: YOUR_WALLET_CONNECT_PROJECT_ID, }} cüzdanlar={[ MetaMask(), WalletConnect(), TokenPocket({ grup: "Popüler", }), OkxWallet(), ]} sorguMüşteri={sorguMüşteri} > {children} ); };

varsayılan olarak WagmiProvider'ı dışa aktar

SIWE Kullanım Kılavuzu: Dapp'inizi nasıl daha güçlü hale getirebilirsiniz?

Bağlantı düğmesi ekle

Cüzdanı bağlayıp imzalayacak bir düğme oluştur:

jsx "kullanıcıyı kullan"; import { ConnectButton } from "@ant-design/web3"; import React from "react"; import { JwtProvider } from "./JwtProvider";

export default function App() { const jwt = React.useContext(JwtProvider);

const renderSignBtnText = (defaultDom, account) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; ${ellipsisAddress} olarak oturum açmayı geri döndür. };

return ( <> <connectbutton.signin label="{renderSignBtnText}" onsignmessagesuccess="{(" ==""> { console.log)"Mesajı imzalama başarılı"(; }} />

JWT: {jwt}
); }

![SIWE Kullanım Kılavuzu: Dapp'inizi nasıl daha güçlü hale getirebilirsiniz?])https://img-cdn.gateio.im/webp-social/moments-18a98c883797c414a689c54ae0d65302.webp(

) arka uç arayüzünü gerçekleştirin

Nonce arayüzü

javascript import { randomBytes } from "crypto"; import { addressMap } from "../cache";

export async function GET###request( { const { searchParams } = new URL)istek.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, }(; }

)# İmza Doğrulama Arayüzü

javascript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; jwt'yi "jsonwebtoken"'dan içe aktar. import { parseSiweMessage } from "viem/siwe"; import { addressMap } from "../cache";

const JWT_SECRET = "your-secret-key";

const publicClient = createPublicClient###{ zincir: ana ağ, taşımacılık: http((, });

export async function POST)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, }(; }

![SIWE Kullanım Kılavuzu: Dapp'inizi nasıl daha güçlü hale getirebilirsiniz?])https://img-cdn.gateio.im/webp-social/moments-9351d7f08e48962120d591c3a0c7d245.webp(

Optimizasyon Önerileri

Doğrulama hızını artırmak için özel bir düğüm hizmeti kullanmanız önerilir. Varsayılan RPC'yi değiştirmek için ZAN düğüm hizmetini kullanabilirsiniz:

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

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

![SIWE Kullanım Kılavuzu: Dapp'inizi nasıl daha güçlü hale getirebilirsiniz?])https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp(</connectbutton.signin>

DAPP-10.16%
View Original
This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.
  • Reward
  • 7
  • Share
Comment
0/400
AlwaysMissingTopsvip
· 07-08 21:12
Bu, web2'nin o tuzaklı şımarıklığı değil mi?
View OriginalReply0
TradFiRefugeevip
· 07-08 06:58
Gayet güzel, en azından soğuk cüzdanın kaybolmasından iyidir.
View OriginalReply0
FadCatchervip
· 07-06 02:51
Hala doğrudan Soğuk Cüzdan kullanmak daha iyi~
View OriginalReply0
BearMarketHustlervip
· 07-06 01:16
Böyle bir doğrulamanın çoktan olması gerekiyordu, oldukça güvenilir.
View OriginalReply0
SeasonedInvestorvip
· 07-06 01:15
Cüzdan ne kadar güvenli olursa olsun, enayilerim kendim daha güvenliyim.
View OriginalReply0
AirdropCollectorvip
· 07-06 01:07
Cüzdan imzası güvenli mi? Pek güvenmiyorum.
View OriginalReply0
GasGuzzlervip
· 07-06 01:07
Yine de imza en güvenilir olanıdır.
View OriginalReply0
Trade Crypto Anywhere Anytime
qrCode
Scan to download Gate app
Community
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)