ساده سازی احراز هویت در برنامه های Next.js با Clerk

معرفی

ایجاد سیستم های احراز هویت ایمن و کاربر پسند برای برنامه های کاربردی وب مدرن بسیار مهم است. به عنوان یک توسعه دهنده، هدف شما ارائه یک تجربه یکپارچه برای کاربران و در عین حال ایمن نگه داشتن داده های آنها است. اینجاست که Clerk وارد می‌شود. Clerk یک پلتفرم قدرتمند احراز هویت و مدیریت کاربر است که برای ساده‌سازی احراز هویت در برنامه‌های Next.js و Reactjs طراحی شده است و یک تجربه توسعه‌دهنده استثنایی و امنیت کاربر قوی را ارائه می‌دهد.

در این راهنمای گام به گام، ما شما را با استفاده از Clerk و Next.js برای پیاده سازی احراز هویت در برنامه های وب خود راهنمایی می کنیم. Clerk یک تجربه توسعه دهنده یکپارچه و امنیت قوی کاربر را فراهم می کند. همراه با تطبیق پذیری و کارایی Next.js، می توانید به راحتی سیستم های احراز هویت ایمن و کاربرپسند ایجاد کنید.

با دنبال کردن مراحل ذکر شده در این راهنما، Clerk را در برنامه Next.js خود ادغام می‌کنید و از ویژگی‌های آن برای بهبود ورود کاربر، ساده‌سازی جریان‌های احراز هویت و تضمین امنیت داده‌ها استفاده می‌کنید.

بیا شروع کنیم!

پیش نیازها

برای دنبال کردن این آموزش، شما نیاز دارید:

1. دانش اولیه React و Next.js.
2. Node.js و npm (Node Package Manager) روی دستگاه شما نصب شده است.
3. یک حساب کارمند (شما می توانید به صورت رایگان در https://www.clerk.com ثبت نام کنید.

راه اندازی برنامه Next.js خود

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

npx create-next-app my-clerk-app
cd my-clerk-app

پیکربندی یک برنامه Clerk جدید برای احراز هویت

برای شروع استفاده از Clerk، اولین قدم ایجاد یک حساب کاربری Clerk است. می توانید این کار را با مراجعه به clerk.dev و ثبت نام برای یک حساب کاربری رایگان انجام دهید. پس از ورود به سیستم، از شما خواسته می شود که یک برنامه جدید در حساب خود ایجاد کنید. این برنامه به عنوان نقطه شروع شما برای کاوش و استفاده از ویژگی ها و قابلیت های مختلف ارائه شده توسط Clerk همانطور که در بالا مشخص شد، عمل می کند.

وقتی روی آن کلیک کردید Add application پس از ورود به سیستم، نامی به برنامه خود بدهید و همه روش‌های «احراز هویت اجتماعی» را که می‌خواهید کاربرانتان از آن استفاده کنند، انتخاب کنید.

نصب Clerk در برنامه Next.js

Clerk یک کتابخانه Nextjs با کاربری آسان برای ادغام با سیستم احراز هویت خود فراهم می کند. به دایرکتوری پروژه Next.js خود بروید و دستور زیر را برای نصب Clerk اجرا کنید:

npm install @clerk/nextjs

پیکربندی کارمند در برنامه Next.js شما

ایجاد یک .env.local فایل را در ریشه پروژه Next.js خود قرار دهید و خود را در آن قرار دهید CLERK_PUBLISHABLE_KEY کلید و CLERK_SECRET_KEY به عنوان متغیرهای محیطی می توانید این مقادیر را از داشبورد کارمند خود در زیر دریافت کنید API keys بخش همانطور که در بالا مشخص شد.

// clerk environment variables

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="<Your Publishable Key>"
CLERK_SECRET_KEY="<Your Clerk Secret Key>"

نصب ClerkProvider

در این مرحله ما را سوار می کنیم ClerkProvider کامپوننت برای قرار دادن طرح اصلی برنامه Next.js با زمینه ClerkProvider. این به برنامه شما اجازه می دهد تا به روش های احراز هویت کارمند و داده های کاربر دسترسی داشته باشد.

// app/layout.jsx
import  {  ClerkProvider  }  from  '@clerk/nextjs';

const Layout = ({ children }) => {
  return (
    <ClerkProvider>
      {/* Your layout code goes here */}
      {children}
    </ClerkProvider>
  );
};

export default Layout;

حفاظت از مسیرهای برنامه

اکنون که Clerk نصب و در برنامه شما نصب شده است، وقت آن است که تصمیم بگیرید کدام صفحات عمومی هستند و کدام یک نیاز به احراز هویت دارند. ما این کار را با قرار دادن a انجام می دهیم middleware.js فایل در ریشه ساختار پروژه و اعلام مسیرهای عمومی و خصوصی. در مورد ما، ما فقط می خواهیم صفحه اصلی عمومی باشد و بقیه صفحه تا زمانی که کاربر به برنامه وارد نشود غیرقابل دسترسی باشد. این کار با کد زیر امکان پذیر است:

// Protects access from all the other pages except the home page

import { authMiddleware } from '@clerk/nextjs';

export default authMiddleware({
  publicRoutes: ["https://dev.to/"]
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', "https://dev.to/", '/(api|trpc)(.*)'],
};

اجزای SignIn و SignUp

Clerk مجموعه ای از اجزای آماده را ارائه می دهد که به شما امکان می دهد ورود به سیستم، ثبت نام و سایر ویژگی های مدیریت کاربر را در برنامه Next.js خود ادغام کنید. برای استفاده از این ویژگی ها می توانید از <SignIn /> و <SignUp /> اجزا در کنار مسیر اختیاری catch-all Next.js.

برای پیاده سازی این، در پوشه “app” پروژه خود، دو دایرکتوری جدید به نام های “sign-up” و “sign-in” ایجاد کنید. در داخل هر دایرکتوری، کد مربوطه را برای عملکردهای ثبت نام و ورود به سیستم وارد کنید.

امضا کردن

// app/sign-in/pages.js

import { SignIn } from "@clerk/nextjs";

const signIn = () => {
  return (
    <div>
      <SignIn />
    </div>
  );
};

export default signIn;

ثبت نام

// app/sign-up/pages.js

import { SignUp } from "@clerk/nextjs";

const signUp = () => {
  return (
    <div>
      <SignUp />
    </div>
  );
};

export default signUp;

با این در محل، هنگامی که از مسیر بازدید می کنید http://localhost:3000/sign-in شما باید بتوانید صفحه ورود به سیستم کارمندان را همانطور که در زیر نشان داده شده است بارگیری کنید:

راه اندازی SignedIn، SignedOut و نمایه کاربر

Clerk مجموعه ای از مؤلفه ها را به ما ارائه می دهد که اهداف خاصی را در مدیریت احراز هویت کاربر در برنامه ما انجام می دهند. این مؤلفه ها عبارتند از «SignedIn»، «SignedOut» و «RedirectToSignIn». با استفاده از این مؤلفه‌ها، می‌توانیم به راحتی سایر مؤلفه‌ها را با قابلیت احراز هویت لازم بپوشانیم. این بدان معنی است که ما می توانیم به راحتی رفتار برنامه خود را بر اساس ورود یا خروج کاربر کنترل کنیم. علاوه بر این، ما این توانایی را داریم که هر زمان که لازم باشد، یک تغییر مسیر به صفحه ورود به سیستم را راه اندازی کنیم. این مولفه‌ها توانایی ما را برای مدیریت یکپارچه احراز هویت کاربر در برنامه‌مان بسیار افزایش می‌دهند.

برای نهایی کردن برنامه باید نشان دهیم SignInButton، UserButton و SignedOut روی برنامه های کاربردی Navbar جزء. به مؤلفه برنامه‌های کاربردی خود بروید و مؤلفه‌ها و قلاب‌های مختلف را از کتابخانه «@clerk/nextjs» وارد می‌کند که در زیر مشخص شده است:

import  {SignedIn, SignedOut,SignInButton,UserButton,}  from  '@clerk/nextjs';

برای درک نحوه عملکرد هر مؤلفه برجسته شده در بالا، برای مطالعه بیشتر به اسناد Clerks مراجعه کنید.

پس از وارد کردن اجزای بالا در کامپوننت نوار ناوبری، wrap کنید UserButton جزء با SignedIn جزء. این نشان می دهد که UserButton فقط باید زمانی ارائه شود که کاربر وارد سیستم شده باشد.

مؤلفه SignedOut، the را می پیچد SignInButton جزء با SignedOut جزء. این نشان می دهد که SignInButton فقط باید زمانی ارائه شود که کاربر از سیستم خارج شده باشد، همانطور که در بلوک کد زیر نشان داده شده است:

const Navbar = () => {
  return (
    <nav>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <SignInButton mode="modal">
          <button className="rounded border border-gray-400 px-3 py-0.5">
            Sign in
          </button>
        </SignInButton>
      </SignedOut>
    </nav>
  );
};

export default Navbar;

با این کار باید بتوانید یک برنامه کاملاً تأیید شده همانطور که در زیر مشخص شده است داشته باشید:

نتیجه

در نتیجه، Clerk به دلیل یکپارچگی بی دردسر، گزینه ایده آلی برای احراز هویت و مدیریت هویت در برنامه های Next.js و React است. کتابخانه‌های اختصاصی Clerk برای Next.js و React، همراه با APIهای مستند آن، فرآیند یکپارچه‌سازی را ساده و در زمان صرفه‌جویی می‌کنند. توسعه دهندگان می توانند به سرعت ویژگی های احراز هویت مانند ورود، ثبت نام، و مدیریت کاربر را تنظیم کنند، از اجزای کاربر پسند Clerk و API قدرتمند استفاده کنند. علاوه بر این، Clerk به طور یکپارچه با پشته های برنامه های مختلف ادغام می شود و سازگاری را بدون تغییرات قابل توجه تضمین می کند.

با انتخاب Clerk، توسعه‌دهندگان می‌توانند به جای سرمایه‌گذاری منابع در سیستم‌های احراز هویت پیچیده، بر ساخت ویژگی‌های اصلی برنامه تمرکز کنند. اقدامات امنیتی قوی Clerk، از جمله احراز هویت چند عاملی و ورود بدون رمز عبور، امنیت برنامه را بدون پیچیدگی های اضافی پیاده سازی افزایش می دهد. Clerk با ادغام آسان خود، توسعه دهندگان را قادر می سازد تا تجارب احراز هویت یکپارچه و ایمن را در برنامه های Next.js و React ایجاد کنند و از عملکرد کارآمد اطمینان حاصل کنند.

پایگاه کد نهایی