SIWE: استخدام إثيريوم للتوقيع لتحقيق تحقق أقوى من الهوية في Dapp

SIWE(تسجيل الدخول باستخدام إثيريوم) هي وسيلة للتحقق من هوية المستخدم على إثيريوم، مشابهة لبدء المعاملات، تُستخدم لإثبات سيطرة المستخدم على المحفظة. حاليًا، تدعم معظم ملحقات المحفظة هذه الطريقة البسيطة للتحقق من التوقيع.

متى تحتاج إلى استخدام SIWE؟

إذا كانت تطبيقاتك اللامركزية تحتوي على المتطلبات التالية، يمكنك التفكير في استخدام SIWE:

• يمتلك نظام مستخدمين مستقل
• يحتاج إلى الاستعلام عن معلومات الخصوصية المتعلقة بالمستخدم

بالنسبة للتطبيقات التي تركز على الاستعلام ( مثل etherscan )، فلا حاجة لاستخدام SIWE.

على الرغم من أنه يمكن أن يدل على الهوية بعد توصيل المحفظة في الواجهة الأمامية لـ Dapp، إلا أن مجرد تمرير العنوان غير كافٍ لاستدعاءات واجهة برمجة التطبيقات التي تحتاج إلى دعم من الخلفية، لأن العنوان هو معلومات عامة وسهلة الاستخدام بشكل احتيالي.

مبادئ SIWE والعملية

تشمل العملية الأساسية لـ SIWE ثلاث خطوات: الاتصال بالمحفظة، التوقيع، والحصول على التعريف بالهوية.

ربط المحفظة

توصيل محفظة المستخدم في Dapp من خلال ملحق المحفظة.

توقيع

خطوات التوقيع تشمل:

1. الحصول على قيمة Nonce: استدعاء واجهة برمجة التطبيقات الخلفية للحصول على قيمة Nonce التي يتم إنشاؤها عشوائيًا
2. بناء محتوى التوقيع: يحتوي على قيمة Nonce، اسم المجال، معرف السلسلة وغيرها من المعلومات
3. استخدام المحفظة للتوقيع
4. إرسال التوقيع إلى الخلفية للتحقق

الحصول على التعريف بالهوية

بعد التحقق من صحة توقيع الخلفية، يتم إرجاع هوية المستخدم ( مثل JWT). بعد ذلك، عند الطلب من الواجهة الأمامية، يتم حمل العنوان وهوية المستخدم، مما يثبت ملكية المحفظة.

ممارسة SIWE

فيما يلي توضيح لكيفية تنفيذ SIWE في المشروع، الهدف هو جعل Dapp قادرًا على إرجاع JWT للتحقق من هوية المستخدم.

الأعمال التحضيرية

تستخدم هذه المقالة Next.js لتطوير تطبيقات الويب المتكاملة، ويجب إعداد بيئة Node.js.

تثبيت الاعتماديات

أولاً قم بتثبيت Next.js:

npx create-next-app@14

ادخل إلى دليل المشروع ثم قم بتشغيل:

npm تشغيل dev

يمكنك الوصول إلى localhost:3000 لرؤية مشروع Next.js الأساسي.

تثبيت التبعيات المتعلقة بـ SIWE

استخدام Ant Design Web3 للاتصال بالمحفظة:

npm تثبيت antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

إدخال واكمي

قدم WagmiProvider في layout.tsx:

جي إس إكس "استخدم العميل"; استيراد { الحصول على nonce, التحقق من الرسالة } من "@/app/api"; استيراد { الشبكة الرئيسية، ميتا ماسك, محفظة Okx, توكن بوكيت, WagmiWeb3ConfigProvider, واتصال المحفظة, } من "@ant-design/web3-wagmi"; import { QueryClient } من "@tanstack/react-query" ؛ استيراد React من "react"; import { createSiweMessage } من "viem / siwe" ؛ استيراد { http } من "wagmi" ؛

const YOUR_WALLET_CONNECT_PROJECT_ID = "c07c0051c2055890eade3556618e38a6"; const queryClient = QueryClient() جديد;

const WagmiProvider: React.FC = ({ children }) = > { const [jwt, setJwt] = React.useState(null);

( الإرجاع <wagmiweb3configprovider siwe="{{" getnonce:="" async="" (address)=""> (انتظر الحصول على nonce(عنوان)).بيانات, createMessage: (props) => { العودة createSiweMessage( { ... الدعائم ، بيان: "Ant Design Web3" }); }, verifyMessage: (message غير متزامن، signature) = > { const jwt = (await verifyMessage(message, signature)).data; setJwt(jwt). أعاد!! JWT. }, ｝｝ السلاسل = {[Mainnet]} transports={{ [Mainnet.id]: http()، ｝｝ walletConnect={{ معرف المشروع: YOUR_WALLET_CONNECT_PROJECT_ID ، ｝｝ المحافظ={[ ميتا ماسك(), WalletConnect()، توكن بوكيت({ المجموعة: "شائع", }), OkxWallet()، ]} queryClient={queryClient} > {أطفال} ); };

تصدير افتراضي WagmiProvider;

زر الاتصال بالإنترنت

جي إس إكس "استخدام العميل"؛ استيراد النوع { الحساب } من "@ant-design/web3"; استيراد { ConnectButton ، Connector } من "@ant-design / web3" ؛ import { Flex ، Space } من "antd" ؛ استيراد React من "react";

تصدير الدالة الافتراضية App() { const jwt = React.useContext(JwtProvider);

const renderSignBtnText = ( defaultDom: React.ReactNode ، الحساب؟: الحساب ) => { const { address } = حساب ؟؟ {}; const ellipsisAddress = العنوان ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; العودة لتسجيل الدخول كـ ${ellipsisAddress}; };

( الإرجاع <> <flex vertical="" فجوة ="وسط">

تنفيذ الواجهة

واجهة نونس

جافا سكريبت استيراد { randomBytes } من "التشفير" ؛ استيراد { addressMap } من "../cache";

تصدير الدالة غير المتزامنة GET(request: Request) { const { searchParams } = عنوان URL الجديد(request.url); const address = searchParams.get( "address");

إذا (!عنوان) { throw new Error("عنوان غير صالح"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(العنوان, nonce); إرجاع Response.json({ البيانات: nonce, }); }

واجهة التحقق من التوقيع

جافا سكريبت import { createPublicClient, http } من "viem"; استيراد { mainnet } من "viem / chains" ؛ استيراد jwt من "jsonwebtoken"; import { parseSiweMessage } من "viem / siwe" ؛ import { addressMap } من ".. /cache";

const JWT_SECRET = "مفتاحك السري" ؛

const publicClient = createPublicClient({ الشبكة: الشبكة الرئيسية, النقل: http(), });

تصدير الدالة غير المتزامنة POST(request: Request) { const { signature, message } = await request.json();

const { nonce ، العنوان = "0x" } = parseSiweMessage(message) ؛

إذا (!nonce || nonce !== addressMap.get(address)) { رمي Error( جديد "غير صالح") ؛ }

const valid = await publicClient.verifySiweMessage({ رسالة، العنوان, التوقيع, });

إذا (!valid) { throw new Error("توقيع غير صالح"); }

رمز const = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); إرجاع Response.json({ البيانات: توكن, }); }

اقتراحات تحسين

لزيادة سرعة التحقق، يُنصح باستخدام خدمات العقد المتخصصة لاستبدال RPC الافتراضي. على سبيل المثال، استخدم خدمة عقد ZAN:

جافا سكريبت const publicClient = createPublicClient({ سلسلة: الشبكة الرئيسية، النقل: http('), //خدمة العقد ZAN RPC });

يمكن أن يقلل هذا بشكل كبير من وقت التحقق، ويزيد من سرعة الواجهة.

! [دليل SIWE: كيف تجعل Dapp الخاص بك أكثر قوة؟] ](https://img-cdn.gateio.im/webp-social/moments-0ce46cff7473e96e768adfb5fc6dafb8.webp)