为我们的 NoteKeeper JQuery Mobile 应用添加安全性
4.89/5 (2投票s)
提供登录和注册功能，为我们的 NoteKeeper JQuery Mobile 应用实现安全性。
引言
本文是 使用 JQuery Mobile 和 LocalStorage 创建 CRUD Web 应用 的续篇，旨在为我们的 JQuery Mobile 应用添加身份验证控制功能。目的是让最终用户提供凭据来使用 NoteKeeper 应用程序。用户需要输入他们的电子邮件地址和注册密码。应用程序从 Localstorage 检索记录并比较用户密码，如果不匹配则显示一个提示，告知用户无法登录。密码是区分大小写的，但以明文形式存储。可以添加一个插件来解密和加密密码，以确保密码安全，但尚未实现。我们以后再讨论这个问题。
上一篇文章详细讨论了**创**建、**查**找、**更**新、**删**除和列出记录，我在这里不再赘述，因为这里的原理是相同的。附带的 zip 文件包含上一篇 NoteKeeper 应用中的所有代码，但增加了登录、注册/添加用户和用户列表屏幕。
有关 (a) 添加记录、(b) 更新记录、(c) 删除记录和 (d) 列出记录的更多详细信息，请参阅上述文章。本文重点将放在登录屏幕，并仅简要介绍添加用户或更优地说是注册屏幕。这就是本文的目的。
1. 提供一个登录屏幕，带有电子邮件和密码提示，要求用户登录。如下图 1 所示。
2. 如果用户输入的凭据不正确/账户无效，则显示一个警告框，如下图 2 所示，并且
3. 如果用户不存在，则提供注册功能，即创建用户记录。如下图 3 所示。
3. 列出可供更新的现有用户，如下图 4 所示。
5. 在“**注册**”和“**添加用户**”之间切换页面标题。同一个屏幕将用于创建新用户和注册。
6. 使用 JQuery 获取和设置 DropdownList/SelectMenu/ComboBox 项。
7. 使用 JQuery 隐藏和显示表单元素。
注意：上一篇文章中做出的所有假设仍然有效。
以下是包含安全性的更新后的源代码：下载 notekeeper.zip
背景
NoteKeeper 应用程序的用户应经过身份验证，以确保最终用户的笔记得到安全访问。但是，授权尚未实现，用于检查用户是否有权限执行更新和删除操作，因此此处不检查或验证这些权限。但我提供了一个下拉列表，用于在管理员和用户之间进行选择，这只是为了演示第 6 点。
这只是为了演示如何为我们的 JQuery Mobile 应用提供安全性。然而，其局限性在于，无论哪个用户注册然后登录 Notekeeper，**他们都将访问所有笔记**。要解决这个问题，可以定义带有用户电子邮件地址后缀的 LocalStorage 键，即**将键从*notekeeper-notes*更改为*notekeeper-notes-email@domain.com*。**
就本练习而言，电子邮件地址是系统中标识每个用户的键。
使用代码
为了定义我们的应用以包含安全功能，应定义登录和注册屏幕。当用户启动之前的 NoteKeeper 时，他们会看到启动板，但在这种情况下，在显示启动板之前，会显示一个提示用户登录/注册的屏幕，如下图所示。
**登录** - 屏幕 HTML 定义和输出结果。
<body><div id="pgSignIn" data-role="page">
<header id="pgSignInheader" data-role="header" data-position="fixed">
<h1>Welcome to NoteKeeper</h1>
</header>
<div id="pgSignIncontent" data-role="content" class="content">
<form action="#" method="post">
<div data-role="fieldcontain">
<label for="pgSignInEmail" id="lblpgSignInEmail">Email Address<span style='color:red;'>*</span></label>
<input type="email" required="required" title="Enter email address here." name="pgSignInEmail" id="pgSignInEmail" placeholder="Enter email address here." autocomplete="off" data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgSignInPassword" id="lblpgSignInPassword">Password<span style='color:red;'>*</span></label>
<input autocomplete="off" type="password" required="required" title="Enter password here." name="pgSignInPassword" id="pgSignInPassword" placeholder="Enter password here." data-clear-btn="true"></input>
</div>
<div><button type="submit" id="pgSignInIn" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Sign In</button>
</div>
<div><button id="pgAddUserUp" class="ui-btn ui-corner-all ui-shadow">Sign Up</button>
</div>
</form>
</div>
<footer id="pgSignInfooter" data-role="footer" data-position="fixed">
<h1>Powered by JQM.Show © Anele Mbanga 2015</h1>
</footer></div>
图 1
当用户点击登录时，输入的电子邮件地址和密码会与本地存储进行检查，如果匹配，用户将被带到新的启动板。如果用户不存在、密码不匹配或用户已失效，则会显示一个警告框，告知用户错误。如下图 2 所示。
**警告框** - 输入凭据不正确或账户失效时，屏幕 HTML 定义和输出结果。
在上一篇文章中，我详细讨论了消息框。消息框的原理同样适用于此处，只是警告框在这种情况下不执行任何方法，而是仅显示内容并将用户带到同一个屏幕。警告框就像消息框一样，根据我们要引发的错误动态更新。
<section data-transition="pop" id="alertbox" data-role="dialog">
<header id="alertboxheader" data-role="header" data-position="fixed">
<h1>Error</h1>
</header>
<div id="alertboxcontent" data-role="content" class="content">
<div id="alertboxtitle">
</div>
<br><div id="alertboxprompt">
<p>An error has been encountered!</p>
</div>
<br><div style="text-align: center;" id="alertboxbuttons" class="ui-grid-solo">
<div class="ui-block-a">
<a data-method="" data-id="" data-topage="" id="alertboxok" data-role="button" data-icon="check" data-theme="b">Ok</a>
</div>
</div>
</div>
</section>
- *alertboxheader* 将更新为警告框的标题。
- *alertboxtitle* 将根据我们要显示的项目显示一个标题。
- *alertboxprompt* 将包含我们要显示给用户的消息，并且
- *alertboxok* 是警告框中唯一可点击的按钮。
我也不想为这个警告框使用插件，并会寻找在屏幕顶部显示它的方法。
图 2
**注册** - 屏幕 HTML 定义和输出结果。
有两种添加用户到应用的方法：通过注册，或者现有用户通过在用户列表页面选择“新建”来添加新用户。用户列表页面的结构与上一篇文章中讨论的笔记列表页面的结构类似，但会显示用户的电子邮件。从列表中选择一个用户将打开“编辑用户”页面，在该页面用户可以更新用户详细信息。
<div id="pgAddUser" data-role="page">
<header id="pgAddUserheader" data-role="header" data-position="fixed">
<h1>Add User</h1>
<a data-role="button" id="pgAddUserBack" data-icon="arrow-l" class="ui-btn-left">Back</a>
</header>
<div id="pgAddUsercontent" data-role="content" class="content">
<form action="#" method="post" id="pgAddUserForm" name="pgAddUserForm">
<div data-role="fieldcontain">
<label for="pgAddUserFirstName" id="lblpgAddUserFirstName">First Name<span style='color:red;'>*</span></label>
<input type="text" required="required" title="Enter first name here." name="pgAddUserFirstName" id="pgAddUserFirstName" placeholder="Enter first name here." autocomplete="off" data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgAddUserLastName" id="lblpgAddUserLastName">Last Name<span style='color:red;'>*</span></label>
<input type="text" required="required" title="Enter last name here." name="pgAddUserLastName" id="pgAddUserLastName" placeholder="Enter last name here." autocomplete="off" data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgAddUserEmail" id="lblpgAddUserEmail">Email Address<span style='color:red;'>*</span></label>
<input type="email" required="required" title="Enter email address here." name="pgAddUserEmail" id="pgAddUserEmail" placeholder="Enter email address here." autocomplete="off" data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgAddUserPassword" id="lblpgAddUserPassword">Password<span style='color:red;'>*</span></label>
<input autocomplete="off" type="password" required="required" title="Enter password here." name="pgAddUserPassword" id="pgAddUserPassword" placeholder="Enter password here." data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgAddUserConfirmPassword" id="lblpgAddUserConfirmPassword">Confirm Password<span style='color:red;'>*</span></label>
<input onfocus="ValidatePassword(document.getElementById('pgAddUserPassword'), this);
" oninput="ValidatePassword(document.getElementById('pgAddUserPassword'), this);
" autocomplete="off" type="password" required="required" title="Enter confirm password here." name="pgAddUserConfirmPassword" id="pgAddUserConfirmPassword" placeholder="Enter confirm password here." data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgAddUserUserType" id="lblpgAddUserUserType">User Type<span style='color:red;'>*</span></label>
<select name="pgAddUserUserType" id="pgAddUserUserType" data-native-menu="false">
<option value="null" data-placeholder="true">Select User Type</option>
<option value="admin">Administrator</option>
<option value="user">User</option>
</select>
</div>
<div data-role="fieldcontain">
<input type="checkbox" required="required" title="" name="pgAddUserActive" id="pgAddUserActive" autocomplete="off" value="Active"></input>
<label for="pgAddUserActive" id="lblpgAddUserActive">Active<span style='color:red;'>*</span></label>
</div>
<div><button type="submit" id="pgAddUserSave" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Save User</button>
</div>
</form>
</div>
</div>
注册屏幕要求用户提供以下详细信息：名字、姓氏；电子邮件地址；密码；用户类型；活动状态。现在仔细想想，您可以默认隐藏**用户类型**和**活动状态**，当用户注册时。用户不应该看到这些，因为默认情况下，当一个人注册时，他们就是活动的，并且会获得一个用户类型，因为他们不是管理员。使用 JQuery 隐藏和显示元素很容易。您只需传入要显示或隐藏的元素名称。
$('#pgAddUserActive').hide();
$('#pgAddUserUserType').hide()
要显示一个元素，请将 .hide 替换为 .show。
当从登录屏幕访问时，“添加用户”屏幕的标题将更改为“注册”，使用
$('#pgAddUserheader h1').text('Sign Up');
当通过点击用户列表页面的“新建”按钮访问时，则为
$('#pgAddUserheader h1').text('Add User');
当通过点击用户列表页面的“新建”按钮访问时。
图 3
图 3.1
**用户列表** - HTML 定义和输出。
用户列表屏幕的作用与笔记列表屏幕相同。当选择用户的电子邮件地址时，将打开一个编辑用户详细信息的屏幕。
<div id="pgUser" data-role="page">
<header id="pgUserheader" data-role="header" data-position="fixed">
<h1>Users</h1>
<a data-role="button" id="pgUserBack" data-icon="arrow-l" class="ui-btn-left">Back</a>
<a data-role="button" id="pgUserNew" data-icon="plus" data-theme="b" class="ui-btn-right">New</a>
</header>
<div id="pgUsercontent" data-role="content" class="content">
<ul data-role="listview" data-inset="true" id="pgUserList" data-autodividers="true" data-filter="true" data-filter-placeholder="Search Users" data-filter-reveal="false">
<li data-role="list-divider">UserHdr</li>
<li id="noUser">You have no users</li>
</ul>
</div>
</div>
图 4
添加新用户
添加新用户屏幕将打开相同的注册屏幕，但会将标题切换为“添加用户”，如下图 5 所示。
图 5
至此，我们完成了为 NoteKeeper 应用程序添加安全功能的说明。现在，当您运行该应用程序时，登录后，您的启动板将有所不同，会有一个“用户”项和“注销”项，如下所示。选择“笔记”将打开可用的笔记列表，选择“用户”将带您到可用的用户列表。选择“注销”将用户带回登录页面。
感谢您花时间阅读本文，如果您喜欢，请不要忘记投票。
关注点
本文旨在演示如何在 CRUD JQuery 应用程序中添加简单的安全功能。系统会提示用户输入用户名和密码，并提供注册功能。添加到此应用的一个有趣元素是下拉列表，该列表可以通过 JQuery 代码读取和设置。要使此类控件反映更改，需要对该元素执行刷新方法。我将重新审视隐藏和显示元素的问题，因为这似乎有点错误，尽管已应用了推荐的实现方式。
历史
与上一篇文章相比，已添加了安全功能，并为 Web 应用增加了注册能力。启动板也已更新，增加了新的“用户”项，以便用户访问现有用户。