SIWE: طريقة التعريف بالهوية التي تجعل DApp الخاص بك أكثر قوة

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

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

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

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

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

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

مبدأ SIWE وعملية

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

ربط المحفظة

هذه عملية شائعة في Web3، تتصل المحفظة في DApp عبر ملحق المحفظة.

التوقيع

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

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

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

بعد التحقق من صحة التوقيع في الخلفية، سيتم إرجاع تعريف هوية المستخدم، مثل 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

تقديم Wagmi

قدم WagmiProvider في layout.tsx:

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

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

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

واجهة التحقق من الرسائل

الآلة المطبوعة استيراد {إنشاء عميل عام، http} من "viem"؛ استيراد { mainnet } من "viem / chains" ؛ استيراد jwt من "jsonwebtoken"; import { parseSiweMessage } من "viem / siwe" ؛ import { 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)) { رمي Error( جديد "غير صالح") ؛ }

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

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

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

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

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

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

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