x223222981-aliyunMQTTPasswordGet
/
onenetToken.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Onenet Token Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #007bff;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        textarea,
        input[type="date"],
        select,
        button {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
            font-size: 16px;
        }

        button {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        textarea[readonly] {
            background-color: #f8f9fa;
            color: #555;
        }
    </style>
</head>


<body>
    <div class="container">
        <h1>Onenet Token Generator</h1>
        <div>
            <label for="version">参数组版本号:</label>
            <textarea readonly id="version" rows="1" cols="50">2018-10-31</textarea>
        </div>
        <div>
            <label for="resourceName">访问资源:(产品ID 和 设备名)</label>
            <textarea id="resourceName" rows="2" cols="50">products/xxxxxxxxxx/devices/xxxxxxxx</textarea>
        </div>
        <div>
            <label for="expirationDate">访问过期时间:</label>
            <input type="date" id="expirationDate" value="2035-12-01">
        </div>
        <div>
            <label for="signatureMethod">签名方法:</label>
            <select id="signatureMethod">
                <option value="md5" selected>md5</option>
                <option value="sha1">sha1</option>
                <option value="sha256">sha256</option>
            </select>
        </div>
        <div>
            <label for="accessKey">设备密钥:</label>
            <textarea id="accessKey" rows="3" cols="50">WktRWDRxxxxxxxxocDJ5dmcwNlhoTVo5WmFwSE5PQXU=</textarea>
        </div>
        <div>
            <button onclick="generateToken()">Generate Token</button>
        </div>
        <div>
            <label for="token">Token:</label>
            <textarea id="token" rows="3" cols="50" readonly></textarea>
        </div>
        <div>
            <label for="mqttInfo">MQTT Info:</label>
            <textarea id="mqttInfo" rows="5" cols="50" readonly></textarea>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    <script>
        function generateToken() {
            var version = document.getElementById("version").value;
            var resourceName = document.getElementById("resourceName").value;
            var expirationDate = document.getElementById("expirationDate").value;
            var expirationTime = Date.parse(expirationDate) / 1000;
            var signatureMethod = document.getElementById("signatureMethod").value.toLowerCase();
            var accessKey = document.getElementById("accessKey").value;

            var token = assembleToken(version, resourceName, expirationTime, signatureMethod, accessKey);
            document.getElementById("token").value = token;

            let mqttClientID = resourceName.split('/')[3];
            let mqttUsername = resourceName.split('/')[1];
            let mqttPassword = token;
            var mqttInfo = "Host: mqtts.heclouds.com\nPort: 1883\nClient ID: " + mqttClientID + "\nUsername: " + mqttUsername + "\nPassword: " + mqttPassword;
            document.getElementById("mqttInfo").value = mqttInfo;
        }

        function assembleToken(version, resourceName, expirationTime, signatureMethod, accessKey) {
            var res = encodeURIComponent(resourceName);
            var sig = encodeURIComponent(generatorSignature(version, resourceName, expirationTime, accessKey, signatureMethod));
            var token = "version=" + version + "&res=" + res + "&et=" + expirationTime + "&method=" + signatureMethod + "&sign=" + sig;
            return token;
        }

        function generatorSignature(version, resourceName, expirationTime, accessKey, signatureMethod) {
            var encryptText = expirationTime + "\n" + signatureMethod + "\n" + resourceName + "\n" + version;
            var key = CryptoJS.enc.Base64.parse(accessKey);
            var hmac;
            if (signatureMethod === "sha1") {
                hmac = CryptoJS.HmacSHA1(encryptText, key);
            } else if (signatureMethod === "sha256") {
                hmac = CryptoJS.HmacSHA256(encryptText, key);
            } else if (signatureMethod === "md5") {
                hmac = CryptoJS.HmacMD5(encryptText, key);
            } else {
                throw new Error("Unsupported signature method");
            }
            var signature = hmac.toString(CryptoJS.enc.Base64);
            return signature;
        }
    </script>
</body>

</html>