Secure Sensitive Information in #dotnetmaui App

hello everyone and welcome back to another video in Tottenham movie tips and tricks series in today's video we are going to see how we can hide and protect sensitive data in our mobile application from prying eyes there are two issues or problems that we will try to resolve over here to demonstrate this I have created this beautiful looking banking application which you can see on the screen it is running on both IOS as well as Android emulators so you can see that I have a huge balance of 87 500 which is by no means by real balance but just for demonstration purposes and I have spent around twelve thousand eight hundred dollars this month across different expenses so let me demonstrate a problem to you so problem number one let us say I am sitting in a public place and I leave my mobile unlocked on a table and I step away for a few seconds or few minutes now similarly what if I am in a team's call let me just demonstrate over here in in Android first so let us say I'm in a team's call and maybe I need to share my screen and I'm sharing my screen in the team's call and I need to go to a particular application to show so the moment I go to my task manager or the Windows Manager even on iOS you can see it is going to show this with the actual image it is going to show you what is there in the current application at the moment now this might be a bit embarrassing what if you have a small balance or you have a significantly high balance and you do not want anyone to see so this is the first problem that we want to tackle so ideally what should happen is the moment we go to the task manager this information should be hidden no one should be able to say this same over Android when we go over here this information should be hidden from the users this is problem number one so let us try to see how we can fix this so let's get back to visual studio for now and I have prepared this Bank application it's a very simple application all I have is a main page where I have created this beautiful bag screen with the help of an image I admit I have cheated I did not want to create the whole screen over here so I have just pasted an image I am displaying that image on the screen other than that the only other thing I have done is since I am not a huge fan of application shell so I have gone to to the app.xaml and instead of going to the app shell I'm going directly or navigating directly to main page the one that we just saw that's it and additionally I have created two pages one called not authorized page which is a simple page it is simply displaying a label saying I am not showing you my balance and then another page called need authorization page or need authentication page where I am displaying a simple message saying that we need to authenticate you first this is something which is related to the second problem which I will come to so let's start with our mavi program so this is the Maui program strangely Visual Studio is behaving very orderly today all right so this is a plain vanilla application so what we are going to do we are going to configure some life cycle events to hide this information whenever the application goes in the background or it is not visible on the screen we need to hide this information so for this we are going to tap into life cycle events there are two ways you can do this either you can go to the platforms folder in Android you can write this code in your main activity or in iOS you can write it in the app delegate it's totally up to you for me I find it more convenient to put everything in mavi program dot CS file because that is where I can uh see everything in place so to start with what we are going to do we are going to bring in the namespace which is microsoft.movie.livecycles so let me bring it over here and then we are going to configure the lifecycle events so after our add fonts or configure fonts I can go and I can say configure life cycle events and this is where I'm going to configure some events both for Android as well as for iOS let me start with Android first because Android is a bit simpler so let me bring in another namespace I'm going to use conditional compilation to say if I'm running it on Android then bring in using android.views and once I have done that I am going to bring in again using conditional compilation I am going to bring in a life cycle event sync if I'm running on Android then what happens is I need to add two events on Android one the first event is on pause let me just scroll a bit so first event is on pause on pause is whenever the application is paused or goes into the background then this is the code that I'm going to run and the second event is on resume whenever the application resumes or comes to the foreground this is the code that I need to run so on pausing the application an Android application all I'm doing is I'm saying on my current activity dot window dot set Flags I am sending Windows managerflags dot secure as per the definition you need to pass this slack two times so all this is doing the moment the application goes into the background it is going to go to the active window and it is going to set the flag to secure which means it is going to hide this information and when we resume the application I am going to clear the same flag so I'm just saying activity dot window clear Flags secure Windows Manager flag so I'm just clearing this flag this is all we are doing that's all we need to do for Android now let me just run this application and show it to you in action so here we go our application is launching now now let me do something let me go back to the home and let me go to the task manager again you see over here now the whole application screen which was earlier visible my my bank balance that has not disappeared it is showing as white screen so this is one way you can protect your information so whenever you go to the task manager you will not be able to see the information which is the right thing to do whenever we have some sensitive information on the screen this is for Android now let me do the same thing for iOS for iOS we are going to do exactly the same thing we are going to use conditional compilation so for this let me bring in the namespace which is UI kit so I'm saying if it is running on iOS then I'm going to use UI kit and the code for this is little bit more involved by the way in Android there was only or at least to the best of my knowledge there is only one option which we can see over here which we set which hides the information by just displaying a white screen on iOS fortunately we have many more options there are three at least which I am aware of one is the very similar way where we can just display a blank screen in any color that is option number one similar to what we are seeing here in Android option number two is instead of a blank screen we can show a static image or let's say your application logo that is option number two and the option number three which I prefer and what I will demonstrate to you today is it can it will show you the actual image or the actual screen but it will blur out the information this to me is much more elegant way there might be more options that I am not aware of so let me go and paste in some code for iOS now IOS as I mentioned it is a little bit more involved so here what we are doing we need to tap into a couple of life cycle events one is on resign activation this is the code which will run the moment your application goes into the background and the other is on activated and this is the code which is going to execute the moment your application comes back into foreground no it's pretty simple I know the code seems a bit too much but let me explain it's very simple so all I'm doing I'm just creating a UI visual effect view a blur window setting it to null to start with and then on the resign activation event all I am doing I'm just creating this blur window so the way I am creating this blur window is I'm click creating a blur effect first of all with the style of dark blur effect style and then I am creating a blur window with the current bounds of the current frame so if I go to my iOS application let me go over here so these are the full bounds of the current frame so what I am doing I'm creating a new blur window with this blur effect with the whole frame in picture so I'm saying UI application dot shared application.key window.root root view controller Dot View dot bounds and I'm applying this blur effect to it which is the dark blur effect and then once I have created this blur window I am saying that just set the current window to this blur window that we have created so we are imposing this blur window on top of our current window so we are adding a sub view on top of our current window and similarly when we are reactivating the application all we are doing is we are just checking if the blur window is not null that is it has already been applied we are removing it from the super view so earlier we added this sub View and now we are removing it from the main window and when then we are disposing it so let us run this and see it in action so I'm going to just run this on iOS now the application is launching now do you see the moment I try to go to the background let me just put this in the background and even if I go to the window manager you see we see the actual image of our application but you cannot see any information in it all the information has been blurred out this to me is much better way but the moment you click on it it comes to the foreground that is when the second piece of code on activation is going to run and it is going to remove the blur window or the blur effect from the main window so this was problem number one now problem number two is let me just go back and good we have solved this problem that is fine when you are sharing your screen or maybe you wanted to show you show some photos to your colleague or your friend and you were just holding your phone in front of him and you go to the task manager excellent you have hidden the information but what if take this example I leave my phone on the desk let's say I'm sitting in a restaurant or I am you know in my workplace I leave my device unlocked on the desk and someone just goes opens this window and say there is a button over here this one which is going to transfer the money to some other account so someone can simply come over here click on this button enter fifty thousand dollars enter their bank account information and boom money is transferred from my bank account to that person's bank account so how can we protect like this so the way we can handle this is using fingerprint or face ID lock or in simple words biometric authentication in the application itself so which means the moment the application comes into the foreground it will ask you to authenticate using either the fingerprint or your face ID depending on what you have available on your device for this we are going to make use of like fingerprint plugin so let me actually go and add this fingerprint plugin so manage new get packages I'm going to search for plugin Dot fingerprint so here we have got plugin dot fingerprint which has come up now in this particular case since I'm using dotnet Maui version I'm going to go to pre-releases and I'm going to use the version 3 beta1 so I'm going to add this package to my application now for this to work there are a couple of additional things we need to do we need to let our Android okay so let me accept this we need to tell both our Android as well as iOS application that we are going to make use of either the fingerprint scanner or the face ID on the mobile devices so for this we will need to go to the platforms I am going to go to Android manifest in fact let me edit this in code editor and I'm going to include a new permission which is use Biometrics so I'm going to just bring it over here so you can say use permission and the permission name is Android dot permissions dot use by matrix you can also do the same if you want you can go over here and then in the permissions you can go and find this over here it's called yeah use biometric so this is for Android the same thing you need to do for iOS for iOS you will need to go to the info plast and you need to add this over here now what I'm going to do I am going to just switch to or I'm going to edit this in let's say Visual Studio code and I'm going to add a couple of lines to this so at the very end just before ending of the dictionary I'm going to add in NS face ID usage description and I'm just going to give a description that we need to access the face ID for authentication so let me save this close this now if I open my info.plist you can see it says privacy face ID usage description rather than doing that you could actually have you know just clicked on a new add new entry and you could have selected this as well so this is the setup part now an additional thing that you will need to do is on Android if you go back to our life cycle events you need to add this to oncreate event as well so you will need to specify that whenever the activity is created on Android I am going to use CrossFit cross platform fingerprint reader and you are going to set the current activity resolver to the current activity now one of the things unfortunately I will not be able to demonstrate it running on Android because at the moment there is a bug in the library and it crashes on Android so there are a lot of people who have complained about this to the author let's hope that the author will fix this very soon so that's all for the mavi program for now but we will demonstrate this for iOS at least so to to do this what I'm going to do I'm going to go to my app.xaml and here I am going to override on resume so I'm going to overwrite the on resume function for my application and what I am going to do I am going to say let me bring in a bit of code over here first so we do not need the base dot on resume instead I am going to bring in so I'm going to say where authentication request is equal to let me put everything in different lines so we can see it properly so I'm just creating a new request of type new authentication request configuration which is coming from fingerprint plugin dot fingerprint the nuget package that we just brought in and we are giving it a header saying are you authorized let me correct the spelling and then just a friendly message saying that we need to ensure that it is really you before proceeding and the result we are going to store it back in our authorization result so let me just run this code on iOS we are not doing anything with it yet so it is saying there is an error ah because we are using a weight so we need to use async so let me run this so at the moment I'm just asking for the permission and storing the result in a variable called auth result I'm not making use of this result as yet so let's say the application is running I go to the background and now if I either bring it back from my task manager or by clicking the application you see the information in the background is blurred and it is giving us a message do you want to allow this application to use the face ID and this is the description that we gave in the info dot P list need access to face ID for authentication and if we say don't allow then it will not allow us so if I say ok now it is waiting for my face to be authenticated now when since we are running it in Android what we can do is let me put a sorry in iOS I'm going to put a breakpoint over here and I'm going to go to face ID and I'm going to return it matching face so see what happens when I say matching face the auth result comes back as authenticated as true right let me just run this again this time I'm going to give it a wrong face and then we are going to get back false so let me close this application not close this this time I'm going to launch it from the home screen itself and I go to face ID and I'm going to say non-matching face and it says face not recognize we can try again if I say try again it will keep on trying until the time you say cancel this time around it is going to come back with authenticated as false now since we have this result we can do something with it so what do we want to do for this we are going to say if it is not authenticated so if saying auth request result dot authenticated sorry auth result so if we are not authenticated we are going to do something else if we are authenticated we are going to do something else so what are we going to do if we are not authenticated for this I am going to use a bit of a trick over here let me show that to you and I will explain what does that mean so I'm going to create a private variable over here where I'm going to save the current page the user is on at this stage or at this moment you can see we only have one page which is which is the main page but imagine you have 10 different pages in your application and depending on where the user is coming back to you want to make sure that you are using that particular or you are showing that particular screen to the user and not anything else you do not take the user back to the very first screen so at the moment I'm just setting the current user page as null and what I am going to do is before I start I am going to set the I am going to set the sorry before that over here what I'm going to do I'm going to check if my main page is not any of these two pages where I need authentication or not authorized page then I save the user page into this variable which is my current main page in my case it is only one page and then I set my main page to neet need authentication page so you you saw at least it showed you that that blurred image what if we do not want to show that we want to show another custom page so I am setting the main page to need authentication page and then I'm going to request for authentication and if we are authenticated if we are authenticated very simple we can say set the main page back to the user page simple as that so we are setting the main page back to user page if we are authenticated if we are not authenticated then maybe we can display a message and we can display something else on the screen so we can display a message saying you are an imposter sorry I am not going to let you see this page or this application and then I will redirect to a not authorized page now another thing that I will do being a good citizen I will be wrapping up all of this into a try catch assuming something goes wrong if the user does not have access to let's say the fingerprint scanner or you saw when it was asking for permissions you denied this we can capture that over here so I'm just going to move this whole code inside of the try cache block same thing I'm doing nothing fancy so let me just run this application once again now and see this in action so coming back to this the first thing when we try to come back let me go back so we are over here let me run the application again the first thing it is going to check if my main page is need authentication or not authorized which is not the case at the moment that main page is my the main bank balance page so it is going to save that page into this user variable and then it is going to set the main page to need authentication so let me run the application now let me hide this something has gone wrong let's now it is giving me an error oh I think I have duplicated this code yeah this is a bug that I have seen recently the moment I debug and continue it copy paste the whole thing again and again this is some issue with visual studio for Mac so let me remove this and let me run this again so application is running let me go back to the background and then open the app so at this stage you see this is another page that we are showing which is the lead authentication page unfortunately what we have written over here is not very visible because we have already applied the plur effect and now it is waiting for face ID so let me say feature face ID dot not matching so the moment we say not matching you see it shows us this message saying you are an imposter and you want to see my balance and this is the page that we are seeing I am not showing you my balance let me do something let me go back let me open this app once again now in this case assuming if we had set face ID I am matching the face ideally it would have taken us back to that page because we had set the main page last time to this need authentication but this is this is the trick that I am doing over here I am storing that page into that local user page variable and so that even after the retry when I come back it always takes me to the last known good page not any of these two pages so these are the simple two pages that I created with some simple text in it and that's it so let me run the application again just to demonstrate to you so the application is running I can try to launch it from here and the moment I do you see now it is saying we need to authenticate you first and it's asking us to match the face let's say if I say matching face it shows me the correct page if I go back maybe try to launch it again it asks to authenticate I'm saying I'm not matched cancel it shows me a message again the message showing is up to you you can simply show another nicely formatted page that you are not allowed to see this and if I go back click on this again again it will ask us to match the face if we match boom we are in so that's it for now so I hope you understood the concept and it will be easier for you to now incorporate fingerprint plugin scanner as well as blurring or hiding the information in the background Windows Task Manager if you like this video please consider subscribing to this channel for more videos coming up have a good day

Channel: Naweed Akram

Views: 2,706

Keywords: Maui, .Net Maui, #DotNetMaui, Dotnet Maui, Mobile Application Development, .Net Maui App, Real-world Maui App, Mobile UI, Security

Id: zcBvNXeMU6w

Length: 28min 21sec (1701 seconds)

Published: Sun Dec 18 2022