SIWE: اجعل التحقق من هوية Dapp الخاص بك أكثر أمانًا وموثوقية

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

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

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

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

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

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

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

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

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

ربط المحفظة

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

توقيع

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

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

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

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

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

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

ممارسة SIWE

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

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

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

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

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

npx create-next-app@14

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

npm تشغيل dev

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

نستخدم مكتبة مكونات Ant Design Web3 لتنفيذ اتصال المحفظة و SIWE.

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

إدخال Wagmi

تعتمد SIWE في Ant Design Web3 على مكتبة Wagmi. نقوم باستدعاء مزودات ذات الصلة في layout.tsx، مما يسمح للمشروع بالكامل باستخدام Hooks المقدمة من Wagmi.

أولاً ، قم بتعريف تكوين WagmiProvider:

جي إس إكس "استخدام العميل"؛ استيراد { الحصول على nonce, التحقق من الرسالة } من "@/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)=""> (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} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

تصدير افتراضي 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 } من "التشفير" ؛ استيراد { 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" ؛ استيراد { 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({ البيانات: الرمز، }); }

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

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

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

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