التحقق من الهوية إثيريوم: دليل تنفيذ SIWE

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

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

سيناريوهات استخدام SIWE

إذا كان لديك تطبيق لامركزي (Dapp) لديه المتطلبات التالية، يمكنك التفكير في استخدام SIWE:

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

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

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

كيفية عمل SIWE

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

ربط المحفظة

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

توقيع

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

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

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

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

مثال على تنفيذ SIWE

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

إعداد البيئة

هذه المثال مبني على تطوير Nextjs، ويحتاج إلى إعداد بيئة Node.js. باستخدام Nextjs، يمكن تطوير مشاريع كاملة بسهولة، دون الحاجة إلى فصل الواجهة الأمامية عن الخلفية.

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

أولاً قم بتثبيت Nextjs:

npx create-next-app@14

بعد إكمال التثبيت حسب التعليمات، انتقل إلى دليل المشروع وابدأ:

npm تشغيل dev

قم بزيارة localhost:3000 لرؤية مشروع Nextjs الأساسي.

تثبيت الاعتماديات المتعلقة بـ 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"؛ استيراد { الشبكة الرئيسية، ميتا ماسك, محفظة 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 siweconfig="{{" getnonce:="" async="" (address)=""> (انتظر الحصول على الرقم التسلسلي(العنوان)).البيانات, 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="" فجوة ="وسط"> <connector.siwebutton renderbuttontext="{renderSignBtnText}"> </connector.siwebutton>

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

واجهة Nonce

إنشاء 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, }); }

واجهة التحقق من الرسائل

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

الآلة المطبوعة استيراد { إنشاء عميل عام، http } من "viem"؛ استيراد { الشبكة الرئيسية } من "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({ البيانات: توكن, }); }

تحسين الأداء

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

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

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