万捷博客
简介
本实例用于演示，通过万捷网络验证给HTML/JS程序增加登录授权功能，并提供加密，让HTML/JS编写的程序可以进行销售，控制软件的版权，为软件的作者提供收益。
实现的原理：
根据网络验证的WebApi接口的要求，构造URL网址，然后访问网址，根据返回的内容控制程序流程。
用到的技术/接口：
1、（必须）需要用到URL访问的功能，通常表达为：网页访问、GET请求、POST请求、HTTP请求、cURL，用于访问构造的网址。
2、（非必须）字符串分割成数组的功能，用于将访问网址返回的内容分割成数组，根据实际需求来利用分割出的成员结果。
相关资料：
在线帮助文档（看 webapi接口说明）：https://www.wjsrs.com/h/
示例源码：
<html>
<!--
使用步骤：
第一步：请将以下代码复制黏贴到后台的 软件设置》WebApi 中，并保存。
function zdy_login($rjbh,$zh,$mm,$bb,$jqm,$yxh,$xxz){
$data=login($rjbh,$zh,$mm,$bb,$jqm,$yxh,'11,9');
return "var login_data= '".$data."';";
}
第二步：
根据实际情况，设置下面的基本信息。这里要注意了，接口地址填写发给你的完整服务器地址。
-->
<head>
<title>HTML/JS加万捷网络验证示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
/**基本信息设置**/
const appConfig = {
// 服务器地址，必填，购买时给你的完整的服务器地址，以/结尾
uri: "http://xxxxx.com/xxxxx/",
// 软件编号，必填
rjbh: "10001",
// 软件版本，必填
bb: "1.0",
// 机器码
jqm: "jqm"
};
/**
* 异步 - jsonp的方式获取数据
* @param {string} id 自定义ID
* @param {string} jsonpUrl 目标地址
* @param {string} attrName 属性名称
* @returns
*/
function getDataByJsonP(id, jsonpUrl, attrName) {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = jsonpUrl;
script.type = "text/javascript";
script.id = id;
script.onload = script.onreadystatechange = function () {
if (
!this.readyState ||
this.readyState === "loaded" ||
this.readyState === "complete"
) {
resolve(window[attrName]);
}
};
script.onerror = function (e) {
reject(e);
};
const headEl = document.querySelector("head");
const myIpEl = document.querySelector("#" + id);
if (!headEl) {
throw new Error("错误 - 文档中没有head标签");
}
if (myIpEl) {
myIpEl.remove();
}
headEl.appendChild(script);
});
}
/**
* 异步 - 登录
* @param {string} km 卡号
* @param {string} funName 方法名字
* @returns
*/
function login(km, funName = "zdy_login") {
return new Promise(async (resolve, reject) => {
try {
const params = `name=${funName}&c1=${appConfig.rjbh}&c2=${km}&c4=${
appConfig.bb}&c5=${appConfig.jqm}`;
const url = `${appConfig.uri }api.php?${params}`;
const loginData = await getDataByJsonP(
"xi_login",
url,
"login_data"
);
if (loginData.includes("Error")) {
reject(new Error(loginData));
} else {
// 处理返回的信息
const dataArr = loginData.split("<|>");
// 604786<|>1<|>1
resolve({ time: dataArr[0], qx: dataArr[1] ,err: loginData});
}
} catch (err) {
reject(err);
}
});
}
</script>
<!-- onload -->
<script>
yzjg = 0;//验证结果 1=登录成功 0=未登录成功 ,请在自己的功能函数中验证此变量，如果为0就返回
window.onload = async function () {
let km = "";
while (!km) {
km = prompt("请输入卡号", "");
if (!km) {
alert("卡号不能为空!");
} else {
try {
//const { time } = await login(km);
const data = await login(km);
if(data['qx']){
alert(`验证成功,到期时间[${data['time']}]`);
yzjg = 1;
}else{
alert(data['err']);
break;
}
break;
} catch (error) {
alert(error.message);
window.location.reload();
break;
}
}
}
};
</script>
</head>
<!--演示说明 开始 请在发布前 删除 演示说明 的代码-->
<script>
//在你自己的js功能代码中.像下面的演示函数一样，验证这个值， yzjg = 0 = 未登录成功 就返回，yzjg = 1 = 登录成功 再继续向下执行
function 假如这是你自己的函数(){
//在自己的重要JS函数中加入下面这一行代码，作用是验证未通过就刷新页面，不继续向下执行
if(yzjg != 1){alert("请登录。");window.location.reload();return;}//验证登录状态，若未登录成功则刷新页面并返回
//你自己的代码...................
//你自己的代码...................
//你自己的代码...................
//你自己的代码...................
}
//这样做的目的是因为，前面的验证结果在某些情况导致JS验证逻辑崩溃，未刷新页面，继续向下执行代码，跳过了验证的环节，所以需要在你自己的函数中再检测下是否已经登录
</script>
<!--演示说明 结束 请在发布前 删除 演示说明 的代码-->
</html>加密后的效果：
<meta charset='utf-8'><script>
document.write(function(a) {
a = unescape(a);
var c = String.fromCharCode(a.charCodeAt(0) - 1);
for (var i = 1; i < a.length; i++) {
c += String.fromCharCode(a.charCodeAt(i) - c.charCodeAt(i - 1))
}
return decodeURIComponent(c)
} ('%26Xv%AB%DC%E1%D9%91XxjUtiUqfXvhWc%5EZRUtiUqfjwW%5Eq%5D%5Dmgbbdccbi%5EjyYg%7B%5E%5DzgjzZ%5Dq%5E%5D%7Cij%7D%5DgvYf%85ijyYg%7B%5EgrUj~%5Ef%82f%5D%7Bhj%7D%5Df%87k%5DiVj%7C%5CguXg%84gj%7C%5Cg%84g%5E%7Fkj%7C%5C%5Ezf%5DlYj%7C%5C%5EmYfy%5Dj%7B%5B%5Dp%5Dgy%5Cj%8Bkg%85h%5D%7Bhj%7D%5Df%87kgy%5Cj%7D%5D%5DiV%5EmYj%7C%5CguXg%84gj%7C%5Cf%86jfrVj%7C%5C%5EiU%5Dn%5BjzZ%5EjV%5Eq%5Dj%7B%5B%5E%7BggvYj%7B%5B%5Eo%5Bgr%99%D9%DA%DD%E2%DD%9C%9E%D8%D8%95j%7B%5B%5Eo%5B%5Do%5CjyYg%84ggx%5BjzZ%5EiU%5D%7DjjzZ%5Dn%5B%5D%7Cij%7B%5BgwZ%5Dzgj%7D%5Df%87k%5EnZj%8Bkg%85h%5D%7BhjzZ%5EiUfw%5BjzZ%5Dp%.........
