.NET Maui Apps | Consume Login API in Mobile and Desktop App using Event Driven Architecture

Hello friends and family welcome back to netcode Hub channel in this video we are going to talk about how to consume a login API and marry that's a mobile app development so we're going to create a login page that is a Murray app a mobile app and also we're going to create our web API and after that we are going to link the API and the mobile app together it says that if you want to log in get your detailed send it to the API confirm met return and check and if authenticated then it gives you the access to login it is just a very simple project that we are going to do today just almost two content page in the my project and also the API we are going to create this only one action you're going to perform all the cloud operation that is a get post read and Etc put now we're going to talk about only post and get okay so we're not going to waste much time in the API but right I want to have as something small so that our app can depend on it for the login assets that is why I say we are going to create a login API so I can zoom in login API in Murray project as a mobile app project okay so what we are going to do is what I have done on the screen so if you check on the screen you can see we have a mobile app at one side we have our API too at one side these are two separate projects the first one is the Mario project the second one is a web API project or in c-sharp language now in this you could say that from here I have my customers here here I use um already created API but in that video we're going to start everything afresh so you can just take note while to redo it or rebuild it but to go through what you're about to do let's take some few minutes to go through all this then restart the project development we have all their card operations here because we have get post get by ID so get the specific uh make an update and delete so if I want to get click on this and execute now you can see with this gate I have the list over here these are for customer ID name address and phone number so these are the list that I have in the database now if I close this and open the next one boost now I can now add a new customer so you can go to try this out then we can add new customer this new customer and here the addresses new address so you can select a phone number and execute this so it is going to be executed and now we're going to have when you go forget execute you're gonna have a new customer at the end and that is what we have here so you see we have the get and post we can also get a specific one so we're passing only the ID maybe eight and I'm gonna have that specific customer that the new customer you created also you can now make an update so you can try it out now this is eight so instead of new customer let's write here new customer updated and now the address here it is new address updated updated so number two we're gonna say two four six like this now let's pass the ID as eight let's execute this so execute this and I can see it is successfully what done now let's go back here and check so that is it get by ID 8 and let's see new customer updated new address updated so updates also working and I could see the last one here you can talk about delete so you can pass in the ID and get it deleted so let's say eight and get this deleted so it is done now on the passing it here so get ID by 8 passing here not found because the data is no more in existence so you see that all our card operations are working perfectly also we have authentication that is a customer odds now this customer ad is also a controller that you're going to create now all these are the ones that you're going to create you're going to generate this automatically then we can actually add this or we can do this manually too when we get there we know what to do with any of these okay so when it comes to the custom authentication we demand the name and phone number to login this time around we are not using password you are using a name and phone number so if I go to try this now passing name so the name is customer seven then phone number let's pass in any number at all like we see it tells you not found so let's go in there and grab a correct details for this operation now let's use simple one to idea seven string string so Stringer one two three and let's come here we pass in string and now here is one two three let's execute this and I can see we have it so it means the data it is found the credential we provided has a data or has a family in a database also a less SEC for another one so let's use the customer seven there is a phone number the last couple of days and now let's come to this side and that is customer seven that is the number here execute and obviously we also have this so that is the data that you've been talking about now let's login with the same credentials here so I'm going to copy this here now paste it this I'm going to copy this number and also paste it here now login and I could say hello friend welcome home buddy now I can also log out so I'm logged out now let's see let's check the other one as well so let's use this string so strength and the past is one two three for the phone number now login and you see we are logged in now let's use a different number so that's the customer eight now one two three let's see what happens so credential incorrect now if you decide to clear this and I'll pass in credentials incorrect as well if you click all this and now uh passing this you could see that um the format is what not correct so that is what you're gonna do um in this video a simple one now as soon as you're able to log in so string and one two three as soon as you're able to log in now you come to the home page and I will display Hello friends then welcome home buddy that is what you want to display and that's all okay so let's start it but before we start it make sure you have installed the workload that is the visual studio 2022 it could be 2022 preview which is a 17.1 or the 17.01 you can just go to the installer here now that is the installer let's see what is happening now foreign for all this to be done oh I'm not going to use the internet manager so this is the installer now you can just run this installer now once you run it we wait and you make sure that workload has been installed if not then you go there and try to install that you have access to the myri project so you see we have I have the two lessons here the community one and I have this preview so I click on modify and now maybe you can see that from the modification area or Zone we have a workload tab so you click on this workload Tab and then you can navigate to where you have those workloads and try to install that is what I'm talking about these are the tabs I'm talking about and that is a workload so desktop and mobiles you see we have it make sure you have this selected and now select this so click on install and they're good to go okay so that's the little thing that you need to do because you must have this.net multi-platform application user interface development installed and that's what we're known as the marry okay so now you're done with this well done what you have to do here is to create a project and how do you create projects so I'm going to pause this video I'm going to close all these then we're going to start a fresh by creating a project and doing all things together all right so uh project is now ready to be created so you can see I have launched the visual studio currently I am using the 2022 preview one 17.7 version but it doesn't matter if you have the 2022 as far as you have dot net marry installed that's fine so let's create a solution now I'm going to click on file and new projects or you can click on this new project here then here you can click or you can just pass things let's see if solution we have solution here so we wait for the template to get loaded so we're going to create your project dot net marry projects and also .net web API so we're going to create two projects so we can go for blank solution first so let's create blank solution so solution name let's say this is um YouTube demo so YouTube demo then we can say dots login up okay so YouTube demo Dot Login up then let's add solution so that is our solution name okay maybe you can decide to add the next one to make it know that creation API so login app then we can add with API solution so that is what I'm using for my solution name you can also change it to yours so let's click on create and that's the location that's going to start I have a folder called asp.net core Blazer folder and it's located at the C drive and that is where the folder is so create so I have the solution and now it is empty it contains no projects so we are here to add the two separate projects dot net marry that's a mobile app project and a web API project this project is for login very simple we're not going to waste time here to just a few minutes or yeah we're gonna finish this so click on solution Explorer now that's a solution so right click and let's go in there and add the first project so let's first tackle our API first now let's add new project and here let's select the last one that is a web API and we are using C sharp so make sure that's the sub selected you can set this up from this you see these are the languages direct supports we're going for c-sharp and I click on Nest you can see this web API you can use it for csap Linus Mac OS Windows cloud service web and web API so it supports all this next and now here it is let's say this login app dot API so let's login app.api okay so this is the API that we are creating so you know what times this API can sit somewhere on a server and to the help of this link you can now call the application or call the link inside the mobile application so you know the communication happens between the mobile app and the API so just add the communication between the API and the mobile app so it doesn't assume that we have to create the API and create a mobile app you could have created the API already and we can host it online and we can create a mobile app whereby we have connection with the mobile app and the API to get communicated or communication radio accessible now let's use dotnet7 yeah let's do the 7.0 and I click on create so we're going to create the API now what you need here is you're going to perform um post get okay so post get and I also um login we're going to create only three action methods in our controller that's what we need then I'm going to perform all the card operations as you saw earlier on in the demo or the review demo we are going to just create the only third action method so we can work on fast if you want to learn more about this web API you can check my tutorials or the playlist I have how to create restful service I have a video over there and you can watch it and get detailed into all the product presents from create app delete parts or put delete post again you're gonna have all of these um HTT verbs explanation and it's going to help you a lot okay so let's assume you have the basics in the web API but yeah still gonna let's see we're still go with a scratch level so what about in that we write or record you're gonna have a little bit expandation so maybe if you're not having the idea on that you can grab it from there now let's work on API so we have our API ready so I click on solution dashboard and now you see we have this at login app.api so this is the default one let's run this so click on this run this API yeah so it is not ready let's run the API here so it is built-in so we wait for it to get built and then we run it to see so if you see that our login app.api is ready and we have a default controller that is a weather forecast so it is the get method that we have here we can now execute this and that is what we have this is a default one so we are going to create user user controller and I'm going to perform all the other operations by creating a DB contest performing database migration creation controller and action methods and now we run our program or that's the application like the API so let's see oh now this is working perfectly this is what I want us to do so let's open uh Visual Studio and now in a visual studio so listen Explorer that's all we have let's create our models first so before that let's right click and now click on ADD so let's add a new folder I want us to delete this or close this because you don't need this again until you are done now this folder let's name this as models so this is a model now with the model that we have created now we are going to create an actual model inside this model folder and that's going to be user so we're going to create a user class right click on the model and I click on ADD and now that's going to be a class so this class is going to be let's say user click on ADD so we're going to provide ID name maybe and password right let's see what we can use here so we have user that's public class and um let's see so we can talk about that is uh we need an ID first [Music] then we need username so there's an ID then maybe you need username foreign so let's see so this is strength and it says let's talk about this full name so is saying that it's not speculated right you want this that's wrong so we have full name so it needs this as a full name now let's use this for Let's uh let's have this and this is going to be email then let's add the last one so we have email then you can have password so password here let's make it a string so all that we need for this is the email and password okay you have ID and full name we're not going to use that we need email and password to to login okay let's save this now once we have our models let's create another one another folder and then let's name this as data so that is you're going to provide app DB contest so let's click on add new class and on this class is going to be appdb contest so app DB contest and that's a connection that's going to hold the connection of our application database so that will be a class and now this class that we have we have to first install some packages then we come back here okay so once we have this let's go and then install some nuget packages that is anti-firmware called that EF core and SQL Server okay it's because you want to use an SQL Server since it's an API you want to use an SQL server for this project so let's install this packages so right click on this dependencies and then go to managing to get packages so these are the installed ones and they are differently as soon as you create a new project you have all these packages installed already you want to install new ones from the server so we click on the browse Tab and now here we have to provide in that EF core and Entity framework course so just type in entity and you're gonna have that make sure if you're using the 2020 preview make sure you have this selected okay now we're going to use this about this that we're going to use remember that we are using the ND framework of 7.0 but here it is 8.0 preview so we're going to choose on the latest table one at 7.05 now let's click on install so let's install this now once you are done we are going to also install the SQL Server so let's accept this and as you can see from here now done so this you have to install choose that is what you're going to use to perform database migration while passing add migration that's what we're going to use so let's also choose the latest stable version that is same point yeah 7.05 install this so let's switch now executing Scripts and let's wait for it to get installed when we are done the next one that we are going to install here is an SQL Server then we are done we're going to install only three packages for now so let's install this SQL server and that is yeah where are you and the framework SQL Server point is around right here so let's kill this compact Okay so Microsoft we have to type in everything yeah so that piping in Microsoft dot asp.net score dot SQL server all right so let's see since I'm not getting this here so let's uncheck this the pre-release one and let's see if so we're gonna have that okay so I'm still not finding this ASP net core SQL okay so there's an empty framework called and that is Entity Framework and we're gonna use the SQL [Music] so that is this whoa we've searched for you for long okay so click on install version 7.0.5 click on install so let's accept this yeah okay good job so we are done with this now if you want to actually check if all these packages have been actually installed click on solution Explorer now go to dependencies in your project now you see there's a packages folder click on it now you can see we have EF call EF question you have called tools these are the three packages that we have installed so once you have this we can now inherit from this DB contest now this DB contest is uh coming in from the SQL The Entity framework core the control period and now let's include anti-frame record now once you're done with this we have to create a Constructor and I'm passing to the base option so we're passing like this now while deleting this Constructor we can copy this app DB contest and now let's pass in the DB options to the Constructor and that's all so once you are done with this you are done creating the Constructor now we are navigating or referring to the base and that is a big DB contest okay so prop now let's create a DB sets user so DB sets and that is a user and the name that you're gonna give is what uses control period let's include this and maybe we can set this is equal to defaults [Music] yeah so defaults whoa It's supposed to be like this I think so so we have only one table in a database and now let's go in there and specify a DB connection so to specify a DB connection we can also do that in this section that is a app settings.json file so we can do that let's go in and try to get a database Connection in it so click on solution as per app and now because you have upsetting.json click on this okay so let's wait for you to get open so we're going to provide I'm going to create a database connection here so what I'm going to do to get a database connection created now as you can see from here it doesn't app settings Json file and we're going to use that to create our connection after that then you can call this connection and somewhere else so let's start now in here we say connection string so connection strings that we can now open like this make sure you have comma separated then let's give it a name default connection then we can open it now with this let's write server is equal to another server here it is Luca okay so we have local also database name so let's say login API DB done with this then we need to have class server certificate let's say that's true so less versus Plus we press that connection and we set this to true and maybe you can set server certificate to also true and the last one is multiple active results sets let's also set this through so multiple active results sets that is it so there is a connection and that is a name so we can just grab this name and what we can do here is let's go to the program.cs file and in there we are going to make a registration can I send registration that is it program.ts file so in here let's call the Builder dots services so dot add DB contest so let's pass an app DB contest that's a class then yeah we are going to specify options pointed Arrow then reverse we can now close here now in here this is what we're going to do so let's pass in options dots then let's use an SQL Server that we just installed as we get package they are less called this Builder dots configuration dot get connection string then the name of the connection string is default connection okay so here we can pass in an operation here in case um we couldn't get this in case this is the later the connection is deleted so once we have this maybe we can do something like can I see a string with this we can do if it is now then we want to throw new invalid so invalid operation exception we have it operation exception and now we can specify our test in so let's say connection [Music] string and disconnecting string so you see connection string and now that's here it is default connection okay so you can see not found [Music] and we can now close this and close it like this then the last one then we terminated so let's see so since we have this here it means we need only two then we closing this here all right Ctrl K and D to format it throughout so that is what we can also bring this dude like this Ctrl KD yeah so that is what you need to do now as a connection string registered what we have to do next year is to perform database migration now we have all the tools that we have for the materials that we need in order to build our app to create database we have our packages installed we have a connection strength created we have it registered and the next thing that we can do here is to perform database migration now to do that let's first build this direct click on solution Explorer now click on build solution and let's see if we have any error in it it's going to pop up then we Rectify it before we perform database migration so let's wait for it to get built all right so you can see it is done now what I have to do here is let's perform database migration now let's click on choose and then go to nuget package manager manager console and let's perform this migration so we can clear this CLS class screen now let's say add migration so add Dash migration now it is ADD that's migration let's give it a name as initials that's always an output there's a folder called Data open it create a folder called migrations and do all the stuffs in this data or this folder now let's run this so we're going to build it but since you've built already it's going to skip that now you see that from the build started and built and see that very fast so it is done now now all you have to do here is perform database migration so let's see you can say update Dash database so this is going to run the models and create them as a table or database and the database tables fields it's going to run by the anti-frame work yeah of course now it is done so you could see if you read because we have create table user and now this user has the following properties of fields so we are done our database table is now created what you have to do here is to create a controller but for now when you run this application nothing happens because all these stuff that you've done here it is their code behind code behind file so nothing shows when you run this application now the actual work has yet to begin let's close all this and I have to so close all tabs click on solution Explorer and now in the controller let's create another controller here so add new controller and now this controller is going to be an API let's wait let's use an empty one so add another name of this controller is going to be user so user controller now with this controller what you're gonna do here first is to create our Constructor and now inject our BB contest so this is a Constructor let's inject our connection so that's the database connection so appdb contest and let's create it here now let's inject and call it so we have to initialize it click on Create and assign field at the app DB contest you see it has created and assign it to one here for us we can now use this app DB contest anywhere within the scope all right so let's create our first post so you see we have get ready and now with this gets we can call public public is sync and that is going to be a task and this tax is going to be lists so a list of user and now with this let's go like this before this list of views that you must have action results first then like this that's how it goes you close it now control period let's include the models and now since this is three we must close the three here and this is get so with this get we can point it to return app DB contest dots users the two list async so that's all now let's call and await keyword here so that's an await keyword so this is going to get us a list of what is yes in the database now let's see so let's create another one and that's going to be um this is Boost now with this pose we say public and that's going to be a task of action results now this action results we say it is just a user and now this user it is and Giza okay so this is ADD now here we are going to use user and we create an object out of this and now in here they're going to say if Visa equal to now okay then return let's return bad request and you can pass him here as maybe invalid requests then we can close it like this and let's have an awaits async keyword here so async task else what can we do so if we go to now else then so instead of that I want us to do something like this or we can just leave it or you can just cut this and put it here then we say if it is not equal to now then let's go for app DB contest dot users dot add then you're gonna pass in this user so call our weight keyword app DB contest dot save changes async we call that and we have it saved that's all and maybe we can return the entity and maybe we can say because after adding it here can I return let's return okay then let's grab this here and now this you can see dot entity so return okay if not that's what we can do because you want to return a user here so we can say results [Music] is equal to this dot entity so app DB contest at ad user so let's see this here can we have the entity here okay then we can install the results here so you can see vla results is equal to rdb contest dot add entity then yeah receive changes and now we return results okay so yeah you can say return okay then you can now close it's like this all right so we have this year return okay our return bad request that is to add okay now after adding let's go in for a look so you want to just get get or an ad let's have animated as login so this also get by this time round is gonna be okay so here we need um email and now we need password okay now we say public async and that is a task now this tax is also an action result and it is returning a user single user and I will say login so login we need email and we need password so the password must be the same as the one that's a passing as a query strings so here what you're going to check here first is so if email is is now okay so our password is now let's see if this is going to so opposite is not now here now let's see what we can do so our password is now then that's what you want to do let's return the same bad request so let's see so if email is now it's not now and password is also not now okay then we want to perform this let's return this okay so if it is not now what you want to do so we say far or you can say user user is equal to and I'll wait appdb contest dot users dots where now here where we're going to check first x max2 x dot email so let's convert to lower a lot lower is equal to dot equal to [Music] um email coming in so email.2 Lua okay so while you have this and let's use and and password [Music] is equal to [Music] so let's use an x dot password is equal to this password then you're gonna use dots first or default async let's see so we are checking here where email is equal to the email and password is equal to this password DOT first or default async now here it is saying that converting little possible now reference so let's see okay so can we specify current culture let's try that to see or you can ignore that you so let's see let's start that as a variable okay now uh let's use user where so you can see or throughout the first or defaults okay so we are storing it at the user side then we can now check so if user it's not a cartoon now if it's not cutting now then return okay user Okay so [Music] return okay user oh it is maybe it is what we can do we can say return user it's not a cotsu now so this is question mark so if user is not equal to now then return user okay by this user it must be an okay user like this else return not found then pass in these are not found very simple one so Ctrl KD we have it set all right so I think it is okay now let's find this and see so we can now post we can create a user you can get user you can log in user and get the details so let's run this and see okay so it is ready now let's see so get user and if you try this out let's not gonna happen so it is empty now let's close this let's post user and we can clear up the ID so here it is admin now email is admin at admin .com now password is admin at one two three click on okay so we see that's return it the ID is one the password is the password now let's check let's get off so return it and obviously we have the admin here now let's go to the login here now let's login with the admin so admin at admin .com and now here password is admin at one two three let's execute this and see if this is going to work Galaxy we have it also here let's try to fix this up execute okay so these are not found all right so this is working now our API is now um ready as you can see so our next one that we're gonna do here is to check now you're going back to we're going to add the project for the mobile app okay so you know our app API is ready so you can now close this [Music] and let's build it once more okay so I see that now uh API is ready now so let's go to solution Explorer and at the same solution here right click on it and let's add new projects so this project here we're gonna choose instead of the web API choose Mari so that's net marry app choose the first one and click on nest and now here it is going to be login app dots yeah so there's a login app so this login up the first one is loginup.api and then there's a login app so the same solution click on nest and at the same framework 7.0 click on create so it is going to create that solution for us so let's wait while it is creating the project for us so now our project is now created let's go to solution Network and now we can now close the API now let's set this as a startup project so set here and start our project okay now let's build these two so click on build and let's build this project as soon as we are done creating foreign so it is saying failed now let's see so I could not open this project let's try this once more and see so let's say all right so I could see that it has now succeeded in building so you can rebuild this again to get it built now once you are done you can now go ahead and use this window machine we can also use the Android so you click on this drop down because you have this framework choose on this Android and I can click on the Android emulator and this is what I have here I can choose any of these if you're not having this click on Android device manager and I'll try to download one I'm gonna pop up right here for you to select okay so let's maintain this window machine and now with this you're gonna just run this so let's read what it is running I'll bring the opportunity to run on this Windows Form for us [Music] okay so application is not ready that is a default one as you can see so I can just click on click me and it gets it counted all right now let's close this so the next thing that we are going to do here in this app development is you're gonna have to create our models now the model what we use in the API I have to create the same thing because you know that is for a user so you want to grab you want to have access to username and also the email address okay and the password so let's go to the solution Explorer here now in the login app project let's right click let's click on ADD now let's add a new folder you're going to name it at model so now this model let's create a user model so right click now let's click on ADD before we do that you can go to the API and now with our models API models you can just grab what we have here so you can grab this now let's go to let's go to the API right click on the modes folder let's click on add a new class and now this is user so here you can paste this and we change here as public so let's move this question marks Ctrl KD let's format it well okay now we are done with this let's create a repository that is what you're going to use to have a code base so let's create a folder as well and it's going to be a Savage so Repository so let's create I use our repository so add new item and yeah we're going to create an interface so let's choose an interface and at the name of this is going to be iuser Ripple so I use a repo Repository foreign [Music] public to so let's create a task and this type of watch user not user and that is login yeah we need what email and we need password control period let's include the model yeah so let's see this name could not be found so let's see public so user let's save this okay so let's have using login up Dot models okay so once we have this we have to create an implementation class or service right click on this and new is going to be a class and here you're going to say user user service and that is a class now you make it as public you can play all this and now in here let's inherit from I user Repository so control period let's generate the method so that is a method that we have generated so in in this what can we do here we are going to now create this method this login so let's start from this area and we create the clients is equal to new HTTP client because that's what you're going to use to send or issue commands and let's see string URL is equal to now this URL let's go to let's choose this API let's run this API now let's grab the contents of the API and place it here because you know we are we are we are calling the API here so in current API I have to pass in the username and the password that's the email and the password so we come to this area and now let's try this out let's pass in the admin at admin.com admin at one two three now let's execute this to have the commander to have the the header foreign so that is it so we can now grab this header let's go to application now in here let's paste this so you see we have slash user and that is an admin so here instead of this we can now close this use plus and now pass in email then plus again and now passing this and use plus and then serve the password you can now pass in this so let's grab all the password here and I'll pass in this so that is it the API route for the URI so once you have this the next thing to do here is to call for the client dot now we need the Base address is equal to new urli and you're passing this URL okay now we have to get a response so let's read response and I will go for HTTP message a response message HTTP response message they will give it a name as response so this equal to recover from our weight and http let's use the client dots get async so get a sync and now this get async can call for client Dot Base address so the last score check if the response is successfully done so if respond dot is yes it does code and I list the top scored the item of 200 so if residual screen is 200 then you want to set string content less with the content is equal to that response dot content of the header dot read a string they want to read this as strength is saying because you're not returning but I want to read it as string async then Dot let's go for all the results then in here you can create user and we say user is equal to we have to here install one package known as Json converter and that is it new soft Json so let's write it before we install so Json converts so we need this Json convex Dot not this converter it is convert dot then the serialize then you're passing um user here then you go for the content so let's install this so let's finish so return our weights task dots from results then let's pass in this user okay else then return now so that is if the status code is not 200 it means error or cat and retainer so let's try to install the Json yeah new stop Json here okay so what we can do here is to click on this control period then let's install it from here that's the install package Newton stop dot Json and now let's find the latest version and install so it is finding and install land for us so let's wait why it gets the job done okay yeah so it is it is now set and let's create this well so this realized and yeah this realize so I believe let's see so Json converts that's Dot this realize object so that's supposed to be this realized object passing the model here and the content that you are reading from the response okay so that is what you need to do here now this repository and the interface or the interface and the service class that you have created let's go implement this so This I use a repository let's go let's create um a page first so and right click on the login app let's add a page so a new item so click on dot net marry content page and I'm going to name it as login so login page then you make sure you have selected this example then add that so let's design our UI first so that is the user interface let's wait okay so we have this now we are going to play all this because we didn't need any of this like the default one and even with a title tool we're going to specify it on so we don't need title for now now all we can do here is to create or add frame so this Frame let's set some few things that is the the Border color and we can talk of Alice blue and also let's set with request to 300 and let's set height request to also 500 let's set vertical options maybe Center and what expand okay so in between here you want to use stack layout now this stack layout you want to set the horizontal session option to Center and let's set space in maybe 10 is okay oh 15 is okay then aside from that yeah let's add image so with this image let's like this let's have the image source let's use dotnet I'm not having any specified or specific image here so let's use dot PNG the default one and aside from that we can also specify their weight request of this image as 80. then let's go for label so this label that test that you can specify here is login account aside from this maybe font size you can specify as 24 you can just customize the way that you want we have font attributes and that is boot well you can also have horizontal test alignment option and that is Center and let's say margin so zero left zero top the right and the bottom is 20 reasons is it poses you are 20. so once you have this let's go for our entry so this entry let's have placed soda and let's say this is email email address let's specify the weights request as 200 and X name of this let me say entry underscore email Also let's do the same for the password so you want to say entry and now the place so that yeah password then we can say it's password let's set this to true to set to mask the test that we pass in let's set up name and that is a entry password [Music] okay now let's go for button Now button we have a test and test here that is login [Music] fonts attributes we say board now let's set Corner radius to 24 you can say background color maybe blue violet there's a test color to White then maybe with margin 0 left 5 at the top then um so write zero and bottom zero let's set with request to 200 or so let's give it a name as login vtn then let's say collect less than rate and events event handler so let's go to continue editing let's go to the page here now when it is clicked before it is clicked let's have a read only I use a Repository so we say use our service is equal to new user yeah yeah isn't the user service and now when the button is clicked let's grab email is equal to entry underscore email DOT test now strength password is equal to entry underscore password DOT test foreign [Music] [Music] password is also now what can we do we can await then you can go in for sale dot current dot display alert okay so here it's giving us the error then let's say our fields required then the button is okay when then return if it is not now oh this is what we can do okay so we can say if a string so it's now our y space now let's pass in this email okay I can do the same thing to this [Music] then password so if the string coming in it is now empty or it's Myspace then the third person this or if it is this gotta pressing this that's a return else that is what you want to do so even with here let's save this what we have now let's run this application so let's change this to the API so I change it to the Murray project analysis so let's run this all right so you can see that our application is now loaded but all that we've done here is not visible yeah so don't worry we'll get to that now what I'm going to do next is we check so let's see let's go to the page now if it is not y space then we're going to call this user service Okay so that's what I'm going to do so if you create a user then user we say user is equal to so this user control period control period let's see let's include it our stuff so using login up dots models so this user and we are calling I wait user service Dot and I can have login method and here we need email and we need password so we store the output over here the internet we're going to do here is to check so we say if user is equal to now then foreign navigation [Music] Dot push so let's say that here I wait navigation dot push so push async then we say new main page so the page that we have already that's what you are using so if user is not coaching now you are navigating to this page very simple and maybe we can um display an alert for instance so you can sell or login then you can say successfully login then we can display okay so and I wait if not that's what you're gonna do I wait then display and let's [Music] error then we can say that credentials [Music] are incorrect then we can say okay aside from that you want to return to the same page now and one thing that I want us to do here is let's cut all this try let's put it in the try cash block to handle our exception so so aside from any error that pop-ups aside from what we have uh um specified we want to handle that here and let's display it to the user so instead of here you click this then we say ex dots message [Music] that's all okay now once you're done with this we have one thing left to set the login page as a home page so in order to do that we have to navigate to the app settings so let's go to the app.xml or the example page that's where you have to specify the main page okay so go to solution Explorer and that is the app this one open it the C sharp code code behind file now let's comment this and now let's set that main page is equal to new navigation page then passing this new login page not this app rather login page save this now let's run this application so stop this run this so now let's see the output so let's read what it gets want so let's see so it's been used now let's close this and I run it again [Music] foreign so it is ready now beautiful done so as you can see yeah there's an app now as soon as you open it while it is so in the middle we have our email and a password Here login account and that's a image that we specified that's a corner radius and yeah that is our frame you see we have the bottom right here that's the height the weight and that's the height okay so let's specify its admin at admin dot com and now let's specify admin at one two three so click on login [Music] and now let's see so here you see nothing happens although we are calling best service as you can see it is a no connection could be made because the target machine actually views it localhost there's no connection here okay so let's minimize this let's close this for now let's go to solution Explorer now the main page here you can see we have selected hello buddy so welcome my friend then we can now clear the semantics then this button all you can do here is log out BTN and then let's set this as log out foreign and now let's set font size font attribute as boot then font size here foreign size as 24 then background color as red this color as white [Music] okay [Music] now let's go to main page dot XML share this is sub code let's collect all this so let's see so awaits navigation Dot increase async then new login page okay now it is with nap up again last week but before it does that we have to run our API first else is going to give us the same issue as it gave us we have to run our app so let's wait for this to run now let's use our API so that's an API here let's run this API so we see we have our app ready here and that's our API too so user now let's see so I'm going to use admin first of all let's pass in login so object reference not set to an instance okay so we need to specify let's specify admin then click something else still let's see now login let's see what happens here if it is connects we have credentials our incorrect so let's fasten the right one at admin .com then the password Here is admin at one two three so login let's see so successfully you are logged in now you see we have hello buddy welcome so log out now we are back to the login so you see how beautiful it is but as soon as you see let's check something so see admin at admin .com now here you can decide to take up the admin the ads but it's still going to check so how do we do that let's first we can create this okay so we can actually set this to check before it's even checks I even call the API of the service you can take something here so even with this you can set something yeah like so string email okay so string email.test so dot can we have content okay so does it contain this at [Music] so it doesn't contain this at symbol so if yes then use this entry and that's called email DOT test else let's go find our weight display Alex so say error then you can say invalid email then you can say okay now let's see so cannot convert type okay so that's what we can do let's cut all this DOT test then we say we can check it over here that so if so let's paste this and we can say so if email dot content at then that's what you want to do [Music] let's cut this [Music] so if email content what's an ad symbol then we can talk about so string so temp email is equal to best email okay oh so if email does not contain this art symbol you can straight ahead invite and return very simple okay so let's build this to see now it is building an API so it is not containing this because that's an incorrect so let's close this let's first check if our this still working our API yeah it still works so let's go in there and I'll change this to the app and now let's call the app let's run this app let's see so let's wait for this to run then we're going to check if it doesn't contain this at symbol then I want to display a message to the user you can do a lot of stuff in here so let's see so.com and if I pass in this okay we have invite email and it still works so as soon as you pass in at see what happens now credentials are incorrect okay all right so um that is this I hope you guys enjoyed um creating this project with me as well and as you enjoy doing with you guys so that is it and I can see we have you can do a lot of things here if you want to grab data if you want to send data to the user you can also do it just that here you have to create your action method you call them and you can now move ahead with you can do a lot of things here with what you have here all right so thank you guys for watching this video um if you like what I'm doing you can give me thumbs up and also subscribe to the channel as well for more videos I'm going to catch you up the next time to work on a different or separate projects it could be a Blazer um web or it could be a mobile app that is a married project well let's see which one gets the vote okay so we start my other projects today thank you guys and I'm gonna see you the next time so take care of yourself bye

Channel: Netcode-Hub

Views: 4,013

Keywords: asp.net core, Registration, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), local storage, scalffold, scaffolding, migration, database migration, creating models, fileupload, blob, javascript, ef 7, authentication, client-side, jwt, token, role-based, assign-role, assign role on button click, maui, mobile apps, using Event driven architecture, consume web api in maui app, maui app, mobile app, desktop app, create app

Id: URKuiv9duuE

Length: 99min 37sec (5977 seconds)

Published: Wed Jun 07 2023