How We Made ESPR
Step 1: A working Program
The first step to creating ESPR encryption was making the JavaScript portion of the code. Originally, the plan was to use a type of object called a dictionary to store the encryption values of each individual character. Due to this, we the creators would have no knowledge of an individual's cypher key; the code was made to randomize each character's encryption each time the code was run. To make the randomizer, we created a function that took a string of every character possible and created a new string with a random length that selected from the previous string at random. This resulted in the issue of a new password being generated every time we ran the program. In order to solve this problem, we sent the values of the dictionary to an array called "cyphArray," later renamed "key". This array was immutable, so we didn't have to worry about passwords changing after being generated. The final portion of the JavaScript code combined everything prior, and employed the use of a while-loop and a for-loop to take the user's input and retrieve the information from the array to concatenate into the new and encrypted password.
Step 2: The Login System
With the base of the program functioning properly, we then wanted to make sure that it could only be accessed by logging in first. However, we did not have a website to test in the first place. After many hours of research, we found an application called XAMPP that would allow us to host a local website that we could use to test run our login system. In order to put something on the page, we would open our internet browser and then type the address, which would be "localhost/(location of file on computer)".
The XAMPP Control Panel
Apache is what runs the .php files to make our local website, and MySQL runs the local database
This would open up the registration page
When making a login system, we need a place where the user can sign up. So, the first page we worked on was the registration page. When making a page for a website, you use a file type called php, which is basically HTML, the foundation for any website, but you can also add code. However, I did not know how to code in php. So I did some research and followed some basic php tutorials to help me form the necessary code I needed.
The registration page
So now that we made a registration page, we needed to add the ability to actually log in, meaning we needed a place where that information could be stored, like a database. This can be done using a database server called MySQL. The MySQL database can connect to the website by adding some php code into the register.php file.
This code takes what the user inputs in the Registration page, and uploads it to a local MySQL Database called "user_database" under a table called "users." It has some checks to make sure that you can't make duplicate accounts, and that the password has at least 6 characters.
Once a user successfully creates an account, their login credentials are uploaded to the database to reuse when they try to login. Note that the password becomes encrypted by the program using a "password_hash" function before being shown in the database, so we can't even decypher it.
In addition, when an account is created, a randomly generated key is created in the "cyph" column. This is used later on to help create the encrypted passwords when running ESPR.
This is a sample database with a table called "users" created when test running the login system. Most of the accounts didn't get a "cyph" until later since I hadn't added it yet.
With everything in place and running, after the user successfully creates an account and goes to the login page to login using their email and password, the program will check to make sure the credentials match what's in the database, and if true, brings them to our welcome page, where they can use ESPR to their heart's content. When they are finished, they can click the log out button to bring them back to the login page.
The login process
Step 3: Combining The Two
This process was a bit tricky. Since we had ESPR working on a standalone basis, meaning it would create secure passwords with words and remember it, we had to bring that over to work with the login system. The original plan was to have a randomly generated key that would be used by the ESPR program to create the secure passwords, but the problem with that was it would change the key every time the user logged in, resulting in the ESPR-created passwords not matching up to the word used every time. So, we made a work around where, once the user created their account successfully, the randomly generated key would be created at that moment and be uploaded to the MySQL database under the account created.
Under the "cyph" column is where the key used to create secure passwords is located and used by the ESPR program
With the "cyph" key now stored in the database, the ESPR program could then access it from the database, and use it to create the secure passwords you use when typing in words like "dog." However, before getting the "cyph" key from the database, the program would check to make sure that the correct user was logged in. If they weren't, it would be immediately redirected back to the login page. In addition, if you logged out and logged back in, and typed "dog" into ESPR again, you would get the same secure password as before, meaning you only had to remember the word "dog" in order to get your impossible to crack password!
This is how ESPR gets the user-specific "cyph" key from the MySQL database
And with that, ESPR is complete!