آموزش ساخت عضویت/ورود با OnStorage

[M.gh]

نه بابا این چه حرفیه
من که خودم خرد شدم قشنگ

[Alico]

درود بر آقا میلاد و دیگر اساتید آقا من هنوز یادم نرفته شما چه زحماتی برای من کشیدید برای راه اندازی وینوس 
آقا میلاد الان توی این وضعیت من توان خرید دامنه را ندارم آیا با وبلاگ میشه این عملیات را پیاده سازی کرد
من یه هاست میخوام خریداری کنم ولی میخوام دامنه هم داشته باشه 

[Master Badfar]

درود بر آقا میلاد و دیگر اساتید آقا من هنوز یادم نرفته شما چه زحماتی برای من کشیدید برای راه اندازی وینوس 
آقا میلاد الان توی این وضعیت من توان خرید دامنه را ندارم آیا با وبلاگ میشه این عملیات را پیاده سازی کرد
من یه هاست میخوام خریداری کنم ولی میخوام دامنه هم داشته باشه 

سلام؛
برای دریافت مقادیر از وبلاگ راه دشواری رو در پیش ندارین و میتونین به این تاپیک رجوع کنین.
چـالش اصلی شما ارسـال مـقادیره چـرا که ثبت نام صـرفاً یک طرفه نیست. اگر هم بخواین از جاوا اسکریپت توی وبلاگ کمک بگیرین شکست میخورین چـون زمانی که با AJAX ریکوئست بزنین به دلیل اینکه AJAX یک مرورگر نیست و نمیتونه کدهای سمت کلاینت (HTML، CSS و جاوا اسکریپت) رو تحلیل کنه عملاً هیچ خـروجی نمی بینین و کدهای جاوا اسکریپت بهتون برگشت داده میشه!
پس نیاز دارین از یک سرویس RESTFUL مثل Backendless استفاده کنین. اما دقت کنین چنین API هایی موقتی کار شما رو راه میندازن و محدودیت هایی هم دارن. با این شیوه که الان راجع بهش صحبت میکنم میتونین بدون نیاز به هاست یا سرور بحث ثبت نام و لاگین کاربرانتون رو پیاده سازی کنین. البته این وب سرویس امکانات بیشتری مثل مدیریت یک پایگاه داده رو هم در اختیار شما میگذاره که به کمک اون میتونین مواردی از قبیل امتیازاتی که کاربران گرفتن و یا ... رو ثبت کنین. برای جزئیات بیشتر مستندات API وب سرویس رو در اینجا مطالعه کنین.
ابتدا وارد سایت منسوب به وب سرویس Backendless بشین. از این قسمت ثبت نام کنین و یک اکانت بسازین. بعد از ثبت نام از شما میخواد که یک نام برای app خودتون انتخاب کنین. بعد از اینکه یه app توی پنل کاربری تون ایجاد کردین وارد داشبوردتون بشین و این دو موردی رو که در تصویر زیر با کادر قرمز مشخص کردم رو یکجا یادداشت کنین چرا که کل پروسه با این دو تا آیتم پیش میره.

استفاده از شیء AJAX برای هندل کردن ریکوئست های HTTP و همینطور شیء دیکشنری برای هندل کردن مقادیر JSON توی این سورسی که ساختم پیاده شده و میتونین احتمالاً با یه نگاه اجـمالی متوجه اتفاقاتی که میفته بشین.
بعد از اینکه سورس رو باز کردین به جای مقادیر فـعلـی ثبات های APPID و RESTID به ترتیب Application ID و REST API Key رو وارد کنین. توی سورسی که میبینین من یه اکانت برای تست توی سرویس بک اند لِس ساختم و پارامترهای اون اکانت رو قرار دادم که طبیعتاً شما باید پارامترهای حساب (اکانت) خودتون رو وارد کنین.
بگذریم از این بحث ها. بریم ببینیم چه اتفاقی میفته توی ایونت هایی که نوشتیم.

---

ثبت نام و ایجاد حـساب کـاربری:
خُب ما سه تا فیلد اجباری برای هر ثبت نام داریم که عبارتند از name، email و password که در قالب سه کلید دیکشنری Data ایجادشون کردیم. میتونیم برای یک کاربر فیلدهایی به غیر از این سه فیلد به دلخواه خودمون (مثلاً age و یا ...) هم ایجاد کنیم که خُب مشخصاً باید به کلیدهای دیکشنری Data اضافه کنیم. بعد از اینکه فیلدها رو در قالب کلیدهای دیکشنری Data اعمال کردیم به کمک شیء AJAX یک ریکوئست HTTP از نوع POST به وب سرویس Backendless ارسال میکنیم. بدنه (Body) این ریکوئست حاوی خروجی JSON دیکشنری هست که یه تغییراتی توش اعمال کردیم به این دلیل که خروجی پیشفرض JSON ای که کانستراکت برای دیکشنری ها به ما ارائه میده یه چیزی شبیه شکل زیره:

کد:

{"c2dictionary":true,"data":{"email":"cppfhs","name":"salam","password":"12345"}}

اما اون تیکه ای از ابتدا که {"c2dictionary":true,"data": داره به همراه یکی از علامت های { انتها توی یک فرمت JSON عادی معتبر نیستن پس باید حذفشون کنیم که این کار رو با اکسپرشن replace کانستراکت انجام دادیم.
در نهایت گفتیم اگر ریکوئست POST ارسال شده موفقیت آمیز بود مقادیر جیسونی که برگشت داده میشه رو در یک دیکشنری به نام output وارد کن و بعد توی یک تکست باکس نمایششون بده. طبیعتاً برای اینکه فرمت جیسون برگشت داده شده از وب سرویس رو به فرمتی تبدیل کنیم که برای کانستراکت قابل شناسایی باشه باید ابتدای رشته جیسون برگشت داده شده رشته "{"c2dictionary":true,"data":" رو اضافه کنیم و همینطور در انتها هم یک رشته به "{" این شکل رو الحاق کنیم.

---

نـحوه لاگین به حساب کاربری:
برای بحث لاگین هم اتفاقی که میفته شباهت زیادی به ثبت نام داره. دو فیلد (پارامتر) اجـباری email و password رو داریم که در قالب کلیدهای دیکشنری Data اعمالشون کردیم. سایر اتفاقاتی که رُخ میده دقیقاً مشابه پروسه ثبت نامه منتهی تفاوتش اینه که اینجا داریم لاگین میکنیم نه ثبت نام!

---

نکته قابل توجه:
اگر کد وضعیت HTTP ریکوئستی که برگشت داده میشه 200 نباشه شیء AJAX اون درخواست رو شکست خورده تلقی میکنه. این اتفاق میتونه در دو حالت رُخ بده.
در حالت اول به دلیل عدم اتصال به اینترنت ممکنه ریکوئست شما ارسال نشه. در حالت (احتمال) دوم به دلیل صحیح نبودن مقادیر فیلدهای اجباری (name و email و password) میتونه کد وضعیت HTTP 200 برگشت داده نشه. پس برای جلوگیری از این مسئله دو مورد رو باید بررسی کنین که مورد اول مشخصاً وضعیت اتصال اینترنت کاربر هست و مورد دوم هم اعتبارسنجی مقادیر فیلدهای وارد شده است. مثلاً فرمت ایمیل رو به کمک عبارات باقاعده (Regex) چک کنین تا مطمئن بشین درست وارد شده. اگر توی این دو مورد اشکالی وجود نداشت و شیء AJAX باز هم درخواست رو شکست خورده تلقی کرد (یعنی کد وضعیت 200 HTTP دریافت نشد) معنیش اینه که ایمیل وارد شده قبلاً باهاش ثبت نام انجام شده. اگر همین اتفاق در فُرم لاگین بیفته معنیش اینه که مشخصاتی که کاربر برای لاگین وارد کرده غلطه و شخصی با این مشخصات قبلاً ثبت نام نکرده.

---

مقادیری که در ثبت نام و لاگین توسط وب سرویس برگشت داده میشه
برای هر درخواست ثبت نام مقادیری مشابه نمونه زیر توسط وب سرویس برگشت داده میشه:

کد:

lastLogin:0
userStatus:ENABLED
created:1605944551000
ownerId:51D278CD-AF3F-44BC-B5FF-702D179E48A4
socialAccount:0
name: fhgl
___class:Users
blUserLocale:en
updated:0
age:17
email:[email protected]
objectId:51D278CD-AF3F-44BC-B5FF-702D179E48A4

پارامتر created تایم استمپ زمانی که حساب کاربری ایجاد شـده رو نشون میده. پارامترهای ownerID و objectID مقادیرشون مشابه هم دیگه است و حاوی یک رشته ساخته شده با الگوریتم UUID هستن که میشه اون رو یه توکن منحصر به فرد و یکتا برای هر کاربر درنظر گرفت. مقادیر name و email هم نشون میده که کاربر برای این دو فیلد اجباری چه مقادیری رو در نظر گرفته. در نمونه بالا من به انتخاب و اختیار خودم یک فیلد اختیاری به نام age هم در نظر گرفتم. 

برای هر درخواست لاگین یا ورود به حساب کاربری مقادیری مشابه نمونه زیر توسط وب سرویس برگشت داده میشه:

کد:

lastLogin:1605944921358
userStatus:ENABLED
created:1605944551000
ownerId:51D278CD-AF3F-44BC-B5FF-702D179E48A4
socialAccount:BACKENDLESS
name:dfhgl
___class:Users
blUserLocale:en
user-token:1DFE5A3B-95CE-4D95-8CDD-CC25DB3EE2E7
updated:0
age:17
email:[email protected]
objectId:51D278CD-AF3F-44BC-B5FF-702D179E48A4

همونطور که می بینین آخرین زمان لاگین در قالب یک تایم استمپ در پارامتر lastLogin نمایش داده میشه. پارامترهای ownerID و objectID هم که راجع بهشون صحبت کردیم. باقی پارامترها هم که حکایتشون مشخصه. پارامتر user-token شناسه سشن (Session) کاربر رو نشون میده که تا زمانی منحصر به فرده که کـاربر همچنان درون حسابش هست و زمانی که کاربر از حسابش خارج بشه ممکنه به کاربر دیگه ای تعلق بگیره و دیگه منحصر به اون کـاربر نباشه. دقت کنین که این پارامتر تنها پارامتر موردنیاز برای لاگ اوت (خروج از حساب کاربری) هست پس حتماً باید یکجایی به صورت موقت ازش نگهداری کنین مثلاً در قالب یک متغیر و یا ... .

---

 خروج از حساب کاربری (لاگ اوت):
برای لاگ اوت کردن باید شناسه ای یوزر توکن رو که در پروسه لاگین وب سرویس برگشت داده به عنوان هدر HTTP با نام user-token مشخص کنین. برای این کار از اکشن Set Request Header شیء AJAX کمک گرفتیم. در ضمن نوع ریکوئست HTTP ای هم که به وب سرویس ارسال کردیم مثل موارد قبلی POST نبود و از نوع GET بـود.

---

در پایان هم باید بگم ریجستر کردن یک دامنه و همینطور خرید یک هاست اشتراکی چندان گرون در نمیاد که لازم باشه این همه مشقت بکشین. کلیات امکانات ثبت نام این وب سرویس رو به صورت مختصر سعی کردم شرح بدم. همینطور که گفتم امکانات این وب سرویس صرفاً به ثبت نام ختم نمیشه و میتونین مواردی مثل امتیازات کاربران رو هم در قالب پایگاه داده SQL ذخیره کنین.
موفق باشین.