|
|
<!doctype html> |
|
|
<html> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>谷歌验证器</title> |
|
|
<meta name="viewport" |
|
|
content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> |
|
|
<link href="../../../lib/css/mui.min.css" rel="stylesheet"/> |
|
|
<!--引入公共样式--> |
|
|
<link href="../../../lib/css/basic.css" rel="stylesheet"/> |
|
|
<link href="../../css/google_safe.css" rel="stylesheet"/> |
|
|
<link href="../css/home.css" |
|
|
/ rel="stylesheet" type="text/css"> |
|
|
<script src="../../../lib/js/rem-layout.js"></script> |
|
|
<script src="../../../lib/js/mui.min.js"></script> |
|
|
<script src="../../../lib/js/vue.js"></script> |
|
|
<script src="../../../lib/js/app.js"></script> |
|
|
<script src="../../js/my/my_ajax.js"></script> |
|
|
<!--下拉刷新上拉加载js--> |
|
|
<script src="../../lib/js/mui.pullToRefresh.js"></script> |
|
|
<script src="../../lib/js/mui.pullToRefresh.material.js"></script> |
|
|
<!--下拉刷新上拉加载css--> |
|
|
<!--生成二维码--> |
|
|
<script src="../../../lib/js/qrcode.min.js"></script> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div id="data-info"> |
|
|
<header class="mui-bar mui-bar-nav"> |
|
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> |
|
|
<h1 class="mui-title">{{langue.title}}</h1> |
|
|
</header> |
|
|
<div class="mui-content"> |
|
|
<div class="mui-scroll"> |
|
|
<div class="google-code"> |
|
|
<div id="js-google-code" > |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="google-address-box"> |
|
|
<p>{{langue.googleText}}</p> |
|
|
<div class="google-address"> |
|
|
<span class="hash" id="hash">{{googleKey}}</span> |
|
|
<img src="../../../html/wallet/img/fuzhi.png" class="copy" id="copy"/> |
|
|
</div> |
|
|
<p>{{langue.googleVerificationCode}}</p> |
|
|
<div class="vcode" id='vertifycode'> |
|
|
<input type="tel" maxlength='6' ref='code' class='code' id='code' @focus='focus=true' v-model='code' |
|
|
@blur='focus=false'> |
|
|
<div class="labels"> |
|
|
<label class='label' for="code" :class='{active: focus===true && index===currentIndex}' |
|
|
v-for='item,index in length' v-text='arrCode[index]'> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="google-note "> |
|
|
<p> |
|
|
{{langue.attention}} |
|
|
</p> |
|
|
</div> |
|
|
<div id="verification" class="verification"> |
|
|
{{langue.verifyAndEnable}} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
<script> |
|
|
// 国际化 |
|
|
var langues = { |
|
|
zh_CN: { |
|
|
title: "绑定谷歌验证器", |
|
|
googleText: "谷歌验证文本", |
|
|
googleVerificationCode: "请输入谷歌验证码", |
|
|
attention: "注意事项：请妥善备份密钥以防遗失，若谷歌验证码丢失，请联系客服。", |
|
|
verifyAndEnable: "验证并启用 ", |
|
|
|
|
|
copySuccess: "复制成功", |
|
|
bindingSuccess: "绑定成功", |
|
|
googleVerificationCodeNotNull: "请输入正确的谷歌验证码", |
|
|
AjaxError: "网络异常，请检查网络状态" |
|
|
}, |
|
|
zh_HK: { |
|
|
title: "綁定谷歌驗證器", |
|
|
googleText: "谷歌驗證文本", |
|
|
googleVerificationCode: "請輸入谷歌驗證碼", |
|
|
attention: "注意事項：請妥善備份密鑰以防遺失，若谷歌驗證碼丟失，請聯繫客服。", |
|
|
verifyAndEnable: "驗證並啟用 ", |
|
|
|
|
|
copySuccess: "複製成功", |
|
|
bindingSuccess: "綁定成功", |
|
|
googleVerificationCodeNotNull: "請輸入正確的谷歌驗證碼", |
|
|
AjaxError: "網絡異常，請檢查網絡狀態" |
|
|
}, |
|
|
en_US: { |
|
|
title: "Bound Google Authenticator", |
|
|
googleText: "Google verification text", |
|
|
googleVerificationCode: "Please enter Google verification code", |
|
|
Attention: "Note: Please properly back up the key to prevent loss. If the Google verification code is lost, please contact customer service.", |
|
|
verifyAndEnable: "Verify and enable", |
|
|
|
|
|
copySuccess: "Copy is successful", |
|
|
bindingSuccess: "Binding succeeded", |
|
|
googleVerificationCodeNotNull: "Please enter the correct Google verification code", |
|
|
AjaxError: "Network exception, please check network status" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<script type="text/javascript "> |
|
|
var dataInfo = new Vue({ |
|
|
el: '#data-info', |
|
|
data: { |
|
|
langue: langues[app.getLanguageLocalStorage()], |
|
|
length: 6, |
|
|
googleKey: "", |
|
|
code: '', |
|
|
focus: false, |
|
|
excode:"otpauth://totp/flamex.io?secret=" //谷歌二维码key的前缀 |
|
|
|
|
|
}, |
|
|
computed: { |
|
|
arrCode: function () { |
|
|
return this.code.split(''); |
|
|
}, |
|
|
currentIndex: function () { |
|
|
return this.code.length; |
|
|
} |
|
|
}, |
|
|
watch: { |
|
|
code: function (newV, oldV) { |
|
|
var self = this; |
|
|
this.code = newV.replace(/[^\d]/g, ''); // 限制非数字 |
|
|
console.log(newV); |
|
|
} |
|
|
} |
|
|
}); |
|
|
//复制 |
|
|
document.getElementById('copy').addEventListener('tap', function () { |
|
|
var textForCopy = document.getElementById("hash").innerText; |
|
|
copyToClip(textForCopy); |
|
|
}); |
|
|
|
|
|
/** |
|
|
* 绑定谷歌认证器 |
|
|
* @param {Object} _code |
|
|
*/ |
|
|
function bingGoogle(_code) { |
|
|
plus.nativeUI.showWaiting("等待中...") |
|
|
mui.ajax(myAjaxJs.AJAX_BING_GOOGLE.getUrl, { |
|
|
headers: { |
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
|
}, |
|
|
data: { |
|
|
key: dataInfo.googleKey, //dataInfo.googleKey, |
|
|
code: _code |
|
|
}, |
|
|
type: myAjaxJs.AJAX_BING_GOOGLE.getType, //HTTP请求类型 |
|
|
dataType: 'json', //服务器返回json格式数据 |
|
|
timeout: 10000, //超时时间设置为10秒； |
|
|
success: function (data) { |
|
|
plus.nativeUI.closeWaiting(); |
|
|
if ("200" == data.code) { |
|
|
var user = app.getUserLocalStorage(); |
|
|
mui.toast(dataInfo.langue.bindingSuccess); |
|
|
user.bindGoogleAuth = true; |
|
|
app.setUserLocalStorage(user); |
|
|
// console.log(JSON.stringify(user)); |
|
|
mui.back(); |
|
|
var center = plus.webview.currentWebview().opener(); |
|
|
center.evalJS("saveUserInfoData();"); |
|
|
plus.webview.currentWebview().close(); |
|
|
} else { |
|
|
|
|
|
} |
|
|
}, |
|
|
error: function (xhr, type, errorThrown) { |
|
|
mui.toast(dataInfo.langue.AjaxError); |
|
|
plus.nativeUI.closeWaiting(); |
|
|
} |
|
|
}) |
|
|
} |
|
|
|
|
|
mui.init({ |
|
|
beforeback: function () { //获得父页面的webview |
|
|
var list = plus.webview.currentWebview().opener(); //触发父页面的自定义事件(refresh),从而进行刷新 |
|
|
mui.fire(list, 'refresh'); |
|
|
//返回true,继续页面关闭逻辑 |
|
|
return true; |
|
|
} |
|
|
}); |
|
|
|
|
|
/** |
|
|
* 获取google验证码key |
|
|
*/ |
|
|
function getGoogleKey() { |
|
|
mui.ajax(myAjaxJs.AJAX_GET_GOOGLE.getUrl, { |
|
|
headers: { |
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
|
}, |
|
|
type: myAjaxJs.AJAX_GET_GOOGLE.getType, //HTTP请求类型 |
|
|
dataType: 'json', //服务器返回json格式数据 |
|
|
timeout: 10000, //超时时间设置为10秒； |
|
|
success: function (data) { |
|
|
if ("200" == data.code) { |
|
|
console.log("11111"+JSON.stringify(data.data)); |
|
|
dataInfo.googleKey = data.data; |
|
|
// 生成二维码 |
|
|
var key = dataInfo.excode + dataInfo.googleKey; |
|
|
console.log(key); |
|
|
var qrcode = new QRCode(document.getElementById("js-google-code"), { |
|
|
width: 200, |
|
|
height: 200 |
|
|
}); |
|
|
qrcode.makeCode(key); |
|
|
|
|
|
} else { |
|
|
|
|
|
} |
|
|
}, |
|
|
error: function (xhr, type, errorThrown) { |
|
|
mui.toast(dataInfo.langue.AjaxError); |
|
|
} |
|
|
}) |
|
|
} |
|
|
|
|
|
mui.plusReady(function () { |
|
|
getGoogleKey(); |
|
|
|
|
|
}); |
|
|
|
|
|
// 验证 |
|
|
document.getElementById("verification").addEventListener("tap", function () { |
|
|
if (dataInfo.code == null || dataInfo.code == '') { |
|
|
mui.toast(dataInfo.langue.googleVerificationCodeNotNull); |
|
|
return; |
|
|
} |
|
|
// 和code |
|
|
bingGoogle(dataInfo.code); |
|
|
}); |
|
|
|
|
|
/** |
|
|
* 数据同步 |
|
|
*/ |
|
|
function synchrodataFun() { |
|
|
//“我的”首页 |
|
|
var walletMyView = plus.webview.getWebviewById("mine/html/wallet_my.html"); |
|
|
walletMyView.evalJS("saveUserInfoData();"); |
|
|
} |
|
|
|
|
|
/** |
|
|
* 复制到剪切板 |
|
|
* @param {Object} 要复制的值 |
|
|
*/ |
|
|
function copyToClip(value) { |
|
|
if (mui.os.android) { |
|
|
var Context = plus.android.importClass("android.content.Context"); |
|
|
var main = plus.android.runtimeMainActivity(); |
|
|
var clip = main.getSystemService(Context.CLIPBOARD_SERVICE); |
|
|
// 设置文本内容: |
|
|
plus.android.invoke(clip, "setText", value); |
|
|
} else { |
|
|
var UIPasteboard = plus.ios.importClass("UIPasteboard"); |
|
|
var generalPasteboard = UIPasteboard.generalPasteboard(); |
|
|
// 设置文本内容: |
|
|
generalPasteboard.setValueforPasteboardType(value, "public.utf8-plain-text"); |
|
|
} |
|
|
mui.toast(dataInfo.langue.copySuccess); |
|
|
// mui.toast("复制成功"); |
|
|
} |
|
|
|
|
|
// 国际化统一方法 |
|
|
window.addEventListener('switchLangueData', function (e) { |
|
|
dataInfo.langue = langues[e.detail]; |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</html> |
