您的位置：首页 > 移动开发

AppCan用cookie实现记住密码功能 [APP]

2015-01-14 09:50 369 查看

今天想做个在应用上记住密码的功能。想了一下，先用COOKIE来测试。COOKIE保存在客户端。
关于COOKIE在手机上安不安全的问题，以后再讨论。
其实想过在手机上创建文件保存密码，但是，没有时间，没有COOKIE来得容易。
下面正题：
先做出要测试的界面，如下示：

界面源码如下：

<body class="ui-mobile-viewport" onload="useCookie()">


<div id="page_0" class="ui-page ui-body-d ui-page-active" tabindex="0">

<div class="ui-content ui-body-d ui-fixed-top ui-fixed-bottom">

<input name="username" id="username" type="text" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-btn-a"/>


<input name="password" id="password" type="text" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-btn-a"/>


<input type="checkbox" name="checkbox-1" id="checkbox-1" class="ui-hide"><label class="ui-checkbox ui-btn ui-btn-icon-right ui-corner-all ui-btn-a"><label class="ui-icon ui-icon-checkbox ui-icon-shadow"></label><span id="ck" class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">记住密码</span></span></label>

<div data-role="button" id="btn1" class=" ui-corner-all ui-btn ui-btn-a ui-shadow" onclick="checksave()"> <span class="ui-btn-inner ui-corner-all"> <span class="ui-btn-text">设置</span> </span></div>
<div data-role="button" id="getcookie" class=" ui-corner-all ui-btn ui-btn-b ui-shadow" onclick="delusr()"> <span class="ui-btn-inner ui-corner-all"> <span class="ui-btn-text">删除</span> </span></div>
<div data-role="button" id="getcookie" class=" ui-corner-all ui-btn ui-btn-b ui-shadow" onclick="reload()"> <span class="ui-btn-inner ui-corner-all"> <span class="ui-btn-text">刷新</span> </span></div>
</div>
</div>



</body>

好了，一般当别人选择了记住密码，第二次开启软件的时候，都会看到用户名，密码都填好的了。就是写个onload()事件而已。
<body class="ui-mobile-viewport" onload="useCookie()">触发的useCookie() 的js代码如下：

function useCookie()
{
var username=getCookie("username");
//alert(username);
var password=getCookie("password");
//alert(password);
if(username!=null && password!=null){
document.getElementById("username").value =username;
document.getElementById("password").value =password;
document.getElementById("checkbox-1").checked=true;
}else{
document.getElementById("username").value =null;
document.getElementById("password").value =null;
//alert("no data");
}
}
会调用到的方法已用红色标明，js代码如下：

function getCookie(NameOfCookie)
{
if (document.cookie.length > 0){
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1){
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}

}
return null;// cookie不存在返回null
}

这样在开启软件的时候，就去读存不存在的COOKIE，读到了，就赋值给输入框。

接下来，考虑输入用户名密码后，设置COOKIE，代码如下：

function checksave()
{
var name=document.getElementById('username').value;
var pass=document.getElementById('password').value;
if(name && pass){

setCookie("password",pass);
setCookie("username",name);
alert('success!');
location.reload();
}
else
alert("no input all!");
}

function setCookie(NameOfCookie, value, expiredays) { //var psw=document.getElementById('password').value;var ExpireDate = new Date (); ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); document.cookie = NameOfCookie + "=" + escape(value) +((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); alert("u+p="+unescape(document.cookie));} 输入数据，点击界面的设置按钮后:

此时会刷新界面，但是已经记住了密码，结果如下：

删除按钮的代码：

function delusr()
{
delCookie("username");
delCookie("password");
location.reload();
}

function delCookie (NameOfCookie)
{
if (getCookie(NameOfCookie)) {
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie = NameOfCookie + "=" + "; expires="+date.toGMTString();
}
}
更新按钮的代码：

function reload ()
{
location.reload();
}

这个功能就到这里。“记住密码”这个checkbox的代码我写在其它文件里，这里没有，判断它的真假就可以做出功能。

在做这个功能时，我一开始是利用SAE做服务器端，来做记住密码功能的。在手机上测试，学校的信号非常不给力，所以开启软件后完全获取不到信息。所以网络信号在做应用时也应该要考虑。
然后，假如真的是密码功能用COOKIE来做，密码的加密是必要的，可以选择异步通讯到远程加密后返回密码保存，甚至写个自己的加密函数等等，可以做足多方面的安全保护。
做个“下次自动登录”功能，其实也很简单。

当你想要做某功能时，先想想它的逻辑是什么，它需要哪些介质来做功能支持，然后它可能可以用什么技术实现。这些东西想多了，做多了，你就进步了。写代码写的就是写个逻辑。后期你得不停地为你的代码做优化，不停地想它究竟安不安全。
有什么问题留言讨论吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 密码客户端手机

相关文章推荐

新的分享

章节导航