JingYun
/
Site_Tools


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AES CBC Encryption and QR Code Generation</title>
    <script src="./crypto-js.min.js"></script>
    <script src="./qrcode.min.js"></script>

    <style>
        html,
        body {
            width: 100%;
            height: 98%;
            margin: 0;
            padding: 0;
            text-align: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <h1>AES CBC Encryption and QR Code Generation</h1>
    <input type="text" id="userName" placeholder="User name">
    <br>
    <input type="text" id="password" placeholder="Password">
    <br>
    <br>
    <button onclick="encryptAndGenerateQR()">Encrypt & Generate QR Code</button>
    <br>
    <br>
    <div style="width: 100%; display: flex; justify-content:center">
        <div style="width: 256px; height: 256px; border: 1px solid black; padding: 2%;" id="qrcode"></div>
    </div>


    <script>
        var key = CryptoJS.enc.Utf8.parse("A123061230612306"); // 密钥
        var iv = CryptoJS.enc.Utf8.parse("0000000000000000"); // 固定的IV，16个字符0

        function encryptAndGenerateQR() {
            var plaintext = "u_name@"
                + document.getElementById("userName").value
                + ";"
                + "u_password@"
                + document.getElementById("password").value
                + ";";
            console.log("plaintext: " + plaintext);

            while (document.getElementById("qrcode").firstChild) {
                document.getElementById("qrcode").removeChild(document.getElementById("qrcode").firstChild);
            }

            // 加密
            var encryptedText = encrypt(plaintext, key, iv);
            generateQRCode(encryptedText);
            console.log("Encrypted text: " + encryptedText);

            // 解密
            var decryptedText = decrypt(encryptedText, key, iv);
            console.log("Decrypted text: " + decryptedText);
        }

        function encrypt(plaintext, key, iv) {
            var cipherText = CryptoJS.AES.encrypt(plaintext, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
            return cipherText.toString();
        }

        function decrypt(ciphertext, key, iv) {
            var decryptedBytes = CryptoJS.AES.decrypt(ciphertext, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
            return decryptedBytes.toString(CryptoJS.enc.Utf8);
        }


        function generateQRCode(data) {
            var qr = new QRCode(document.getElementById("qrcode"), {
                text: data,
                width: 256,
                height: 256,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }

    </script>

</body>

</html>