ایجاد یک اپ مدیریت پسورد توسط Cordova

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

در این مقاله من به شما ساختن یک برنامه‌ی مدیریت پسورد توسط کوردوا را آموزش میدهم. برای UI از jQuery Mobile و برای پنهان‌سازی پسورد از CryptoJS استفاده می‌کنیم.

برای نشان دادن چگونگی کار یک ویدئو (در صفحه منبع ببینید) پیش‌نمایش برای شما تهیه شده است. کد نهایی در GitHub یافت می‌شود.

شروع

الگوی (تم) آغازین بایستی شامل jQuery و jQuery mobile  و CryptoJS باشد. من در اینجا چگونگی ساخت و نصب یک برنامه ی کوردوا را پوشش نمی‌دهم. اگر تاکنون این کار را نکرده‌اید، راهنمای آماده‌سازی را بخوانید. یک اسم مناسب برای برنامه تعیین کنید و چهارچوب‌هایی را اضافه کنید که می‌خواهید پشتیبانی کنید. شما قواعد ساخت و اجرای برنامه را در همان صفحه مشاهده خواهید کرد. ما از پلاگین اطلاع‌رسانی کوردوا در این آموزش استفاده می‌کنیم، شما نیاز به اضافه‌کردن آن خواهید داشت. قواعد را اینجا بیابید.

داخل فایل index.html جاوا اسکریپت و CSS مقابل را بیفزایید:

ایجاد صفحه‌ی نمایش دسترسی

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

کد لازم برای صفحه‌ی دسترسی را در زیر مشاهده می‌کنیم. داخل برچسب‌های تنه index.html را به آن بیفزایید.

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

کد زیر برای عملکرد store_master_password است که پسورد اصلی را ذخیره می‌کند. این کد را به js/index.js بیفزایید.

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

 

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

اینجا چگوگی شمایل صفحه‌ی دسترسی را می‌بینید:

1427274655Screen-Shot-2015-02-24-at-5.02.28-pm-578x1024

ایجاد صفحه نمایش خانگی

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

در هوم اسکرین دو عدد دکمه را بازنمایی می‌کنیم و یک دکمه جدید پسورد افزوده و دکمه ی پسورد‌ها را نشان می‌دهیم.

کد زیر برای صفحه اصلی است. Index.html را به آن اضافه نمایید.

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

هنگامی که کاربر “لیست پسورد را نشان بده” را فشار می‌دهد، بایستی پسورد پنهان‌سازی‌شده را از حافظه محلی بازیابی کنیم و آنها را آشکارسازی کرده و لیست HTML را برای بازنمایی آن‌ها ایجاد کنیم.

پیاده‌سازی عملکرد display_list را در زیر مشاهده می‌نمایید. Js/index.js را به آن بیفزایید.

 

صفحه اصلی بایستی به شکل زیر باشد:

1427274687Screen-Shot-2015-02-24-at-5-574x1024

ایجاد صفحه‌ی اضافه کردن پسورد

وقتی کاربری بر روی دکمه‌ی “پسورد را اضافه کن” در صفحه‌ی اصلی کلیک می‌کند، به صفحه‌ی اضافه کردن پسورد هدایت می‌شود.

دو زمینه‌ی متنی و یک دکمه برای ثبت ارزش‌ها را در صفحه ی افزودن پسورد بازنمایی کرده و به عنوان داده ورودی نام‌گذاری می‌کنیم.

کد زیر برای صفحه‌ی افزودن پسورد است. Index.html را به آن می‌افزاییم.

 

زمانی که کاربر بر روی دکمه‌ی “ثبت کن” کلیک میکند، ما عملکرد new_entry جاوا اسکریپت را اجرا می‌کنیم. این عملکرد مسئولیت پنهان‌سازی و ذخیره پسورد را به عهده دارد.

عملکرد new_entry  در اینجاست : js/index.js را به آن اضافه کنید.

 

برای پنهان‌سازی پسورد از پنهان‌سازی متقارن AES استفاده می‌کنیم. این نیاز به پسورد اصلی به عنوان کلید دارد. ما پسورد پنهان شده را در حافظه‌ی محلی HTML5 ذخیره می‌کنیم.

صفحه افزودن پسورد بایستی به شکل زیر باشد:

 

1427274719Screen-Shot-2015-02-24-at-51-576x1024

صفحه‌ی لیست پسورد را ایجاد کنید

هنگامی که کاربر بر روی دکمه “لیست پسورد را نشان بده” در صفحه اصلی کلیک می‌کند، به صفحه‌ی لیست پسورد هدایت می‌شود.

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

کد زیر برای صفحه‌ی لیست پسورد می‌باشد: index.html را به آن بیفزایید.

 

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

پیاده سازی عملکرد name-password بصورت زیر می‌باشد: js/index.js  را به آن بیفزایید.

 

هرموقع که صفحه بارگذاری شود، ما میخواهیم که لیست UI موجود در صفحه را نوسازی کنیم. کد زیر برای آن میباشد : js/index.js  را به آن بیفزایید.

جمع‌بندی

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

منبع: +

امین ضیا

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

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

یک واکنش

  1. اصغرزاده گفت:

    سلام.
    من یه مشکلی با Cordova دارم؛ و اون اینکه از وب فونت نمیتونم استفاده کنم توی برنامه ام.
    تمام گوگل رو زیر رو کردم! هر روشی نوشته شده رو تست کردم و جواب نمیده!
    به هر شکلی که بگی فونت رو توی css میذارم! ولی همچنان نوشته ها با یه فونت بزرگ و زشت نمایش داده میشه.
    شما راه حلی نداری؟

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *