.NET MAUI - Authentication with IdentityServer

hello my friend my name is jose cruz and welcome to my channel today i will show an integration that i did between one app that i created using.net maui and one identity server so you can probably you already probably noticed that i have imposed some videos related with dotnet mao in the channel having fun with that but today i can also bring some backend service to use as an example for integration okay so let's go to the video so so before the app part and code in dotnet maui let's have an overview on the identity server this video is not focused on identity server but you know me i like to have this overview but keep it in your mind that this code is not even close to production code okay we have many steps here before i go to production have many configurations better name also some secrets that should be hidden so keep it in your mind this is the samples that you can use for exercise and also to understand the logic behind the identity server okay with that let me show what we have here so we have here the identity server um we have all configurations that we have for this exercise today here inside of this configuration right i have my scope and also my identity and the principle here the clients that can be used to access the applications okay so i have one client for the console application test that i created here you can use that to have some fun also the web one and the last one but also important our cloud client dot net maui app okay so what we have here is a client id the client id use it for the authentication between the app and the identity server the secrets that should be hidden in the future also the directory where i allowed scopes use it to communicate between other apis okay what is the other api i have another different service here a simple simple one call it maui maui backend i yes i like it this name and here in my way my backhand api i have a program that i added the authentication saying hey um you need to have this authentication the authority will be my application identity server um i say to not validate issue and also the audience just because as i say it's not a production code also the pulse in the required claims here okay the api one that's the claim that i requested here on the configurations okay this here so okay with this configures with this configuration in mind let's go to the dotnet my part so here for the maui part we have an application called mauima with foot.client and inside of this application i did some customization for the android parts especially related to certifications and also the callback but let's see the application running first all right so let's debug it and um that's a good application but remember that this application has a login part with the back end so we need also to set the services running so let's execute the service on the background first we start my id service and also my api cool it's running perfect let's go back to the maui and let's let's keep this on always on top okay what what this configuration does it makes the application always on top even if i change here the application behind it to keep always the emulator on top of your view that's why my camera is also on the left so let's execute the application right let's click on entire is a portuguese word for login let's type my email here jose gmail.com and i'm just saying the password enter and then you can see that i have the token here this is the token but you don't need and you don't want to show your token to users right but here we have a new page that's uh called senior canal it means subscribe don't forget subscribe it helps a lot also i have the token describe it here i send from one page to another and here i have one call api what this call api me means it will call my that other api that i request the token claims that you can see here the list of them and done but to access this api i need to be authenticated on the identity server you can check the code below is really really fun that tricks then the things that i had to do here so let's have a look into the code right if i type in sye if i click inside here that means logout i'll click on logout yes and if i close this it means okay success success and done we have we are on the login page again so let's stop it and let me show you what's happening here in the background and let me also unmark that so the first thing that i have here let me show you the nuget package that i added in the project you can see here that i have some microsoft toolkit mvm i have a video about that also the identity model model i i o idc client to integrate with our backend seems seamlessly so first class that i want to show is the maui program where we added the singleton i added most of the class here singleton but you can add the singleton transient and scope it based on your requirements okay but important one that i want to show you here is the odc client options is where i use as headframes for the authentication okay here i have the authority this one is used for not using locals because i'm using android here but if you are planning to use android and ios you need to separate the hosts okay the client id will be the same as we define it on the identity server they scopes here there is a list here we can just separate it by space a directory url client secret should be the same you don't need to encrypt to graph that here the factory this one is really important if you are using a not trust certification i can show you why i'm calling this function here and a browser that is the same configuration for the callbacks here with that we have also this method here that why you had to have a custom http client so here on the android part i have this custom message handler that's different from android for android and for ios and other things so that's why i have a custom here but in the end i'm just doing a bypass for the certificate okay that's why we have this insecure hdp client here okay done basically that adding the authentication then let's go to the fun part that is the off build mode okay here i have my login async class that i'm using verify if it's busy to not click many times on the button also if you have network but it is important that i'm using that client okay oedbc client to have the authentication part with the end so if you see here i have my client login send the new request if there i will just return that but if it's okay or if you throw an exception i will show the exception on the screen remember that's not a production code please log everything that's happening here and now so if okay i am redirecting this user this specific um page to the other one sending the token the token to the next um view page but we have another way to do that at setting the current main page as a main page i did it like that i prefer to send the the current page to the next one but on this way we need to conceal the back button on that page so you choose the fox here is just the authentication part okay you can set it here my page and handle all the dependency injections that we have that where on my main page right it's already here if you the user is logged okay if it's everything okay we go to the next page that's my main page really simple page but i have an image a label and also a button here to call the api and also a logout button so what's happening here on my view module is that on my viewmodel i have the same client for the logo part and also one http client where i set here let me show the client first when i said here just go to that api with my token okay that's why i sent my token here go to that api require the endpoint that i use it if it's okay just show the claims that i have and done if not show me there what happens if you throw an exception and for the logout button i have it here it's just the oedc client dot logout and done really really simple let's see it work again right you already saw the flow let's see it again just for fun so if i click on enter in login again jose at gmail.com and my password you see that i have the token that i described here when i close it i go to the next page i sent the token here i have subscribed i don't need to repeat again it helps a lot don't forget that here i have the token that i use to send the call to the other api so let's call that api that api returns me returns to me the token claims that i have for this token and if i click on say here that means logout it will open a web page where i will click on yes and then i'm not logging an application anymore i go to the login page okay so i hope you liked the video i tried my best to have this video quickly because the furnace part is on the code that is on description click there then github you can find me also on twitter and don't forget to subscribe thank you

Channel: Jose Async

Views: 11,332

Keywords: dotnet, maui, login, maui login, maui authentication, maui videos, joseasync, jose, jose cruz, .net maui, .net, maue

Id: PtYiz45xIJ8

Length: 10min 26sec (626 seconds)

Published: Sat Jun 18 2022