SIWE:كيفية تحقيق التعريف بالهوية إيثريوم لتعزيز وظائف Dapp

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

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

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

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

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

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

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

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

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

ربط المحفظة

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

توقيع

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

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

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

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

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

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

ممارسة SIWE

الآن هناك العديد من المكونات والمكتبات التي تدعم الاتصال السريع بمحافظ SIWE. دعنا نقوم بعملية فعلية، الهدف هو جعل Dapp الخاص بك قادرًا على إرجاع JWT للتحقق من هوية المستخدم.

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

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

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

تثبيت التبعيات

أولاً، قم بتثبيت Next.js، ثم قم بتشغيله في دليل المشروع:

npx create-next-app@14

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

npm تشغيل dev

ثم قم بزيارة localhost:3000 لرؤية تشغيل مشروع Next.js الأساسي.

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

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

أدخل في الطرفية:

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

إدخال Wagmi

تصميم Ant Design Web3 يعتمد على مكتبة Wagmi لتنفيذ SIWE. نحن نستورد مزودين ذوي الصلة في 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 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()، توكنبوكيت({ المجموعة: "الشائعة", }), OkxWallet()، ]} queryClient={queryClient} > {الأطفال} ); };

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

نحن نستخدم مزود Ant Design Web3، ونحدد بعض واجهات SIWE، وسيتم تقديم التنفيذ المحدد لاحقًا.

ثم أضف زر ربط المحفظة كمدخل للواجهة الأمامية.

حتى الآن، لقد قمنا بتوصيل SIWE بشكل بسيط.

بعد ذلك، قم بتعريف زر الاتصال، لتنفيذ الاتصال بالمحفظة والتوقيع:

جافا سكريبت "استخدم العميل"; استيراد النوع { حساب } من "@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="" فجوة ="كبير"> {(account) => ( <connectbutton.signin accountcomponent="{false}" renderbuttontext="{(dom)" ==""> renderSignBtnText(dom, account)} /> )} </connectbutton.signin> {JWT} ); }

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

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

SIWE يحتاج إلى بعض الواجهات لمساعدة الخلفية في التحقق من هوية المستخدم. الآن دعونا ننفذ ذلك ببساطة.

نونس

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

تنفيذ Nonce بسيط جداً، أولاً يتم إنشاء سلسلة عشوائية ( تتكون من حروف وأرقام )، ثم يتم ربط nonce بـ address:

جافا سكريبت استيراد { 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, }); }

signMessage

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

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

بعد توقيع المستخدم، يجب إرسال المحتوى قبل التوقيع والتوقيع معًا إلى الخلفية للتحقق. يقوم الخلفية بتحليل المحتوى من التوقيع للمقارنة، إذا كان متطابقًا، فهذا يدل على نجاح التحقق.

بالإضافة إلى ذلك، يجب التحقق من أمان محتوى التوقيع، مثل التحقق مما إذا كانت قيمة Nonce متوافقة مع تلك المخصصة للمستخدم. بعد التحقق، يتم إرجاع JWT المستخدم للتحقق من الأذونات في المستقبل:

جافا سكريبت استيراد { إنشاء عميل عام، http } من "فييم"؛ استيراد { mainnet } من "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) ؛ console.log( "nonce" ، nonce ، العنوان ، addressMap) ؛

// تحقق مما إذا كانت قيمة nonce متطابقة إذا (!nonce || nonce !== addressMap.get(address)) { رمي Error( جديد "غير صالح") ؛ }

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

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

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

بهذا، تم تطوير تطبيق Dapp الذي يحقق تسجيل الدخول SIWE بشكل أساسي.

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

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

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

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

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