SIWE: أداة قوية لتسجيل الدخول إلى إثيريوم

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

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

متى تحتاج إلى SIWE؟

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

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

بالنسبة لـ Dapp( التي تقدم بشكل رئيسي وظيفة الاستعلام مثل مستعرض الكتل )، قد لا تحتاج إلى SIWE.

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

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

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

ربط المحفظة

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

توقيع

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

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

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

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

الحصول على هوية

بعد التحقق من صحة التوقيع في الخلفية، سيتم إرجاع هوية المستخدم ( مثل 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 لربط المحفظة وتنفيذ وظيفة SIWE:

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

إدخال Wagmi

قم باستيراد WagmiProvider في layout.tsx:

جي إس إكس "استخدام العميل"؛ استيراد { الحصول على الرقم التسلسلي، التحقق من الرسالة } من "@/app/api"؛ استيراد { الشبكة الرئيسية، ميتا ماسك, OkxWallet ، توكن بوكيت, WagmiWeb3ConfigProvider, WalletConnect، } من "@ant-design/web3-wagmi"; import { QueryClient } من "@tanstack/react-query" ؛ استيراد رد فعل من "رد فعل" ؛ 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)=""> (انتظر الحصول على 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()، TokenPocket({ المجموعة: "شائع", }), OkxWallet()، ]} queryClient={queryClient} > {أطفال} ); };

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

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

جي إس إكس "استخدام العميل"؛ استيراد النوع { الحساب } من "@ant-design/web3"; استيراد { ConnectButton ، Connector } من "@ant-design / web3" ؛ import { 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 } من "التشفير" ؛ import { 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, }); }

verifyMessage

تحقق من التوقيع وأعد JWT:

جافا سكريبت استيراد { إنشاء عميل عام، http } من "viem"؛ استيراد { الشبكة الرئيسية } من "viem/chains"; استيراد jwt من "jsonwebtoken"; import { parseSiweMessage } من "viem / siwe" ؛ import { 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({ البيانات: رمز, }); }

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

تحسين الأداء

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

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

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