APPCNA 手势验证登录
今天在APP中集成了指纹与手势登录功能,本文章分两部分进行记录。一是手势功能的逻辑。二是代码实现。该APP是采用APPCAN开发,直接用其已写好的插件,调用相当接口就要可以了。
1、在APP的个人中心加入手势设置的方法,用户只要登录后进入个人中心就可以设置手势登录功能。
页面代码如下:
<a href="#" class="my_info" onclick="createGesture()">
<div class="fl tuoch_setting">手势设置(仅本机有效)</div>
<div class="fr fa fa-angle-right ulev2 sc-text"></div>
</a>
onclick方法如下,单击后会打开手势设置界面。
isNeedVerifyBeforeCreate参数是在你重设手势时会不会较验之前的手势。我这选的是不校验。只要你登录了,你的手势就可以重新设置。不论你之前用的什么手势。
function createGesture(){
var data={
isNeedVerifyBeforeCreate:false
}
uexGestureUnlock.create(JSON.stringify(data));
}
2、手势设置成功后我们如果退出,在登录界面会多一个手势登录功能
点击后会对之前设置好了的手势进行验证,页面代码如下:
<div id='gestureunlockdiv' class="resxinlang ub-img umhw2" onclick="uexGestureUnlockverify();">手势登录</div>
onclick方法也是非常简单,只要调用插件uexGestureUnlock的接口就ok。
function uexGestureUnlockverify()
{
uexGestureUnlock.verify();
}
3、上面插件的方法在执行行我们都要对插件uexGestureUnlock进行初始化,包括手势验证的回调方法cbVerify。还有设置手势和验证手势时的监听方法onEventOccur
function initGestureUnlock()
{
uexGestureUnlock.onEventOccur=function(info){
if(JSON.parse(info).eventCode==11){
appcan.window.openToast("手势密码设置完成!",2000,5,0);
}
if(JSON.parse(info).eventCode==5){
appcan.window.openToast("手势密码验证成功!",2000,5,0);
//登录操作
//GestureLogin();
}
if(JSON.parse(info).eventCode==4 || JSON.parse(info).eventCode==10)
{
uexGestureUnlock.cancel();
}
//1 插件初始化
//2 开始手势密码验证
//3 手势密码验证失败
//4 验证过程被用户取消
//5 手势密码验证成功
//6 开始手势密码设置
//7 用户输入的密码不符合长度要求
//8 开始第二次输入手势密码
//9 两次输入的密码不一致
//10 手势密码设置被用户取消
//11 手势密码设置完成
}
uexGestureUnlock.cbIsGestureCodeSet=function(info){
if(JSON.parse(info).result){
}
}
uexGestureUnlock.cbVerify=function(info){
if(JSON.parse(info).errorString=="在未设置密码的情况下进行验证密码操作"){
appcan.alert("请先进行手势设置!");
return false;
}
if(JSON.parse(info).isFinished=="false")
{
appcan.alert("手势密码登陆失败!请使用账号密码重新登录!");
$("#gestureunlockdiv").hide();
}
if(JSON.parse(info).isFinished)
{
GestureLogin();
}
}
uexGestureUnlock.cbCreate=function(info){
}
var data={
backgroundImage:"../images/uexGestureUnlockbg.jpg",
iconImage:"../images/uexGestureUnlockTouxiang.png",
normalThemeColor:"#008cff", //普通主题色
selectedThemeColor:"#124dc3",//选中主题色
errorThemeColor:"#ff0000", //错误主题色
cancelVerificationButtonTitle:"取消",
minimumCodeLength:5,
verificationErrorPrompt:"验证错误!您还可以尝试%d次",
verificationBeginPrompt:GestureLoginUserName
}
uexGestureUnlock.config(JSON.stringify(data));
uexGestureUnlock.isGestureCodeSet();
}
4、在验证手势成功后会调用自定义的方法 GestureLogin(),该方法中有一个变量GestureLoginUserName,就是登录的用户名,这个用户名来自于我们登录成功时写入文件的用户名。
function GestureLogin(){
if(GestureLoginUserName=='')
{
appcan.window.openToast("请先使用用户名和密码登录!",2000,5,0);
return;
}
showMsg();
appcan.request.ajax({
url:GetServiceHostIp()+"LoginByUserId?userName="+escape(GestureLoginUserName),
type:'get',
dataType:'json',
success:function(data, status, requestCode, response, xhr)
{
hidenMsg();
if(data.Status=="1")
{
appcan.window.publish('login',data.Data);
appcan.locStorage.setVal('islog','1');
appcan.locStorage.setVal('userId',data.Data.userId);
appcan.locStorage.setVal('userName',data.Data.userName);
appcan.locStorage.setVal('IdCard',data.Data.idCard);
appcan.locStorage.setVal('xmbm',data.Data.xmbm);
appcan.window.publish('close_login','0');
uexWindow.evaluateScript("desktop", "0", "location.reload('../approval/desktop.html')");
uexWindow.open("desktop", 0, "../approval/desktop.html", 1, 0, 0, 0);
uexWindow.close();
}
else if(data.Status=="2"){
appcan.window.openToast(data.Message,2000,5,0);
}
else{
appcan.window.openToast("用户名或密码错误,错误代码:"+data.Status,2000,5,0);
}
}
,
error:function(xhr,status,errMessage){
hidenMsg();
appcan.window.openToast('登陆失败,原因:errMessage:'+errMessage+',xhr:'+xhr+',status:'+status,2000,5,0);
}
});
}
5、接下来的问题就来了,我们如何将信息写入到文件中及读取呢,请看我下面提供的一组有用的插件接口
//创建文件
var file = uexFileMgr.create({
path:"wgt://data/1.txt"
});
if(!file){
alert("创建失败!");
}
//打开文件
var file = uexFileMgr.open({
path: "wgt://data/1.txt",
mode: 3
});
if(!file){
alert("打开失败!");
}
//判断文件是否存在
var ret = uexFileMgr.isFileExistByPath("wgt://data/test.txt");
alert(ret);
//写文件
var file = uexFileMgr.open({
path: "wgt://data/1.txt",
mode: 3
});
uexFileMgr.writeFile(file, 0, "test",function(err){
alert(err);
});
//读文件
var file = uexFileMgr.open({
path: "wgt://data/1.txt",
mode: 3
});
uexFileMgr.readFile(file, -1,0,function(error,data){
if(!error){
alert(data);
}else{
alert("读取失败!");
}
});
//关闭文件
var file = uexFileMgr.open({
path: "wgt://data/1.txt",
mode: 3
});
var ret = uexFileMgr.closeFile(file);
alert(ret);
温馨提示:如需要微信投票、点赞、注册的朋友可以联系我,百万水军为您服务