تطبيق SIWE في تطبيقات Web3 والممارسة

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

سيناريوهات استخدام SIWE

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

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

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

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

مبدأ SIWE وعملية

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

ربط المحفظة

هذه عملية شائعة في Web3، حيث يتم الاتصال بالمحفظة في التطبيق من خلال إضافة المحفظة.

توقيع

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

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

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

3. إرسال التوقيع: قم بإرسال التوقيع إلى الخلفية للتحقق.

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

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

دليل الممارسة

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

إعداد البيئة

تستخدم هذه المقالة Next.js لتطوير تطبيقات كاملة، ويجب إعداد بيئة Node.js.

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

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

npx create-next-app@14

بعد الدخول إلى دليل المشروع، قم بتشغيل:

npm تشغيل dev

تثبيت تبعيات SIWE ذات الصلة

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

تكوين Wagmi

قدم WagmiProvider في layout.tsx:

جافا سكريبت "استخدم العميل"; import { getNonce, verifyMessage } من "@/app/api"; استيراد { الشبكة الرئيسية، ميتا ماسك, OkxWallet ، توكن بوكيت, WagmiWeb3ConfigProvider, محفظة الاتصال } من "@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()، TokenPocket({ المجموعة: "شائع", }), محفظة Okx(), ]} queryClient={queryClient} > {أطفال} ); };

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

إضافة زر الاتصال

جافا سكريبت "استخدم العميل"; استيراد النوع { الحساب } من "@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="" فجوة ="وسط"> <connector buttontext="Sign" signoutbuttontext="Sign Outbuttontext="Sign Out" renderbuttontext="{renderSignBtnText}">

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

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

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

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

const JWT_SECRET = "your-secret-key"; // يرجى استخدام مفتاح أكثر أمانًا وإضافة التحقق من انتهاء الصلاحية وما إلى ذلك

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

تصدير وظيفة غير متزامنة POST(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، ويمكن الحصول على اتصال RPC من لوحة التحكم الخاصة بها.

استبدال RPC الافتراضي لـ publicClient:

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

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