Encryption works best if it is ubiquitous and automatic. It should be enabled for everything by default, not a feature you only turn on when you’re doing something you consider worth protecting. - Bruce Schneier, Cryptographer, Privacy and Security Specialist
Imagine that you have a sum of money (let's say 500$), you are in a store in the suburbs with lots of unkind people around you and your only friend asks you how much money you currently have. We'll assume that if anyone besides your friend hears you say out loud "500$", they'll rob you instantly. So, how do you tell your friend how much money do you have?
That's where encryption comes in - you define a specific communication channel (let's say hand gestures) and with one hand you display a high-five ✋ (meaning a 5), with the other hand the ok-sign 👌 (meaning that you multiply the previous with 100), you clap your hands 👏 (meaning that you are talking cash) and then you point the finger at him 👉 (meaning that you are sending the encrypted message). Your friend understands your sign language (decrypts and reads the message) and waves an ok-sign 👍 (meaning that he understood the message) then points the finger at you 👈 (sends an encrypted response back). The others don't understand what you two are communicating, so they get on with their lives.
 |
MainPage.xaml: User interface implementation consisting of 3 TextBlocks, 3 TextBoxes and 3 Buttons. MainPage.xaml.cs: Backend implementation consisting of 3 methods used for handlind the click events of each of the 3 buttons. SymmetricEncryption.cs: Implementation of a basic encryption and decryption capability which I will detaliate below. |
Besides the elements and attributes you already know, in this example we will make use of the StackPanel, TextBox and Button XAML elements. We will also learn how to create tables using column and row definitions.
We can create rows and columns using the <RowDefinition> and <ColumnDefinition> tags inside (and only inside) the <Grid.RowDefinitions> tag. We the specify the width and height we want for our columns and rows. If we specify the * symbol after a number, then that column will strech to fit the grid's maximum width/height.
The StackPanel element is used in this context to proper align the elements without that much of a headache. This element behaves just like a stack in which you can specify an Orientation for your data.
We use the TextBox element to collect the information we want to encrypt from the user but also to display the encrypted an decrypted data via the IsReadOnly attribute. In order to manipulate the data from the user interfaces in the backend, we need to specify a variable name to the current textbox. We do that by assigning a unique name to the x:Name attribute (more about XAML namespaces here).
The Margin attribute is used to externally align the current element within the parent element and the Padding attribute is used to internally align the current child elements within the current element.
The Button element is used to invoke an action (delegate an event - more on this soon 😎) so that the application can begin encrypting/decrypting the input data. To specify which method is executed when the user presses the button, we will set the Click attribute with the name of the method we want to call (the method must exist within MainPage.xaml.cs file).
The readonlykeyword is used in this context to specify that the encryptionProvider variable should and can only be assigned in the constructor unlike the const keyword, which forces the developer to instantiate/assign the variable at declaration.
To display a pop-up style notification in the UI, we use an instance of the MessageDialog class. We then call the ShowAsync() method and await its termination using the async/await concept in C# (more on this soon 😎).
Encrypt_Button_Click() - This method is called when the user presses the Encrypt button in the UI. All this method does, is to the pass message we want to encrypt to the SymmetricEncryption class (which is viewed in this context as a service - more on this soon 😎).
Decrypt_Button_Click() - This method is called when the user presses the Decrypt button in the UI. All this method does, is to the pass message we want to decrypt to the SymmetricEncryption class.
Reset_Button_Click() - This method is called when the user presses the Reset button in the UI. All this method does, is to put the UI in the original state before encrypting/decrypting text without having to restart the app.
All the encrypting algorithms are based on pure, hardcore mathematics. The algorithm we will use in this exampl is the Advanced Encryption Standard (AES) algorithm coupled with an electronic codebook (ECB) mode of operation and PKCS#7 padding. If you want to learn more about cryptography and how it works you can check this resource.
I've adapted the current example in a way that you can use any algorithm you want that is provided by the SymmetricAlgorithmNames class and whether to persist the encryption to disk or keeping it in RAM. The Encrypt() and Decrypt() methods have been adapted as well to no longer require to include a certain assembly in a class that doesn't need to expose the encryption service.
We are now ready to build, deploy and run our app. We go to Debug > Start debugging or press F5 on our keyboard. After it builds and deploys successfully, you should see the following window pop-up
As you may have observed, a bit of C# coding knowledge is required in order to create a basic encrypting/decrypting app in the Universal Windows Platform. For a better understanding of how powerful the C# language really is, you can check out this repository full with basic C# projects. If you want to go deeply into advanced C# topics, you can check out this repository (will be created soon 😎)
So there you have it, a basic encrypting/decrypting UWP app. Stay tuned on this blog (and star the microsoft-dx organization) to emerge in the beautiful world of "there's an app for that".
Adapted from: msdn.microsoft.com