سلام قسمت نهم Authentication برای محدود کردن دسترسی به پنل (همون صفحه وب خودمون) می توانیم از نام کاربری و پسورد استفاده کنیم. در این قسمت روش ساده و خیلی کاربر نپسند ( اون رو پیاده میکنیم و در قسمت های آینده روش های بهتر و گرافیکی تر را دنبال می کنیم. لازمه این بخش Redirect ها هستن پس اگر با اون ها آشنایی ندارید توصیه می کنیم از مطالعه کنید. ابتدا یک صفحه را جهت لاگین در نظر می گیریم. مثلا login /در خط دوم این دستورات handle کردن این پیج، چک میکنیم آیا کاربر با یورزنیم user و پسورد pass لاگین کرده یا نه! اگر لاگین نکرده بود که تابع ( requestAuthentication را برمیگردانیم تا لاگین کند و اگر لاگین کرده بود مثلا پیغامی مبنی بر لاگین موفق ارسال می کنیم. پس از وارد کردن یورزنیم و پسورد و کلیک بر روی Sign in درصورتی که یورزنیم و پسورد صحیح باشند متن Login Success ! نمایش داده می شود. برای صفحه اصلی نیز چنین Authentication در نظر میگیریم. فقط ابتدا فراخوانی این صفحه چک میکنیم که آیا Authentication موفقیت آمیز بوده یا خیر و اگر ناموق بوده به صفحه login ریدایرکت می کنیم. برای بهتر شدن کار در صفحه لاگین پس از لاگین موفق با استفاده از کد زیر به صفحه اول ریدایرکت می کنیم. اکنون فقط کاربرانی که لاگین کرده اند میتوانند به صفحه اصلی دسترسی پیدا کنند ولی همچنان صفحات on و off باز هستند و با لود کردن آنها توابع خاموش و روشن شدن led اجرا می شوند. پس همین کار را نیز برای سایر صفحات انجام می دهیم. چرا یک بار ریدایرکت میکنیم به login و سپس بر میگردیم؟ به دو دلیل: ) اگر بعدا تغییر در صفحه لاگین دادیم روی تمام لاگین ها اعلام شود. ) فایل های مربوط به Auth در فولدر SimpleAuth _ ESP قابل دانلود هستند. سرو کردن فایل ها از روی حافظه فلش هدف: فایل های html . را به جای اینکه در کد بنویسیم در جای دیگری ذخیره کنیم و زمانی که کاربر به آن ها نیاز داشت، فراخوانی کنیم. مقدمات LittleFS لیتل اف اس یک فایل سیستم سبک مخصوص میکروکنترلر هایی است که یک حافظه فلش به صورت SPI به آنها متصل است که ESP از این نوع هست. در اصل ما فایل های html , css , js و. حتی عکس و فیلم و. رو توسط LittleFS روی حافظه فلش ذخیره می کنیم و زمانی که لازم شد آن ها رو از این حافظه بارگزاری می کنیم. در کنار LittleFS موارد دیگری مانند SPIFFS هم هستند در ابتدا لازم هست به آردوینو بگیم که فضایی که برای این کار میخواهیم چقدر باشه! از مسیر Tools - - > Flash Size گزینه مورد نظر رو انتخاب میکنیم. موارد قابل انتخاب بسته به بورد مورد استفاده ممکنه متفاوت باشه. من در اینجا MB حافظه فلش دارم که مگابایت اون رو برای فایل سیستم در نظر می گیرم و تقریبا مگ هم برای OTA و حدود مگ باقی میمونه که میشه حافظه فلش خودمون که کد ها رو نگه میداره. اول دو کتابخونه زیر رو باید import کنیم در setup باید littleFS را فعال کنیم و مطمین میشیم که فعال میشه! برای تست عملکرد صحیح ابتدا یک فایل در LittleFS مینویسیم و سپس میخوانیم و در سریال مانیتور چاپ میکنیم. پس توابع خواند و نوشتن به شرح زیر هستند: تابع readFile یک مسیر دریافت می کند و در صورت وجود فایل آن را خوانده و در سریال چاپ می کند. تابع writeFile یک مسیر و عبارت دریافت می کند و در فایل می نویسد. در این توابع مسیر شامل اسم فایل هم هستند مثلا برای ایجاد یک فایل متنی با اسم text مسیر به صورت زیر است: در setup این دو تابع را فراخوانی میکنیم و ازصحت عملکرد LittleFS مطمین می شویم. و نتیجه کار، LittleFS به خوبی کار می کند. راستی با دستور ( LittleFS . format می تونید فایل سیستم رو فرمت کنید. فایل های مربوط به مقدمات در فولدر LittleFS _ ESP موجود می باشند. آپلود فایل روی LittleFS برای آپلود فایل روی فایل سیستم ESP باید پلاگین زیر رو دانلود و نصب کنید بعد از دانلود فایل zip کافیه محتوایاتش رو در پوشه tools آدوینو کپی کنید. (این پوشه رو عموما در documents فولدر arduino می تونید پیدا کنید. در نهایت باید چنین چیزی داشته باشید. یک بار اردوینو رو ببندید و بعد از باز کردن همانند تصویر زیر پلاگین به آردوینو اضافه می شود. برای استفاده از این قابلیت لازمه در کنار فایل آردوینو یک فولدر به اسم data داشته باشید و فایل هایی که قراره آپلود بشن رو در این فولدر قرار بدین. حتما باید سریال مانیتور بسته باشه و ESP در مود پروگرم باشه تا فرایند انجام بشه. پس بریم همون صفحه اصلی رو در یک فایل HTML بنویسیم. این متن رو در یک فایل به اسم index . html ذخیره میکنیم. کافیه توابع handle کردن صفحات رو به صورت زیر تغییر دهیم: به جای ارسال متن در تابع send می گوییم از LittleFS (آرگومان اول) فایل index . html (آرگومان دوم) را که فرمت text / html دارد (آرگومان سوم) ارسال کن. حالا کافیه کد را مثل همیشه آپلود کنید و از طریق منو tools - - > ESP LittleFS Data Upload فایل های موجود در فولدر data را نیز آپلود کنید ( یکم فراتر بریم و یک عکس به نام img . png هم در فولدر Data قرار میدیم. برای ارسال عکس میتونیم از کد زیر استفاده کنیم این تابع در صورت درخواست آدرس img /تصویر را ارسال می کند. و همانند قبل آرگومان اول محل ذخیره عکس، ارگومان دوم اسم فایل، ارگومان سوم نوع فایل که در اینجا عکس ما image / png است و آرگومان چهارم مشخص می کند که این عکس باید دانلود شود یا نه. اگر true باشد پس در درخواست عکس شروع به دانلود شدن می کند و اگر false باشد عکس در همان مرورگر نمایش داده می شود. فایل های مربوط در فولدر Advanced _ SimpleAuth _ ESP موجود هستند.