@clerk/clerk-js کتابخانه جاوااسکریپت Clerk برای سمت مرورگره. با اون می تونی ورود، ثبت نام، نشست کاربر و صفحه مدیریت حساب رو توی صفحه وب راه بندازی، به شرطی که از سرویس احراز هویت Clerk استفاده کنی. بسته های Clerk برای فریم ورک هایی مثل ری اکت هم معمولا روی همین کتابخانه تکیه دارن.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
@clerk/clerk-js یه بسته npm از شرکت Clerk هست که سایت یا اپ جاوااسکریپتی تو رو به سرویس احراز هویت Clerk وصل می کنه. ساختن سیستم ورود از صفر دردسر زیادی داره: نگه داری امن رمزها، مدیریت نشست، ایمیل تایید، ورود با حساب های اجتماعی و کلی جزئیات دیگه. Clerk این کارها رو به شکل سرویس انجام می ده و clerk-js همون تکه ایه که توی مرورگر کاربر اجرا می شه و با اون سرویس حرف می زنه.
با این کتابخانه یه شیء Clerk می سازی و بارش می کنی. بعدش می تونی بفهمی کاربر وارد شده یا نه، اطلاعات کاربر و نشست فعلی رو بخونی و خروج رو انجام بدی. چند کامپوننت آماده هم برای رابط کاربری داره، مثل فرم ورود، فرم ثبت نام، پروفایل کاربر و دکمه منوی کاربر. هر کدوم رو توی یه عنصر HTML سوار می کنی و لازم نیست فرم و منطقش رو خودت بنویسی. ظاهرشون هم تا حدی قابل تنظیمه.
این بسته به درد چه پروژه هایی می خوره؟ اپ های تحت وب، پنل های مدیریتی، سایت های عضویت دار و هر پروژه فرانت اندی که نمی خوای سیستم کاربری رو خودت نگه داری کنی. ولی اگه یه سایت وردپرسی ساده داری و فقط یه فرم ورود می خوای، انتخاب مناسبی نیست. clerk-js افزونه وردپرس نیست و کاربران وردپرس رو خودش با Clerk یکی نمی کنه. اگه بخوای این دو رو به هم وصل کنی، باید کد اختصاصی بنویسی و تکلیف جدول کاربران وردپرس رو هم روشن کنی.
یه نکته مهم برای پروژه های ایرانی: این بسته فقط سمت کلاینته و برای کار کردن باید به خود سرویس Clerk وصل بشه. دسترسی از ایران به سرویس های خارجی ممکنه محدود یا ناپایدار باشه. پس قبل از اینکه پروژه رو روی Clerk بنا کنی، حتما از شبکه واقعی کاربرهات تستش کن. داشتن فایل های کتابخانه روی هاست داخلی مشکل دسترسی به سرویس رو حل نمی کنه.
اگه با ری اکت یا نکست کار می کنی، معمولا بسته مخصوص همون فریم ورک رو نصب می کنی و clerk-js زیرش کار می کنه. استفاده مستقیم از این بسته بیشتر به درد پروژه های جاوااسکریپت ساده می خوره یا وقتی که کنترل بیشتری می خوای. نسخه های رسمی و بدون تغییر @clerk/clerk-js توی مخزن دانلود ما هم در دسترسه، برای روزهایی که npm یا اینترنت بین الملل درست جواب نمی ده.
راهنمای استفاده
قبل از هر چیز توی Clerk یه اپلیکیشن بساز و کلید عمومی (Publishable Key) رو ازش بردار. کلید مخفی (Secret Key) فقط مال سمت سرور هست و نباید هیچ وقت توی کد صفحه بیاد.
فایل کتابخانه رو با کد آماده پایین همین صفحه به صفحه اضافه کن. اگه پروژه ات با npm ساخته می شه، بسته رو با همون روش همیشگی نصب و ایمپورت کن.
یه نمونه از Clerk با کلید عمومی خودت بساز.
متد load رو صدا بزن و صبر کن بارگذاری تموم بشه.
بعدش وضعیت کاربر رو چک کن. اگه وارد نشده بود، فرم ورود رو با mountSignIn توی یه عنصر خالی صفحه نشون بده.
اگه وارد شده بود، mountUserButton رو برای منوی حساب و خروج به کار ببر.
توی تنظیمات داشبورد Clerk دامنه سایتت رو درست وارد کن، وگرنه ورود روی دامنه ات کار نمی کنه.
اول روی محیط آزمایشی (Development) تست کن و بعد برو سراغ دامنه اصلی. اگه ورود جواب نداد، مطمئن شو کلید عمومی مال همون محیطی هست که توی داشبورد انتخاب کردی. اگه هم خطایی دیدی، اول کنسول مرورگر و تب Network رو نگاه کن تا معلوم بشه درخواست ها به سرویس می رسن یا نه.
نشانی مستقیم فایل اصلی 4.68.6https://mirror.wbweb.ir/npm/@clerk/clerk-js@4.68.6/dist/clerk.browser.js
پرسش‌های رایج
یه کتابخانه جاوااسکریپت برای مرورگره که صفحه تو رو به سرویس احراز هویت Clerk وصل می کنه. با اون ورود، ثبت نام، نشست کاربر و مدیریت حساب رو بدون نوشتن سیستم کاربری از صفر پیاده می کنی و می تونی از کامپوننت های آماده اش هم استفاده کنی.
نه. clerk-js فقط بخش کلاینته و برای کار کردن به یه اپلیکیشن ساخته شده توی Clerk و کلید عمومی اون نیاز داره. فایل کتابخانه به تنهایی سیستم ورود نمی سازه و بدون اون سرویس عملا کاری نمی کنه. پلن ها و محدودیت هاش رو از سایت خود Clerk ببین.
به شکل افزونه آماده نه. از نظر فنی می تونی توی پوسته یا یه صفحه اختصاصی لودش کنی، ولی وصل کردن کاربرهای Clerk به کاربرهای وردپرس خودش کار جداگانه و کدنویسی می خواد. مثلا باید تصمیم بگیری هویت اصلی کاربر کدوم طرفه. برای یه ورود ساده، خود وردپرس معمولا کافیه.
معمولا لازم نیست. برای ری اکت و نکست، Clerk بسته های مخصوص خودش رو داره و کار با اون ها راحت تره، چون بیشتر کارهای سمت مرورگر رو خودشون انجام می دن. clerk-js بیشتر وقتی به کار میاد که پروژه ات جاوااسکریپت ساده باشه یا کنترل مستقیم تری روی رفتار کتابخانه بخوای.
ممکنه داشته باشه. خود کتابخانه یه فایل جاوااسکریپته، ولی برای ورود کاربر باید با سرویس Clerk ارتباط بگیره و دسترسی به سرویس های خارجی از ایران همیشه پایدار نیست. قبل از انتخاب، روی اینترنت واقعی کاربرهات تست بگیر. اگه نتیجه خوب نبود، قبل از شروع پروژه سراغ راه حل دیگه ای برو.
prebid-universal-creative یه بسته جاوااسکریپتیه که تبلیغ برنده رو توی سایت هایی با Prebid و هدر بیدینگ نشون می ده. این کد توی کریتیو اد سرور قرار می گیره و بعد از تموم شدن مزایده، تبلیغ رو توی جایگاه نشون می ده. مجوزش Apache هست و نسخه رسمی ش توی مخزن ما موجوده.
workbox-cdn یه بسته آماده از کتابخونه Workbox گوگله که بدون ابزار build و فقط با بارگذاری یه اسکریپت می تونی توی سایتت استفاده کنی. با Workbox سرویس ورکر رو راحت تر می نویسی، کش و حالت آفلاین رو مدیریت می کنی و بازدیدهای بعدی سایتت سریع تر باز می شن.
mathjax یه کتابخانه متن باز جاوااسکریپته که فرمول های ریاضی رو توی مرورگر نمایش می ده. فرمولی که با LaTeX، MathML یا AsciiMath نوشتی رو به متن تیز، قابل انتخاب و قابل دسترس تبدیل می کنه، پس لازم نیست از فرمول ها عکس بگیری. مجوزش Apache هست و بسته npm هم داره.
sweetalert2 یه کتابخانه جاوااسکریپته که به جای پنجره های پیش فرض مرورگر، یعنی alert و confirm و prompt، پنجره های پیام، تایید و ورودی تمیز و ریسپانسیو نشون می ده. ظاهرش قابل تنظیمه و طبق معرفی رسمی از دسترس پذیری WAI-ARIA پشتیبانی می کنه. سازنده اش Limon Monte و مجوزش MIT هست.
search-insights یه کتابخانه جاوااسکریپت از Algolia با مجوز MIT هست که کلیک، تبدیل و بازدید کاربرها روی نتیجه های جستجو رو به Insights API خود Algolia گزارش می ده. اگه جستجوی سایتت با Algolia کار می کنه، با این بسته می تونی رفتار کاربرها رو ثبت کنی و کیفیت جستجو رو بهتر کنی.
js-cookie یه کتابخانه جاوااسکریپت ساده و خیلی سبکه که کار با کوکی های مرورگر رو راحت می کنه. با چند تا متد کوتاه می تونی کوکی بسازی، بخونی و پاک کنی و لازم نیست با رشته خام document.cookie سروکله بزنی. مجوزش MIT هست و به کتابخانه دیگه ای وابسته نیست.
آخرین نسخه
۳.۰.۸
نسخه‌ها
۸
به‌روزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.
