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

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

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

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

شروع

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

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

        @-ms-viewport { width: 100vw ; zoom: 100% ; }
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }
        @viewport { user-zoom: fixed ; }
    </style>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">


    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>

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

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

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

<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>Access</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p style="text-align: center">Enter Master Password</p>
        <input type="password" id="master_password" />
        <a target="_blank" href="javascript:store_master_password()" style="text-decoration: none"><button>Submit</button></a>
    </div>
</div>

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

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

var master_password = "";

$(document).on("pageshow","#pageone",function(){
    master_password = "";
});

function store_master_password()
{
    master_password = document.getElementById("master_password").value;

    if(master_password == "")
    {
        navigator.notification.alert("Please enter master password");
        return;
    }

    $.mobile.changePage($("#pagetwo"), "slide", true, true);
}

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

 

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

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

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

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

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

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

<div data-role="page" id="pagetwo">
    <div data-role="header">
        <h1>Home</h1>
        <a target="_blank" href="#pageone" class="ui-btn ui-btn-right ui-icon-action ui-btn-icon-right">Logout</a>
    </div>

    <div data-role="main" class="ui-content">
        <a target="_blank" href="#pagethree" style="text-decoration: none"><button>Add New Password</button></a>
        <a target="_blank" href="javascript:display_list();" style="text-decoration: none"><button>Show Password List</button></a>
    </div>
</div>

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

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

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

function populate_list()
{
    var list = "";
    for(var key in localStorage)
    {
        list = list + "<li><a target="_blank" href='javascript:name_password(\"" + key + "\")'>" + key + "</a></li>";
    }
    document.getElementById("ul_list").innerHTML = list;
}

function display_list()
{
    populate_list();
    $.mobile.changePage($("#pagefour"), "slide", true, true);
}

 

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

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

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

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

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

<div data-role="page" id="pagethree">
    <div data-role="header">
        <a target="_blank" href="#pagetwo" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
        <h1>Add</h1>
        <a target="_blank" href="#pageone" class="ui-btn ui-btn-right ui-icon-action ui-btn-icon-right">Logout</a>
    </div>

    <div data-role="main" class="ui-content">
        <input type="text" placeholder="Facebook" id="new_name" />
        <input type="text" placeholder="Password" id="new_password" />
        <input type="submit" placeholder="Add to List" onclick="new_entry();" value="Submit" />
    </div>
</div>

 

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

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

function new_entry()
{
    var name = document.getElementById("new_name").value;
    var password = document.getElementById("new_password").value;

    if(name == "" || password == "")
    {
        navigator.notification.alert("Name and Password are Required");
        return;
    }

    var options = { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 };  
    var encrypted_password = CryptoJS.AES.encrypt(password, master_password, options);

    localStorage.setItem(name, encrypted_password);

    populate_list();

    $.mobile.changePage($("#pagefour"), "slide", true, true);
}

 

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

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

 

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

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

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

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

<div data-role="page" id="pagefour">
    <div data-role="header">
        <a target="_blank" href="#pagetwo" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
        <h1>List</h1>
        <a target="_blank" href="#pageone" class="ui-btn ui-btn-right ui-icon-action ui-btn-icon-right">Logout</a>
    </div>

    <div data-role="main" class="ui-content">
        <form class="ui-filterable">
            <input id="myFilter" data-type="search">
        </form>
        <ul id="ul_list" data-role="listview" data-filter="true" data-input="#myFilter" data-inset="true">
        </ul>
    </div>
</div>

 

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

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

function name_password(name)
{
    var options = { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 };  
    var decrypted_password = CryptoJS.AES.decrypt(localStorage.getItem(name), master_password, options);

    navigator.notification.alert("Password is: " + decrypted_password.toString(CryptoJS.enc.Utf8));
}

 

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

$(document).on("pageshow","#pagefour",function(){ // When entering pagetwo
  $("#ul_list").listview("refresh");
});

جمع‌بندی

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

منبع: +