<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="hex_hmac_sha1.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.css"> -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1796094_4zoaryp2io2.css">
<link rel="stylesheet" href="aliyun_mqtt.css">
</head>
<body>
<div id="particles-js"></div>
<style type="text/css">
#particles-js {
z-index: 0;
position: absolute;
top: 0;
height: 100%;
width: 100%;
background: #2c3e50;
}
</style>
<input type="checkbox" id="check">
<label for="check">
<i class="iconfont iconbars" id="btn"></i>
<i class="iconfont" id="cancel"></i>
</label>
<div class="sidebar">
<header class="iconfont iconwulianwang">Dapenson</header>
<ul>
<li><a href="https://www.cnblogs.com/dapenson" target="_blank"><i class="iconfont iconblog"></i>Dapenson Blog</a></li>
<li><a href="https://x223222981.gitee.io/navigation_page/" target="_blank"><i class="iconfont iconnavigation"></i>Navigation</a></li>
<li><a href="https://223222981.github.io/MQTT-Token-Get/onenetToken" target="_blank"><i class="iconfont iconmqtt"></i>Onenet MQTT</a></li>
<!-- <li><a href="#"><i class="iconfont fa-calendar-week"></i>Events</a></li>
<li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
<li><a href="#"><i class="iconfont fa-sliders-h"></i>Services</a></li>
<li><a href="#"><i class="far fa-envelope"></i>Contact</a></li> -->
</ul>
</div>
<section class="section"></section>
<div class="container">
<h1>阿里云IOT接入</h1>
<h3>你的阿里云物联网信息:</h3>
<input class="tbx" type="text" id="productKey" name="productKey" placeholder="productKey"></input>
<input class="tbx" type="text" id="deviceName" name="deviceName" placeholder="deviceName"></input>
<input class="tbx" type="text" id="deviceSecret" name="deviceSecret" placeholder="deviceSecret"></input>
<input class="tbx" type="text" id="clientId" name="clientId" placeholder="clientId(任意) "></input>
<input type="text" id="timestamp" name="timestamp" style="visibility:hidden"></input>
<!--method:默认使用hmacmd5 -->
<select id="signMethod" name="signMethod" style="visibility:hidden">
<!-- <option value="hmacmd5">hmacmd5</option> -->
<option value="hmacsha1" selected>hmacsha1</option>
</select>
<button class="sub" id="onSign" name="onSign" onclick="onSign()"><b>一键生成接入信息</b></button>
<br>
<h3>MQTT接入信息:</h3>
<input class="tbx" type="text" id="mqtt_url" name="mqtt_url" placeholder="URL"></input>
<input class="tbx" type="text" id="mqtt_port" name="mqtt_port" placeholder="port"> </input>
<input class="tbx" type="text" id="mqtt_clientid" name="mqtt_clientid" placeholder="clientID"></input>
<input class="tbx" type="text" id="mqtt_name" name="mqtt_name" placeholder="Username"></input>
<input class="tbx" type="text" id="password" name="password" placeholder="password"></input>
<h3>HTTP接入信息:</h3>
<textarea class="tbx" type="text" id="https_info" name="https_info" placeholder="设备认证"></textarea>
</div>
</body>
<script>
function onSign() {
var pk = document.getElementById("productKey").value;
var dn = document.getElementById("deviceName").value;
var ds = document.getElementById("deviceSecret").value;
var ts = document.getElementById("timestamp").value;
var ci = document.getElementById("clientId").value;
var sm = document.getElementById("signMethod").value;
var pw = document.getElementById("password");
var url = document.getElementById("mqtt_url");
var port = document.getElementById("mqtt_port");
var id = document.getElementById("mqtt_clientid");
var name = document.getElementById("mqtt_name");
var hp = document.getElementById("https_info");
if (pk == null || pk == "" || dn == null || dn == ""
|| ds == null || ds == "" || ci == null || ci == "") {
alert("productKey,deviceName,deviceSecret,clientId 不能为空");
return;
}
var options = {
productKey: pk,
deviceName: dn,
timestamp: ts,
clientId: ci
}
if (ts == null || ts == "") {
options = {
productKey: pk,
deviceName: dn,
clientId: ci
}
}
var keys = Object.keys(options).sort();
// 按字典序排序
keys = keys.sort();
var list = [];
keys.forEach(function (key) {
list.push(key + options[key]);
});
var contentStr = list.join('');
var sign = "";
if (sm == "hmacmd5") {
sign = hex_hmac_md5(ds, contentStr);
} else if (sm == "hmacsha1") {
sign = hex_hmac_sha1(ds, contentStr);
} else {
alert("method is invalid");
}
pw.value = sign.toUpperCase();
url.value = mix('${YourProductKey}.iot-as-mqtt.cn-shanghai.aliyuncs.com', { YourProductKey: pk });
port.value = mix('${port}', { port: 1883 });
id.value = mix('${clientID}|securemode=3,signmethod=hmacsha1|', { clientID: ci });
name.value = mix('${YourDeviceName}&${YourProductKey}', { YourDeviceName: dn, YourProductKey: pk });
hp.value = mix('"{\\"clientId\\":\\"${clientID}\\",\\"signmethod\\":\\"hmacsha1\\",\\"sign\\":\\"${sign}\\",\\"productKey\\":\\"${YourProductKey}\\",\\"deviceName\\":\\"${YourDeviceName}\\"}"', { clientID: ci, sign: pw.value, YourProductKey: pk, YourDeviceName: dn });
}
function mix(str, group) {
var reg = /\$\{[^{}]+\}/gm;
var strArr = str.split(reg);
var labelArr = str.match(reg);
var returnString = '',
i = 0,
label, len = labelArr.length;
for (; i < len; i++) {
label = labelArr[i].slice(2, -1);
returnString += strArr[i] + (group[label] != null ? group[label] : '');
}
return returnString + strArr[i];
}
document.onkeydown = function (e) { // 回车提交表单
// 兼容FF和IE和Opera
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
onSign();
}
}
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#6dedff"
},
"shape": {
"type": "edge",
"stroke": {
"width": 0,
"color": "#6dedff"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": 1,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 10,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#6dedff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": 1,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"line_linked": {
"opacity": 0.75
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#2c3e50",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
)
</script>
</html>