SIWE: إضافة القدرة على التحقق من الهوية لتطبيقات Dapp

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

متى تحتاج إلى SIWE

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

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

بالنسبة للتطبيقات التي تركز على الاستعلام، مثل etherscan، يمكن عدم استخدام SIWE.

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

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

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

1. ربط المحفظة: قم بربط المحفظة في Dapp من خلال مكون المحفظة.

2. التوقيع:

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

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

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

ممارسة SIWE

سنقوم بتطوير Dapp يدعم SIWE باستخدام Next.js، والهدف هو إرجاع JWT للتحقق من هوية المستخدم.

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

1. تثبيت Next.js:

npx create-next-app@14

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

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

تحقيق SIWE

1. تقديم WagmiProvider في layout.tsx:

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

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

2. إضافة زر الاتصال:

جافا سكريبت "استخدم العميل"; استيراد النوع { الحساب } من "@ant-design/web3"؛ استيراد { ConnectButton ، Connector } من "@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="" فجوة ="وسط"> {JWT} ); }

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

1. واجهة 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, }); }

2. واجهة تحقق الرسائل:

جافا سكريبت استيراد { إنشاء عميل عام، http } من "viem"؛ استيراد { الشبكة الرئيسية } من "viem/chains"; استيراد jwt من "jsonwebtoken"; import { parseSiweMessage } من "viem / siwe" ؛ import { addressMap } من ".. /cache";

const JWT_SECRET = "مفتاحك السري" ؛

const publicClient = createPublicClient({ السلسلة: الشبكة الرئيسية, النقل: http(), });

تصدير الدالة غير المتزامنة POST(request: Request) { const { التوقيع, الرسالة } = 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({ البيانات: توكن, }); }

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

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

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

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