Error with CryptoJS in ASP.NET Core Application - Can't find variable: CryptoJS

Question

I'm trying to used CryptoJS to encrypt the login username and password, I always getting the error Can't find variable: CryptoJS, Here's the steps that I follow:

1. Include the ads.js file in js folder in wwwroot directory.

2. Include AESEncryption.cs to the project.

3. added <script src="~/js/aes.js" type="text/javascript"></script> to the end of _Layout.cshtml page.

4. Using the following function in Index.cshtml

   <script type="text/javascript">
   
   function CheckData()
   
   {
       var txtUserName = $('#Username').val();
       var txtpassword = $('#Password').val();
   
       if (txtUserName == "") {
           alert('Please enter UserName');
           return false;
       }
       else if (txtpassword == "") {
           alert('Please enter Password');
           return false;
       }
       else {
   
           var key = CryptoJS.enc.Utf8.parse('8080808080808080');
           var iv = CryptoJS.enc.Utf8.parse('8080808080808080');
   
           var encryptedlogin = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(txtUserName), key,
               { keySize: 128 / 8, iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
           $('#Username').val(encryptedlogin);
   
           var encryptedpassword = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(txtpassword), key,
               { keySize: 128 / 8, iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
           $('#Password').val(encryptedpassword);
       }
   }
   

I always getting Can't find variable: CryptoJS

This is a sample application that contain the problem HERE

Answer 1

I use the following aes.js,and it can work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>

Here is a demo:

<input id="Username" />
<input id="Password" />
<button onclick="CheckData()">check</button>
@section scripts
{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
    <script>
        function CheckData() {
            var txtUserName = $('#Username').val();
            var txtpassword = $('#Password').val();

            if (txtUserName == "") {
                alert('Please enter UserName');
                return false;
            }
            else if (txtpassword == "") {
                alert('Please enter Password');
                return false;
            }
            else {

                var key = CryptoJS.enc.Utf8.parse('8080808080808080');
                var iv = CryptoJS.enc.Utf8.parse('8080808080808080');

                var encryptedlogin = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(txtUserName), key,
                    { keySize: 128 / 8, iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
                $('#Username').val(encryptedlogin);

                var encryptedpassword = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(txtpassword), key,
                    { keySize: 128 / 8, iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
                $('#Password').val(encryptedpassword);
            }
        }
}

result: