Secure Your Xamarin App with Fingerprint or Face Recognition

[Music] okay we're ready to go so in this video we're going to look at how to secure your app with biometrics so that can be your fingerprint or in the case of ios that will be your face id there is a wonderful plugin for that for xamarin forms too actually it's not just for forms it's for xamarin native applications as well so we're going to check out how to implement that and use that in your app so here you can see a file new xamarin forms application now this plugin can also be used with a traditional xamarin application so whenever you're building just android or just ios you can use this plugin as well and it should work basically all the same but then you're doing it just for one platform and you're doing it in the platform specific code this plugin is also supported for mac and uwp so lots of platforms which is pretty awesome and we're going to see how to implement it now in this examine forms application there's a couple of things we need to set up first to get the right permissions so let's have a look at that first but of course not before we've changed the title here to something that is more appropriate so let's set the biometrics sample right here save that and with hot reload it should come up automatically but it doesn't seem to work that is odd i thought this would work because i have the simulator and the emulator here running all at once so you can start multiple projects while debugging because i want to show you this on ios and android because there is a little bit of stuff that you need to set up to actually be able to test this on the emulator and simulator you can do it on both you can of course also do it on your physical device which is a little bit easier because then you can just use you know your actual fingerprint or face so that should make it easier but you can also do it on the simulator and emulator now we'll show you how to do just chat so um with this i'm just going to remove everything here basically and then what i want to do is uh whoops remove it and add one button so of course this can be anything right so you can implement any kind of action or trigger to to trigger this code i'm just going to do it with a button but you can imagine that you know whenever you are creating like a banking app at least my banking apps they use a pin code and you can always optionally enable the fingerprint or the face id so but it should always be i feel like something that you enable extra right so whenever you uh i don't know suddenly have a beard and your face id is not working or maybe worse or your finger gets lost for some reason um then you always want to have that fallback option to enter a pin code or something right so that is also something that is provided with the os so you know go look for and test the edge cases for how it works in your app but what i was saying like you can do this for multiple scenarios whenever that banking app starts up it automatically already wants you to verify that it's you um or maybe you just have this little shielded section in your app that only that part you want to secure right so that is basically the scenario that we're going to see here you're going to click a button and then something secure should happen here um but the code again still remains the same it's just what you do with that code so this button is going to be button text and it's going to say show me the secrets there we go and i'm going to implement a clicked handler here it's going to generate that for me there we go actually let's make this auto closing there we go looks a little bit nicer um okay so when we rerun the app we should see that show up um so the other thing of course i didn't install it yet so the other thing we need to do is go to our solution right click and say manage new get packages and it's called what is it called it's called xamarin.fingerprint i think fingerprint or plug-in fingerprint plug-in fingerprint so there it is plug-in fingerprint that's the one that we're after so you can see it's updated very recently um in in at the time of recording at least um and it relies on android x i think for android x there was a note in the documentation so go check out the link in the video description what is special about android x i'm just working with the stock xamarin forms template as it is today but for android x i think he needed to do something a little bit extra it's probably not hard but go check out the documentation for that so add package added on all the projects because it has a little bit of shared code but also some platform-specific code because um you know the the fingerprint um and and face id stuff is very specific to ios and android they have apis for it but um you know we still need some platform-specific code so it's adding these packages a readme comes up you can also install this as a mvvm cross plug-in so if you are already using mvvm cross in your application then you can also use the plugin for that i think you have to ask a separate package for that that will make it easier to use in combination with mvvm cross but you can totally use this as well separately from any of that and of course sven michael loves a beer so if you love this package and you want to support him a little bit then buy him a beer by donating a little bit of money to his paypal okay so the packages are installed now let's get our permissions in order so first we're going to do android we're going to go to the android properties android manifest and here is the graphical editor of course you can do this manually in the android manifest xml as well but here we're going to see find the use fingerprint and click that one and this is all you have to do so in a previous video we've seen something with the runtime permissions the fingerprint is nothing that you need to request at runtime for android so that's good you just have to click this one enable this one and all should be good so we can just close this one and for ios it's kind of like the same but now in the info p list of course so we're going to go to there again the graphical editor you can also do this in the xml file manually if that's what you want here we're going to scroll down to privacy and this drop-down always closes on me so sorry for that privacy and here's the face id usage description so to be very honest i'm not sure if there's also one for touch id or if this is just now the same because you know you still have face id and touch id but don't worry about that so if you have touch id and face id this is both going to be the same thing you don't have to do anything special for both it's the same api and apple the device that the user is using will decide like hey do i have the fingerprint sensor or the face id sensor but the code will be absolutely the same so you don't need to worry about that that is the magic of cross-platform apps right that's amazing so for this one face id usage description and what we want to do is we want to add a description here that tells the user why we want to do this use your biometrics to unlock secrets so but this is important right i'm just entering something in here now which is funny but this is kind of important because this message is going to be shown to the user and this should convince the user that you're not going to do anything bad with this that you just need to state what you're going to actually use this for and in most cases it's probably going to be pretty obvious to them but you know don't try to be a funny person and just um you know put something concrete in there that users will understand now for android there's one more thing we need to do because android works with activities and whatnot so they need to know this plugin needs to know what activity it needs to pop the fingerprint thing on so we're going to go to back to android i should have maybe done all the android bits first but you know go to the main activity and here we're going to say after the essentials is initialized because we're going to use a little bit of essentials so if you didn't have essentials installed then this is a good time to do it or maybe then you have some other way to figure out the current activity but what we want to do is set the cross fingerprint i'm not sure if it's with a additional p or not cross fingerprint oh it's with a small p but it picks it up um dot current activity here we go oh no i think you have to do the set current activity resolver that's it and we need to provide it with a function that is able to resolve the current activity so it knows like this is the current activity and this is where i need to pop my little fingerprint dialog and we can use essentials for that so that's going to be xamarin essentials it's in the platform namespace now and we can say current activity here we go and this gets the current activity you can also do this by using james montemagnos i think it's called plugin.current activity something like that but that exact same thing is now incorporated in essentials as well so you can just use this one so here we go that is set up as well save it and we are done for this part so now we can go back to our shared code and we can implement that button clicked handler so let's go to our solution and to our main page our code behind here we go here we have the button clicked one so the first thing we want to figure out is well actually let's check out what the api is here cross fingerprint it was finger print here we go so what intellisense figure out are using um just add the using oops this one using plugin.fingerprint and you could we'll get this static class that has all the functionality for you and you have to do the current and here we can see the different options that we have so we have the authenticate async that is basically like okay i have something secret and i want to use it to authenticate now at this place so that's what we're going to see in a little bit uh we can get the authentication type so we can see what is the available authentication type um and i think this is whenever you're going to authenticate so this is maybe you can differentiate between hey did i authenticate through a fingerprint or through phase id or maybe something different entirely get availability so here you can get like hey do i have the fingerprint reader available ken is this biometrics authentication even something i can do so that is also a good thing to check because not all devices have that right so you want to check like hey can i do this actually and this lists like the the different things i think um oh no sorry this actually gets a little bit more detailed information so this does a couple of things you can see it in the documentation here um this checks if like is there an api that supports the fingerprint sensor if yes then it's going to check like hey is there permission for accessing the fingerprint um and from there does the device even have a sensor and lastly does the fingerprint have a fingerprint enrolled because that's also something right so the user could have the sensor but they couldn't have not set up authenticating through it so if the device doesn't know the fingerprint then you can't authenticate with it so that is something that you can do with this one it gives you a little bit more detailed information and you also have this is available async i think this will give you just a basically available mod available so this is a little bit more high level like is it available yes no i think there is good documentation with all this code so go check it out for a little bit more details on that so let's just first check out if it's available async so this is all going to be a sync and we need to add the async here and we can say var availability ability um is a weight there we go um it's available so we can also provide a boolean uh ah here we go so enables disables the use of a pin or password as a fullback uh which is only supported on ios and mac um so this is like the thing that i mentioned earlier that is built into the platform so whenever you're on ios i think it will ask you like hey do you want to authenticate with your face or your fingerprint and if it feels a couple of times or you say cancel then it will automatically pop up the os pin code password screen and you can authenticate that way so for that you don't have to provide a full back but you still can right so you can still provide your own mechanism and just set the allow alternative authentication to false here and you can provide your own method here as well so that is something you can definitely do so here we go and then we're going to say if availability is what's this type it's a boolean oh there we go so if so this is like like i said the more high over thing that you can check so if we look at the other one actually let's do that really quickly [Music] what was that get availability async so here we go and then we can look at is so here we have multiple statuses right so here we have available denied which is probably when the user didn't give really any permission to do it no api no fallback well you got a lot of different levels of of things and in the end it can be unknown if this plugin can figure out why we can't access this availability so this will allow you to give a little bit more information or handle things a little bit differently and and probably mostly use for like the message that you're going to say to the user like hey you don't even have a fingerprint reader or you didn't allow us to use it so that's the thing that you can do with this but i'm just going to undo all of this and just get the simple one here we go and we're going to say if not available ability so the name is kind of unfortunate right now but you know we'll roll with it and we are going to do show what is it dialogue what is it show alert alert what is it display alert there we go which is also a weightable display alert and we are going to say which is this one this is the title warning no biometrics available okay so whenever this is not available for whatever reason this will come up and we're going to return here actually so nothing can happen beyond this so we're going to see how that works in a little bit uh but beyond that we can have like okay um off results and we can say cross fingerprint current and here we have the authenticate async right so here we can have a couple of things we need to provide a authentication request configuration object and we can provide a cancellation token so that we programmatically can cancel the little dialogue if i don't know something happens but that we're not going to worry about that but we are going to provide a new authentication request configuration so actually let me tidy this up a little bit i'm going to cut this put that in our usings here as well so we don't have all that ugly code in there and let's see what this object is all about so whoops um do i need to specify something in the constructor yes okay so you can configure basically how the dialog will look like with this but only on uwp probably and android because on ios it's just the os dialog and it will show the reason from the info plist so it's not going to show any of this because here in the constructor you can specify the title which is going to be the title on at least android showing like that same kind of information for ios um so here we're going to say the title heads up we're going to see that and the reason is i would like to use your biometrics please um so that's going to be that do we have any other options oh here again is like the allow alternative authentication um here it is supported for android ios and mac so maybe i was maybe i was mistaken for the other one the cancel title so here we have a couple of things that you can you can set but be aware that this doesn't work on all the platforms so be sure to check the documentation i'm not going to set up any advanced properties here so let's just do this one and we need to await it else we're just getting back the task so here we go and then when we get this we can say if auth result i think this is oh here we go we get a object with a couple of things so it's authenticated yes no we have the error message and we have a status so if the status let's check what's in there because i think this is an enum so here you can also check different levels like what's going on is it cancelled is it denied is it failed too many attempts so too many times wrong so here again you can do a couple of different things it might be dependent on the os implementation so again go check out the documentation for that but in the very core you probably just want to check is authenticated yes or no here we go and we can say again await display alert and we can say whoops yay here is the secrets and thanks there we go so whenever you're authenticated then we're just going to show this display alert if not then nothing's going to happen okay so let's see how we can run this so i'm going to stop this running session right here and i'm going to play it as you can see i have multiple projects set up here to run at once that is something that you can do in visual studio for mac but also visual studio 2019 on windows i have a video on that so that should pop up on your screen go check it out um we're going to see how this app will come up on in a minute on both ios and android actually let me start talking about android already it might flip a little bit with the emulator um here i am already just in the settings app so here you can see just the settings app and you can go to security um and in that security you will have fingerprints so you want to go in that so just pretend that you are actually running this on a device and you want to actually enroll a fingerprint so here i've already set that up before so whenever you set up a fingerprint or anything like that then it's going to ask you to also provide a pin because again that is like the fullback method let me switch back to the settings app right here fingerprint and so that's why i have to enter this one here one two three four um let's go and then it asks you like hey do you want to unlock with a fingerprint so if you haven't done that before it will ask you like do you want to enroll now it's going to ask you touch the sensor and this is a problem because i can touch the screen all day long but it's not going to happen so they've thought of that and if you click here on these three dots right here you will get this little configuration window for the simulator the emulator i should say for android and here we have a section for fingerprint and you can enroll well 10 fingers because you know usually we have 10. um and i'm just going to do one and then you can say touch the sensor so here we go do it again do it again and there we have it we've touched the virtual emulator sender so now we're done we've added one and you can see it here show up finger one so now we've enrolled this one and we should be able to just use this so if i go to ios it's kind of like the same thing but here in the top bar you have features and depending on which simulator you're running because this one has face id because it has the notch but you can also run a simulator with the fingerprint of course and then it will probably save something else here but here it will say face id and you can see it's enrolled it has a little check i think i can remove that one so now it's not enrolled anymore so no face is configured that's basically what it's saying and if i then say show me the secret it should say no biometrics are available so here you go it doesn't work but when i just enable this i go to features enrolled and i say show me the secret it says the first time that you want to do this like everything on android ios is going to ask you like hey do you want to app to give the rights to use face id which is okay and here we have the little face id id waiting box so and then here under features again i can say face id and i can say non-matching face so that is something that's not recognized and here you can see um that's something that is not working so i can try face id i think this is actually a bug in the simulator that this doesn't work so i do cancel nothing happens see so no dialogue with the secrets but when i do show me the secrets and face id and i say matching phase it should actually you know give me the the authenticated is true and it says yay here are the secrets so boom ios works awesome now back to android um go back to our running application here we go also show me the secret so we've already enrolled that fingerprint keep in mind we just did that so here we go and here you can see the title and the description that we have configured so you can see they are showing up on android but not on ios and here again if i then want to fake that i am triggering the wrong finger or something is not working touch the id and you can say it says not recognized and then whenever i do the end roll finger which is finger one it should say yay show me the secrets so there you have it that is how to use the biometrics plugin um or it's marketed as the fingerprint plug game because that is um the only sensor that was available at the time this plugin was made how to use it in your xamarin forms application that is pretty doable right so now you know how to implement um checking if biometrics are available so your fingerprint how to do that on an emulator or a simulator and how to actually secure parts or your whole application um it's always good as already mentioned to have a little fallback with a pin code or that kind of stuff because you know stuff happens maybe someone loses a finger or hopefully just the sender breaks and nothing happens to your fingers or your face so this plugin has been uh brought to you by sven michael stuba i have been playing some foosball with him when we met in the us i've met him a couple of times he's a great guy his foosball trauma hopefully doesn't bring up too many memories and of course the contributors of that great repository so go check it out if there's anything wrong or you want any support that's the where you want to be thank you for watching this video please give it a like if you like this one subscribe to my channel to be notified of new content automatically and i'll be seeing you for my next video keep coding

Channel: Gerald Versluis

Views: 7,662

Keywords: fingerprint authentication android, xamarin tutorial, xamarin fingerprint authentication, xamarin fingerprint, xamarin fingerprint plugin, xamarin fingerprint plugin sample, xamarin forms fingerprint authentication, xamarin forms fingerprint, xamarin forms fingerprint plugin, xamarin forms face id, xamarin face id, Xamarin.Forms 101, xamarin forms tutorial, xamarin forms tutorial for beginners, xamarin touch id, xamarin forms touch id example, xamarin.forms, xamarin, ios, android

Id: k-eg3gcSMSU

Length: 24min 2sec (1442 seconds)

Published: Mon Jan 04 2021