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 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.
Cüzdanı Bağla: Kullanıcı cüzdanını cüzdan eklentisi ile bağlayın
İ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
TANIMLAMA almak:
Arka uç doğrulama imzası geçtikten sonra, kullanıcı TANIMLAMA ( olarak JWT) döner.
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:
![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((,
});
![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:
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>
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.
13 Likes
Reward
13
7
Share
Comment
0/400
AlwaysMissingTops
· 07-08 21:12
Bu, web2'nin o tuzaklı şımarıklığı değil mi?
View OriginalReply0
TradFiRefugee
· 07-08 06:58
Gayet güzel, en azından soğuk cüzdanın kaybolmasından iyidir.
View OriginalReply0
FadCatcher
· 07-06 02:51
Hala doğrudan Soğuk Cüzdan kullanmak daha iyi~
View OriginalReply0
BearMarketHustler
· 07-06 01:16
Böyle bir doğrulamanın çoktan olması gerekiyordu, oldukça güvenilir.
View OriginalReply0
SeasonedInvestor
· 07-06 01:15
Cüzdan ne kadar güvenli olursa olsun, enayilerim kendim daha güvenliyim.
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 Uygulama Senaryoları
Eğer Dapp'iniz aşağıdaki gereksinimlere sahipse, SIWE kullanmayı düşünebilirsiniz:
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.
Cüzdanı Bağla: Kullanıcı cüzdanını cüzdan eklentisi ile bağlayın
İmza:
TANIMLAMA almak: Arka uç doğrulama imzası geçtikten sonra, kullanıcı TANIMLAMA ( olarak JWT) döner.
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
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
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ı"(; }} />
![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>