SIWE: أداة قوية لتعزيز تحقق الهوية في Dapp

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

سيركز هذا المقال على سيناريوهات التوقيع على إيثيريوم، دون التطرق إلى سلاسل الكتل العامة الأخرى مثل سولانا وSUI.

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

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

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

بالنسبة لتطبيق Dapp( الذي يقدم بشكل رئيسي وظيفة الاستعلام مثل مستعرض الكتل )، يمكن عدم استخدام التعريف بالهوية.

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

مبدأ SIWE وعملية

يمكن تلخيص عملية SIWE في ثلاث خطوات: ربط المحفظة - التوقيع - الحصول على التعريف بالهوية. دعونا نتعرف على هذه الخطوات الثلاث بتفصيل.

ربط المحفظة

هذا هو إجراء شائع في Web3، حيث يتم توصيل محفظة المستخدم في Dapp من خلال ملحق المحفظة.

توقيع

تتضمن خطوات توقيع SIWE الحصول على قيمة Nonce، وتوقيع المحفظة والتحقق من توقيع الخلفية.

أولاً، تحتاج إلى استدعاء واجهة برمجة التطبيقات الخلفية للحصول على قيمة Nonce. ستقوم الخلفية بإنشاء Nonce عشوائي وربطه بعنوانك الحالي، وذلك للتحضير للتوقيع في المستقبل.

بعد أن تحصل الواجهة الأمامية على قيمة Nonce، يتم بناء محتوى التوقيع، والذي عادة ما يتضمن قيمة Nonce، واسم النطاق، ورقم تعريف السلسلة، ومحتوى التوقيع وغيرها. ثم يتم استخدام الطريقة التي توفرها المحفظة لتوقيع المحتوى.

أخيرًا، أرسل التوقيع إلى الخلفية للتحقق.

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

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

ممارسة SIWE

سوف نستخدم Next.js لتطوير تطبيق SIWE بسيط، والهدف هو جعل Dapp قادرة على إعادة JWT لاستخدامه في التعريف بالهوية. لاحظ أن هذا العرض التقديمي يستخدم فقط لتقديم العملية الأساسية، وقد توجد مخاطر أمنية في بيئة الإنتاج.

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

نحتاج إلى إعداد بيئة Node.js واستخدام Next.js لتطوير مشروع كامل المكدس.

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

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

npx create-next-app@14

بعد إكمال التثبيت وفقًا للتعليمات، انتقل إلى دليل المشروع وقم بتشغيل:

npm تشغيل dev

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

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

سنستخدم Ant Design Web3، وهو مجاني، ويستمر في الصيانة، وتجربة الاستخدام مشابهة لمكتبة المكونات العادية، ويدعم SIWE. أوامر التثبيت كما يلي:

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

إدخال Wagmi

قدم WagmiProvider في layout.tsx:

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

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)=""> (await getNonce(address)).data, 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 ، ｝｝ المحافظ={[ MetaMask()، WalletConnect()، TokenPocket({ المجموعة: "شائع", }), OkxWallet()، ]} queryClient={queryClient} > {أطفال} ); };

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

ثم أضف زر ربط المحفظة:

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

تصدير وظيفة افتراضية 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="" فجوة ="كبير">

إلى هنا، لقد قمنا بتنفيذ إطار تسجيل الدخول الأساسي SIWE.

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

الآن سنقوم بتنفيذ واجهة التحقق من هوية المستخدم في الجزء الخلفي.

نونس

يستخدم Nonce لزيادة موثوقية التوقيع. نقوم بإنشاء سلسلة عشوائية ونعمل على ربطها بالعنوان:

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

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

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

signMessage

يتم عادةً تنفيذ signMessage بواسطة مكون إضافي للمحفظة، ونحن نستخدم طريقة التوقيع الخاصة بـ Wagmi.

تحقق من الرسالة

يحتاج الجزء الخلفي إلى التحقق من محتوى التوقيع وإجراء فحص الأمان:

جافا سكريبت استيراد { إنشاء عميل عام، http } من "viem"؛ استيراد { الشبكة الرئيسية } من "viem/chains"; استيراد jwt من "jsonwebtoken"; import { parseSiweMessage } من "viem / siwe" ؛ استيراد { addressMap } من "../cache";

const JWT_SECRET = "your-secret-key"; // يرجى استخدام مفتاح أكثر أمانًا، وإضافة التحقق من انتهاء الصلاحية وما إلى ذلك

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({ بيانات: توكن, }); }

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

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

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

سيؤدي ذلك إلى تقليل وقت التحقق بشكل كبير وزيادة سرعة الواجهة.