SIWE:تسجيل الدخول بإثيريوم البسيط

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

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

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

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

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

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

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

مبدأ SIWE وعملية

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

ربط المحفظة

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

توقيع

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

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

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

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

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

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

ممارسة

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

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

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

npx إنشاء-تطبيق-التالي@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

يعتمد SIWE في Ant Design Web3 على مكتبة Wagmi. قم بإدخال مزودات ذات الصلة في layout.tsx:

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

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

نونس

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, }); }

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

تنفيذ التحقق من صحة التوقيع في الواجهة الخلفية:

جافا سكريبت import { createPublicClient, http } من "viem"; استيراد { 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) ؛

إذا (!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({ البيانات: توكن, }); }

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

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

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

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