خبرکاو:

واسطه‌های متمرکز دیرینه، مانند دولت یا شرکت‌های بزرگ، کسانی هستند که اطلاعات شناسایی شما را در سیستم‌های سنتی که مدیریت می‌کنند شما را می‌سازند و نگه می‌دارند.

اما این بدان معناست که شما هیچ کنترلی بر اطلاعات مربوط به هویت خود ندارید، چه کسی به اطلاعات قابل شناسایی شخصی (PII) و تا چه حد دسترسی دارد.

در نتیجه، هویت غیرمتمرکز اطلاعات مربوط به هویت را فراهم می کند که خودکنترل، خصوصی و قابل حمل است. شناسه ها و گواهی های غیرمتمرکز به عنوان قطعات اصلی ساختمان عمل می کنند.

به لطف پایگاه‌های داده غیرمتمرکز برنامه‌های Ceramic، توسعه‌دهندگان برنامه‌ها می‌توانند از داده‌ها در سراسر برنامه‌ها استفاده مجدد کنند و به‌طور خودکار آنها را با هم سازگار کنند.

در این مقاله با هویت غیرمتمرکز، شناسه های غیرمتمرکز، شبکه سرامیک و نحوه ساخت پروفایل هویت غیرمتمرکز با اتریوم در شبکه های سرامیکی آشنا خواهید شد.

در اینجا چیزی است که ما پوشش خواهیم داد:

هویت غیرمتمرکز چیست؟

شناسه های غیرمتمرکز چیست؟

شبکه داده سرامیکی چیست؟

چرا شبکه سرامیک؟

چگونه یک نمایه هویت غیرمتمرکز با Next.js بسازیم

پیش نیازها

راه اندازی و نصب پروژه

TailwindCSS را در Next.js نصب کنید

احراز هویت کاربران

ایجاد/به روز رسانی نمایه کاربری

نحوه تست اپلیکیشن

نتیجه

منابع

هویت غیرمتمرکز چیست؟

هویت غیرمتمرکز یک مفهوم شناسایی دیجیتالی است که در آن افراد، شرکت‌ها و اقلام مسئول داده‌های خود هستند و می‌توانند آن‌ها را به‌طور انتخابی بدون تکیه بر یک مرجع متمرکز به اشتراک بگذارند.

این امر با استفاده از فناوری های غیرمتمرکز مانند بلاک چین امکان پذیر شده است. اینها به افراد کنترل و مالکیت اطلاعات مرتبط با هویت آنها را می دهد تا اینکه آنها را در یک سرور مرکزی ذخیره یا توسط شخص ثالث مدیریت شود.

هویت غیرمتمرکز یک هویت مستقل و مستقل است که امکان تبادل اطلاعات قابل اعتماد را فراهم می کند.

کیف‌پول‌های دیجیتال مبتنی بر بلاک چین، مانند آن‌هایی که برای ذخیره و مدیریت ارزهای دیجیتال استفاده می‌شوند، به عنوان یک تصویر عملی از شناسایی غیرمتمرکز عمل می‌کنند. کاربران این کیف پول‌ها کلیدهای خصوصی را کنترل می‌کنند که دسترسی آنها به پولشان را فراهم می‌کند و می‌توانند کلیدهای عمومی خود را در اختیار دیگران قرار دهند تا از آنها پرداخت کنند.

کاربرانی که کلیدهای خصوصی خود را مدیریت می‌کنند، می‌توانند بدون اتکا به یک مرجع مرکزی، مانند بانک، تراکنش‌ها را با دیگران انجام دهند و نگهبانی پول خود را حفظ کنند.

شناسه های غیرمتمرکز چیست؟

شناسه های غیرمتمرکز (DID) توسط افراد صادر، نگهداری و کنترل می شوند. از آنجایی که آنها در شبکه های همتا به همتا یا دفتر کل توزیع شده (بلاک چین) نگهداری می شوند، در سطح جهانی منحصر به فرد هستند، بسیار در دسترس هستند و از نظر رمزنگاری قابل تأیید هستند.

شناسه های غیرمتمرکز می توانند با افراد، گروه ها یا نهادهای دولتی مرتبط باشند.

DIDها جزء حیاتی اکوسیستم هویت غیرمتمرکز در حال توسعه هستند. آنها به گونه ای طراحی شده اند که فرآیندی یکنواخت برای توسعه، حفظ و مبادله هویت های دیجیتالی غیروابسته به یک شرکت یا قطعه فناوری ارائه دهند.

این بدان معناست که یک DID می تواند توسط شخص یا نهادی که به آن تعلق دارد نگهداری و کنترل شود و در سیستم ها و برنامه های مختلف مورد استفاده قرار گیرد.

در سال‌های اخیر، پلتفرم‌های قرارداد هوشمند مانند اتریوم کاربرد برنامه‌های غیرمتمرکز (dApps) را نشان داده‌اند که می‌توانند مانند بلوک‌ها برای ایجاد برنامه‌های کاربردی جدید جمع شوند. این امر به ویژه در توکن هایی که بر روی یکدیگر ساخته می شوند، در پروتکل های DeFi که از یکدیگر استفاده می کنند و غیره مشهود است.

به لطف سرامیک، داده های موجود در اینترنت اکنون می توانند از همان نوع ترکیب پذیری برخوردار باشند. هر نوع داده ای، از جمله نمایه ها، ارتباطات اجتماعی، پست های وبلاگ، هویت، شهرت و غیره می تواند گنجانده شود. در بخش زیر با شبکه سرامیک بیشتر آشنا خواهید شد.

شبکه سرامیک چیست؟

Ceramic یک پروتکل عمومی، بدون مجوز و منبع باز است که محاسبات، انتقال حالت و اجماع را برای تمام ساختارهای داده در وب غیرمتمرکز ارائه می دهد.

با کمک پردازش جریانی ارائه شده توسط Ceramic، توسعه دهندگان می توانند بدون استفاده از سرورهای پایگاه داده غیرقابل اعتماد، برنامه هایی قوی، ایمن، غیرقابل اعتماد و مقاوم در برابر سانسور را با استفاده از اطلاعات پویا بسازند.

سرامیک تمام محتوا را در اسناد هوشمند ذخیره می کند، که فقط لاگ های IPFS ضمیمه هستند. قبل از اینکه برای اجماع در یک بلاک چین لنگر بیاندازید، هر تعهد با یک شناسایی غیرمتمرکز (DID) تأیید می شود.

همه مقالات در سرامیک آشکارا قابل کشف هستند و می توان آنها را توسط اسناد دیگر ارجاع داد یا توسط هر کاربر شبکه دیگری پرس و جو کرد زیرا سیستم کاملاً نظیر به نظیر است.

چرا شبکه سرامیک؟

قابلیت همکاری داده ها یکی از مزایای کلیدی شبکه سرامیک است. این پلتفرم دارای یک طرح داده منعطف و مدولار است که به اشتراک گذاری و ترکیب غیرمتمرکز و قابل تعامل و ترکیب انواع مختلف داده ها را امکان پذیر می کند.

توسعه دهندگان اکنون زمان آسان تری برای ایجاد راه حل های شناسایی غیرمتمرکز دارند که می توانند با برنامه ها و سیستم های دیگر ادغام شوند.

زیرساخت شبکه سرامیک مقیاس پذیر، مقاوم در برابر خطا، غیرمتمرکز و بسیار در دسترس است. این به توسعه دهندگان این امکان را می دهد تا سیستم های هویت غیرمتمرکز قوی را در دسترس کاربران در همه جا ایجاد کنند.

Ceramic Network همچنین مجموعه‌ای از ابزارها و کتابخانه‌های توسعه‌دهنده را فراهم می‌کند که ایجاد اپلیکیشن‌ها و سرویس‌های هویت غیرمتمرکز را ساده می‌کند. این ابزارها شامل SDK ها، APIها، راهنمای توسعه دهندگان و اکوسیستم در حال گسترش ابزارها و کتابخانه های منبع باز است.

اکنون که تئوری های پشت هویت غیرمتمرکز را آموخته اید، بیایید یک شیرجه عمیق عملی انجام دهیم و دستان خود را کثیف کنیم.

چگونه یک نمایه هویت غیرمتمرکز با Next.js بسازیم

پیش نیازها

برای گذراندن این آموزش، به تجربه ای با جاوا اسکریپت و React.js نیاز دارید. تجربه با Next.js الزامی نیست، اما داشتن آن خوب است.

مطمئن شوید که Node.js یا npm را روی رایانه خود نصب کرده باشید. اگر ندارید، اینجا را کلیک کنید.

همچنین، داشتن درک اولیه از فناوری بلاک چین و مفاهیم Web3 بسیار مفید خواهد بود.

راه اندازی و نصب پروژه

به ترمینال بروید و cd به هر دایرکتوری دلخواه خود وارد کنید. سپس دستورات زیر را اجرا کنید:

 mkdir decentralized-identity-project cd decentralized-identity-project npx [email protected] .

گزینه های زیر را بپذیرید:

بسته های @self.id/react و @self.id/web را با استفاده از قطعه کد زیر نصب کنید:

 npm install @self.id/web @self.id/react

سپس برنامه را با استفاده از دستور زیر راه اندازی کنید:

 npm run dev

شما باید چیزی شبیه به آنچه در زیر نشان داده شده است داشته باشید: طرح دیگ بخار پیش فرض برای Next.js 13.

TailwindCSS را در Next.js نصب کنید

در این بخش، Tailwind CSS را در پروژه Next.js راه اندازی خواهید کرد. tailwindcss و وابستگی‌های همتای آن را از طریق npm نصب کنید و سپس دستور init را اجرا کنید تا هم tailwind.config.js و هم postcss.config.js ایجاد شود.

 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

به فایل tailwind.config.js بروید و مسیرها را با قطعه کد زیر به فایل های قالب خود اضافه کنید.

 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

تمام سبک های CSS را در globals.css حذف کنید. دستورات @tailwind را برای هر یک از لایه های Tailwind به فایل globals.css خود اضافه کنید.

 @tailwind base; @tailwind components; @tailwind utilities;

کامپوننت ارائه دهنده را پیکربندی کنید

مؤلفه Provider باید در بالای درخت برنامه قرار گیرد تا از قلاب هایی که در زیر توضیح داده شده است استفاده شود. می توانید از آن برای ارائه یک حالت اولیه و همچنین یک پیکربندی خاص برای مشتریان و درخواست های Self.ID استفاده کنید.

فایل _app.js را در زیر پوشه pages با قطعه کد زیر به روز کنید:

 // Import the Provider component from the "@self.id/react" library. import { Provider } from "@self.id/react"; // Import the "globals.css" file from the "@/styles" directory. import "@/styles/globals.css"; // Define the App component as a default export. export default function App({ Component, pageProps }) { // Render the Provider component, which provides authentication and authorization functionality to the application. // Pass a client prop to the Provider component, which configures the Ceramic testnet with the "testnet-clay" value. // Render the Component with its props inside the Provider component, which allows the application to access the authentication and authorization context. return ( <Provider client={{ ceramic: "testnet-clay" }}> <Component {...pageProps} /> </Provider> ); }

در قطعه کد بالا، ما:

یک مؤلفه ارائه‌دهنده زمینه و سبک‌های جهانی CSS را وارد کرد و سپس یک مؤلفه App را تعریف کرد که کل برنامه را با ارائه‌دهنده زمینه می‌پیچد.

ارائه‌دهنده زمینه را با یک کلاینت Ceramic testnet پیکربندی کرد، که به برنامه اجازه می‌دهد به عملکرد احراز هویت و مجوز دسترسی پیدا کند.

در نهایت، Component با لوازم خود در داخل ارائه‌دهنده زمینه ارائه می‌شود و به برنامه اجازه می‌دهد به زمینه احراز هویت و مجوز دسترسی داشته باشد.

Layout را بسازید

سپس به فایل index.js زیر پوشه pages بروید و آن را با کد زیر به روز کنید:

 // Import the Head component from the "next/head" module. import Head from "next/head"; // Import the useViewerConnection and useViewerRecord hooks from the "@self.id/react" library. import { useViewerConnection, useViewerRecord } from "@self.id/react"; // Import the EthereumAuthProvider component from the "@self.id/web" library. import { EthereumAuthProvider } from "@self.id/web"; // Import the useState hook from the "react" module. import { useEffect, useState } from "react"; export default function Home() { return ( <> <Head> <title> Decentralized Identity: Build a Profile with NextJs, Ethereum & Ceramic Network </title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className="min-h-screen bg-gray-200"> <div className="bg-gray-600 py-4 px-4 sm:px-6 lg:px-8 lg:py-6 shadow-lg text-white"> <div className="container mx-auto px-6 md:px-0"> <h1 className="text-2xl font-bold text-white text-center"> Decentralized Identity: Build a Profile with NextJs, Ethereum & Ceramic Network </h1> </div> </div> <div className="flex items-center justify-center pt-20 font-sans overflow-hidden"> <div className="max-w-md w-full mx-auto"> <div className="bg-white p-10 rounded-lg shadow-lg"> <form> <div className="mb-6"> <label className="block text-gray-700 font-bold mb-2" htmlFor="name" > Name </label> <input className="border border-gray-300 p-2 w-full rounded-lg" type="text" name="name" id="name" placeholder="Your name" /> </div> <div className="mb-6"> <label className="block text-gray-700 font-bold mb-2" htmlFor="bio" > Bio </label> <textarea className="border border-gray-300 p-2 w-full rounded-lg" name="bio" id="bio" rows="5" placeholder="Write something about yourself" ></textarea> </div> <div className="mb-6"> <label className="block text-gray-700 font-bold mb-2" htmlFor="username" > Username </label> <input className="border border-gray-300 p-2 w-full rounded-lg" type="text" name="username" id="username" placeholder="Your username" /> </div> <div className="flex items-center justify-between"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit" > Update Profile </button> <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" type="button" > Connect Wallet </button> </div> </form> </div> </div> </div> </main> </> ); }

برای شروع برنامه، دستور زیر را اجرا کنید و در مرورگر خود به localhost:3000 بروید. شما باید چیزی شبیه به آنچه در زیر نشان داده شده است داشته باشید:

نحوه احراز هویت کاربران

در این بخش، احراز هویت کاربر را پیاده سازی می کنید تا به کاربران اجازه دهید کیف پول خود را به هم متصل کرده و با برنامه تعامل داشته باشند.

index.js با کد زیر به روز کنید:

 //.. export default function Home() { // State variables for connection, connect function, and disconnect function const [connection, connect, disconnect] = useViewerConnection(); const [isWindow, setIsWindow] = useState(null); // State variable for viewer's basic profile data const record = useViewerRecord("basicProfile"); // Function to create EthereumAuthProvider using window.ethereum provider async function createAuthProvider() { const addresses = await window.ethereum.request({ method: "eth_requestAccounts", }); return new EthereumAuthProvider(window.ethereum, addresses[0]); } // Function to connect to viewer's account using created authProvider async function connectAccount() { const authProvider = await createAuthProvider(); await connect(authProvider); } // Rendered JSX code return ( <> {/* ... */} <div className="flex items-center justify-between"> {/* ... */} {/* Conditionally render a button to connect/disconnect user */} {connection.status === "connected" ? ( <button className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded" type="button" onClick={() => disconnect()} > Disconnect </button> ) : isWindow && "ethereum" in window ? ( <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" type="button" disabled={connection.status === "connecting" || !record} onClick={() => { connectAccount(); }} > Connect Wallet </button> ) : ( <p className="text-red-500 text-sm italic mt-2 text-center w-full"> An injected Ethereum provider such as{" "} <a href="https://metamask.io/">MetaMask</a> is needed to authenticate. </p> )} </div> </> ) }

در قطعه کد بالا،

قلاب useViewerConnection برای تنظیم یک متغیر حالت برای وضعیت اتصال کاربر، اتصال و قطع ارتباط استفاده می شود.

isWindow برای تنظیم حالت اولیه پنجره برای جلوگیری از خطای React hydration

قلاب useViewerRecord برای بازیابی اطلاعات اولیه پروفایل کاربر استفاده می شود.

تابع createAuthProvider یک شی EthereumAuthProvider را با استفاده از ارائه دهنده window.ethereum ایجاد می کند.

تابع connectAccount createAuthProvider را فراخوانی می کند و با استفاده از connect(authProvider) به حساب کاربر متصل می شود.

کد JSX به صورت مشروط دکمه ای را بر اساس وضعیت اتصال کاربر و در دسترس بودن یک ارائه دهنده ethereum در شی window ارائه می کند.

اگر کاربر قبلاً متصل باشد، دکمه آن را قادر می‌سازد تا اتصال را قطع کند. اگر کاربر هنوز متصل نشده باشد و ارائه‌دهنده ethereum در دسترس باشد، دکمه اتصال او را قادر می‌سازد. اما اگر کاربر متصل نباشد و هیچ ارائه‌دهنده ethereum در دسترس نباشد، پیامی به کاربر نشان داده می‌شود که یک ارائه‌دهنده اتریوم تزریق شده مانند MetaMask برای احراز هویت لازم است.

برای آزمایش عملکرد احراز هویت، باید چیزی شبیه به آنچه در زیر نشان داده شده است داشته باشید:

نحوه ایجاد یا به روز رسانی پروفایل کاربری

در بخش قبل، نحوه احراز هویت با موفقیت کاربران را یاد گرفتید. در مرحله بعد، عملکردی را برای ایجاد و به روز رسانی یک کاربر تأیید شده با قطعه کد زیر پیاده سازی می کنید:

pages/index.js

 //... export default function Home() { // Use the useState hook to create state variables and functions to update them const [name, setName] = useState(""); const [bio, setBio] = useState(""); const [username, setUsername] = useState(""); //... // Define an asynchronous function called updateProfile to update the profile information async function updateProfile() { // If any of the required fields are empty, return early and do not update if (!name || !bio || !username) { return; } // Use the merge method to update the record with the new information await record.merge({ name, bio, username, }); } // Render the component's UI return ( <> {/* ... */} <div className="flex items-center justify-center pt-20 font-sans overflow-hidden"> <div className="max-w-md w-full mx-auto"> <div className="bg-white p-10 rounded-lg shadow-lg"> <form> {/* ... */} </form> </div> {connection.status === "connected" && record && record.content ? ( <div className="flex flex-col items-center mt-8"> <h2 className="text-3xl font-bold mb-6 text-gray-900"> Profile Information </h2> <div className="w-full max-w-md bg-white p-8 rounded-lg shadow-lg"> <p className="mb-4"> <span className="font-bold text-gray-700 mr-2 text-lg"> Name: </span>{" "} <span id="nameOutput" className="text-lg"> {record.content.name || "No name set"} </span> </p> <p className="mb-4"> <span className="font-bold text-gray-700 mr-2 text-lg"> Bio: </span>{" "} <span id="bioOutput" className="text-lg"> {record.content.bio || "No bio set"} </span> </p> <p> <span className="font-bold text-gray-700 mr-2 text-lg"> Username: </span>{" "} <span id="usernameOutput" className="text-lg"> {record.content.username || "No username set"} </span> </p> </div> </div> ) : ( <div className="mt-8"> <div className="bg-white p-8 rounded-lg shadow-lg"> <p>No profile found.</p> </div> </div> )} </div> </div> </> ) }

در کد بالا،

این مؤلفه از قلاب useState برای مدیریت وضعیت سه متغیر استفاده می کند: name ، bio و username .

یک تابع همگام به نام updateProfile وجود دارد که وظیفه ادغام وضعیت فعلی متغیرها را در یک رکورد دارد.

اگر هر یک از متغیرها خالی باشد، تابع updateProfile بدون به روز رسانی رکورد برمی گردد.

سه عبارت شرطی وجود دارد که یک UI متفاوت را بر اساس یافتن یا عدم یافتن یک رکورد ارائه می دهد.

اولین دستور شرطی تحلیل می کند که آیا رکورد هنوز در حال بارگیری است یا خیر، و در صورت بارگیری، پیام Loading... را نمایش می دهد.

دستور شرطی دوم تحلیل می کند که آیا محتوای رکوردی وجود ندارد و وضعیت اتصال متصل است یا خیر. اگر این درست باشد، No profile found. پیام

سومین عبارت شرطی تحلیل می کند که آیا محتوای رکورد وجود دارد یا خیر. اگر این کار را کرد، اطلاعات نمایه را نشان می دهد که شامل name کاربر، bio و username است.

شما تقریباً آنجا هستید. در تگ فرم، name ، bio و فیلد ورودی username را با کد زیر به روز کنید:

 <div className="mb-6"> <label className="block text-gray-700 font-bold mb-2" htmlFor="name" > Name </label> <input //... onChange={(e) => { setName(e.target.value); }} /> </div> <div className="mb-6"> <label className="block text-gray-700 font-bold mb-2" htmlFor="bio" > Bio </label> <textarea //... onChange={(e) => { setBio(e.target.value); }} ></textarea> </div> <div className="mb-6"> <label className="block text-gray-700 font-bold mb-2" htmlFor="username" > Username </label> <input //... onChange={(e) => { setUsername(e.target.value); }} /> </div>

در قطعه کد بالا، setName ، setBio ، و setUsername توابعی هستند که توسط قلاب useState ارائه شده اند که وضعیت name ، bio یا username به روز می کنند.

بعد، دکمه Update Profile .

 //... <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit" disabled={!record.isMutable || record.isMutating} onClick={() => updateProfile()} > {record.isMutating ? "Updating..." : "Update Profile"} </button> //..

در قطعه کد بالا، زمانی که رکورد قابل تغییر نباشد یا در حال تغییر باشد، دکمه غیرفعال می شود.

هنگامی که دکمه کلیک می شود، تابع updateProfile را فرا می خواند که وظیفه به روز رسانی اطلاعات پروفایل کاربر را بر عهده دارد. در صورت جهش رکورد، دکمه Updating... . در غیر این صورت، Update Profile نمایش می‌دهد.

می توانید برنامه را مشابه آنچه در زیر نشان داده شده است آزمایش کنید.

لطفا کد کامل موجود در مخزن GitHub را اینجا بیابید.

نتیجه

در این پست با هویت غیرمتمرکز، شناسه‌های غیرمتمرکز، شبکه‌های سرامیکی، چرایی مفید بودن شبکه سرامیکی و نحوه ایجاد نمایه هویت غیرمتمرکز با اتریوم در شبکه‌های سرامیکی آشنا می‌شوید.

منابع

من دوست دارم با شما در توییتر ارتباط برقرار کنم | لینکدین | گیت هاب | نمونه کارها

شما را در مقاله بعدی من می بینم. مراقب باش!