دليل استخدام SIWE: عزز وظائف Dapp الخاصة بك

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

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

هل يحتاج مشروعك إلى SIWE؟

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

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

ولكن إذا كانت Dapp الخاصة بك تركز بشكل أساسي على وظائف الاستعلام، مثل etherscan، فلا داعي لاستخدام SIWE.

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

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

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

ربط المحفظة

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

توقيع

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

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

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

بعد بناء التوقيع، أرسله إلى الخلفية.

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

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

الممارسة العملية

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

التحضيرات

تأكد من تثبيت بيئة 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

استيراد موفرين ذوي الصلة في layout.tsx:

تايب سكريبت "استخدم العميل"; استيراد { الحصول على nonce ، التحقق من الرسالة } من "@/app/api"؛ استيراد { الشبكة الرئيسية، ميتا ماسك، OkxWallet ، توكن بوكيت, WagmiWeb3ConfigProvider, محفظة الاتصال } من "@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)=""> (انتظر الحصول على 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"; استيراد { زر الاتصال ، الموصل } من "@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="" فجوة ="كبير">

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

نونك

إنشاء 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"؛ استيراد { mainnet } من "viem / chains" ؛ استيراد jwt من "jsonwebtoken"; import { parseSiweMessage } من "viem / siwe" ؛ استيراد { 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)) { throw new Error("رمز غير صالح"); }

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

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

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

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

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

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

يمكن أن يؤدي ذلك إلى تحسين كبير في سرعة استجابة الواجهة.