Google Authentication with .NET 6 Identity, a Web API & Blazor WebAssembly 🔒

hey friends it's me patrick god thank you so much for dropping by i create web development tutorials here on this channel i think you already know that and today we will cover google authentication with asp.net core identity or net identity in essence the identity framework and then probably also identity server you name it identity stuff google authentication with a web api and net six and also this whole stuff in a blazer webassembly application so this is what we're going to do today it's really not much actually but it can be a pain in the sorry about that when you try to create an application or project in the google console but maybe with this tutorial now you will know how this works and finally you will be able to use google authentication within your application alright so this is what we're going to do today and i am really proud to tell you that this video now is sponsored by skillshare i'm pretty sure you already know what skillshare is but if not skillshare is an online learning community with thousands of inspiring classes for anyone who loves learning and wants to explore their creativity and learn new skills like programming for instance web development so invest in yourself and your personal growth have a specific skill you're trying to learn then skillshare is the perfect place to start from not only programming but also for instance photography illustration to graphic design freelancing productivity and more you can find classes that will match your goals and interests like for instance the youtube class from marcus brownlee this is what i like really because i'm doing youtube of course or what i also really love are the productivity classes of ali abdal and thomas frank so maybe you also want to have a look and of course you can also get my course on skillshare about authentication and authorization with net six here we cover json web tokens rolls and refresh tokens so maybe you wanna have a look and the best thing is the first thousand people who use the link in the video description get one month free of skillshare so a one month free trial of skillshare if you use the link in the video description i don't know what you're waiting for so just pause the video or just go right there to the video description or the pinned comment and click on this link join the community and then watch my tutorial on skillshare and then maybe come back and watch this youtube tutorial alright thank you very much for that and now if you also like this video here and learn something then i would really appreciate it if you hit the like button and maybe even subscribe to my channel does make a difference thank you so much for that don't forget to also check out my newsletter for these videos here earlier in your inbox and a couple of more dotnet related stuff and the last thing i forgot my coffee cup it is downstairs in the kitchen thank you so much everyone for your support i love you forever guys it does mean a lot to me thank you so so so so much and now i stopped talking enjoy the google authentication tutorial all right let's create a new project with visual studio 2022 it is going to be a blazer web assembly application uh why is that well i want to have the blazer client and the web api with the identity stuff in the server project and then also share project for the models but i think we won't need the models in this case now the name blazer google auth tutorial awesome name and now we need dot net six configure h4 https asp core hosted so we get the server project and now very important individual accounts so we are using the identity framework and i created one tutorial about identity already so please have a look on my channel or check out the info card or the links in the video description or in the pinned comment you will find the links somewhere on my channel you will find this tutorial in there i um well i also take the steps we take here together but here i will just rush through them because i really want to focus on the google stuff so what we have here now is our client project the server project and the shared project client is just blazer stuff server now is the web api also with identity so as you can see here we've already have a data context right so this is the entity framework as yeah way to get access to the database we have our user model already and when we have a look at the actual identity model you see that there's lots of stuff actually lots of properties no not just a username and password we've got the username we've got the email email confirmed well really lots of stuff right so you might get overwhelmed by the the identity things here if you're trying this for the very first time i wars definitely but it isn't that bad really we just have to take some steps as you can see here there is one migration for us already and when we would run this migration we will create some tables asp and roads asp.net users device codes and so on so again lots and lots of maybe overwhelming stuff but don't worry we will well not go through everything we will just have a look at the most important stuff and this is this table here create table asp.net users now to apply the migration first let's have a look at the correct connection string here of the database you see that this default template is well it wants a local database here and when we run this real quick we see that this database of course is not there yet so if you try to register for an account with or with an account then we will get an error let's see take some time today if you try to login not working and when we try to register for instance tony at start.com [Music] with this password here we see whoops database does not exist with this crazy name so we can go back and let me let me just stop this again and close this now what i want to do is i want to use a sql server express database i've already got the management studio open here again if you're not familiar with it with this stuff maybe first have a look at the the other tutorial or if you are familiar with that just check out the time codes and then skip through this first chapter and if you still need then sql server express please just google for sql server download sql server and let me just just just let me show you this sql server there is this thing so secret server downloads go to download here express or the developer version should also work totally free download now and regarding sql server management studio that's this thing here right so you can download this as well there's the link and then you should get this application here and we will create a new database this is not the database this is a database of my dotnet jumpstart course but apart from that let's first change the connection string so it's installed locally so localhost then sql express database of course well you can leave this name totally up to you let me change that to googleauthdb for instance just for this test here don't need this thing and that's it so localhost sql express semicolon database google off db and that's pretty much it and now to run the migration we also need the ef core tools and for that we enter.net tool install global and then net dash ef telling me it's already installed so what i can do is either choose uninstall right uninstall for instance or and then install it again or simply update and with that i get the latest version and with dot net ef i can double check yep install it now and now you see it here we've got three commands available and the command we need now is dot net ef database update and with updates it will also create the database but it's good that this error happened here no project was found well why is that we have to go to the server directory here so blazer google and so on and then the server almost server directory let's get some room here and now let's try that again and hopefully it will create our database yeah you see lots and lots of stuff is executed here create table create table and so on let me now go to the sql server management studio refresh the databases here it is nice right now you see lots and lots of tables but the most interesting on one for us is this thing here asp.net users it is currently empty but let's just register an account and start the app for that again there it is and now we should see that logging in should now work right and register also so let's try that again with tony stark.com password register worked right so now in the database right click execute sql we see this guy but the email is not confirmed so we cannot log in yet but we can do this when we click here to confirm the account and now it is confirmed and when we try to login now we see that when you enter the correct password yep this should work now and we see hello tony at stock.com isn't that nice here's our profile we can change all that stuff and we can also log out all right and now it's getting interesting right so again when we hit register you see this stuff here by the way this is now the page you see here this is not blazer anymore this is a razer page a cshtml file and if you want to change this file you have to scaffold the identity files and i did this in the other already mentioned tutorial so please have a look there if you want to change all that stuff but now let's focus on google authentication and you see it here already use another service to register there's an article apparently in the documentations so let's have a look there facebook google and so on yeah that's exactly what we need so let's try it with google authentication and now this might be overwhelming when you're trying this by yourself was for me as well so yeah we have to dive deep and this is really pain in the sorry about that but adding a project and an app and so on entering all that stuff crazy but it does work in the end hopefully also in this tutorial but let's see so let's just go through this together first integrating google sign in into your web app let me open this in an incognito window so we can choose another account and here it says go to the credentials page click create credentials oauth client id and so on so let's just try that and we'll first log in with your account all right i am here now because i already created a project but let me let me just go through this with you together now so let's create a new project and we call this now crazy identity google authentication project nice this is the id why not let's create this okay 30 characters only so it should be maybe crazy identity google auth project all right so we did that got our project now didn't mention that here right not sure about that but still we need a project and now create credentials oauth client id all right so create credentials again make sure well that's this is the wrong project let's change that crazy attention to google auth project nice create credentials oh auth client id this is the one okay and now it says to create an oauth client id you must first configure your content screen configure content screen and this is exactly what they are telling us in the documentation let me open this um here as well so i don't have to switch the the windows here yeah okay off concert screen right so we have to go there as well let's find first configure content screen yep this is the one and now we have to pay attention we choose external and create all right okay and now it says app information the app name support email lots and lots of stuff so maybe we can just enter app name it's now my crazy google auth identity app can we actually yeah of course auth identity app nice email address all right app logo and now app domain application homepage do we need this i don't think so this is then mail at patrick.com save and continue all right this worked that's nice so maybe you have to stop the video and just try things out until it works and now what's telling us scopes test users all right so i think we can just save and continue here not sure about adding test users if you want to set the testing only test users able to access the app all right okay so now we should see types external this is the crazy name contact email address and so on and the test user all right now back to the dashboard what are the next steps in the credentials tab of the application dashboard select create credentials all right so now this should actually work right so this was one step too early so we can now say o auth client id application type is a web application in our case well we have named the project right so let's choose the name blazer google off tutorial and now the next step is we have to add an authorized redirect uri and this is really important see here it's https localhost the port for local development of course and sign in google now how do we get the port well we opened the app already here so you see the actual url 7042 but of course we can also have a look here in the server project then in the properties and the launch settings json here we see this url https localhost 704 two so let's copy this and then add this here and also sign in google all right see it here as well sign in google now that's important and this is identity stuff so we add this thing and now we hit create all right and we get our client secret and we get our client id see you can download the json file so you won't lose it and now we have to enter these ids or the client id and the client secret in our application as you see it here right so store the google client id and secret here maybe just a side note when deploying the site either update the apps redirect uri in the google console or create a new google api registration for production well right if you if you deploy your application of course you have to do some more stuff but this is just for learning purposes here this tutorial so that you will see how this actually works now starting the google client and secret first we need this package here microsoft asp.net core authentication google so let's open this link and here we just let's use the dot net cli copy this stuff go back here and stop the application so just stop this and then here we enter the ad package microsoft aspen core authentication google all right done with that and now to configure this we go to the program cs of the server project and you see here i don't know why the syntax highlighting is not really working what the heck is going on here app is closed let's try that again yep now it's here all right we see builder services at identity server add api authorization this is important and after that we see builder services add authentication and then add identity server jwt adds an authentication handler for an api that coexists with an authorization server okay that's nice and here now we want to add our google authentication so back to this little documentation here and in the code i know i yeah i um skip this but just for a second we'll get back to that in a minute you see it here we've got our builder and then services and authentication this thing here you can really copy this so period and then add google yeah i'm lazy so i'm copying this stuff so this should be it and also here you see it here the configuration does not exist here you have to use the builder configuration and here as well builder configuration all right and now this stuff here the client id and the client secret there are different ways to to use them or to store them you could actually just enter your client here right your client id and the secret as well for this tutorial this would totally work the other option is the app settings json file we could just add another section here similar to the connection strings put the client id and the client secret there as well or as the the documentation suggests we can use the user secrets so the secret storage and it says it here the secret with the secret manager you first have to enable the secret storage so what you can do is for instance dotnet user secrets init so let's try that already initialized nice okay so when that is done please have a look here if it's not in your case but when this is done then we can just run these commands here and again i hope this if you've got any problems with this secrets manager then please just try it with entering the the client id and the client secret direct directly here it is really really really annoying when when this is just when you have to stop because of of the of the secrets manager really trust me i know what i'm talking about so this really you want this success moment right you want that feeling of seeing the google authentication work with your application so don't worry about the the user secrets you can do this afterwards but now let's try it with this user secret stuff so we set authentication colon google code and client id to the client id so let's have a quick look again where is it here it is so this is our client id copy and paste successfully saved and now the other one let me close this this now would be this command enter it here and we copy this thing [Music] all right hit return and that's it so we can click okay here should be done this is also what we already did and now we should already be able to sign in with google so let's run the application i think it's already open right yeah you see this here but let me use the other window there it is so let's go here and this is now new right you see this cute little google icon fantastic design i know and now we can just click here and we've got a redirect uri mismatch all right i'm pretty sure you already saw that it's good that this is happening right because with that you now see what what's going on if you configure your app with a wrong redirect uri so let's have a look again there it is and yeah sign in google let's save that and let's try that one more time and now this works you see that my crazy google auth identity app we see our account let's use this account and you've successfully authenticated with google please enter an email address for this site below and click the register button to finish logging in so now let's use something else like peter parker.com for instance we register we can confirm this thing and now let's have a look at the database again refresh we see our new email right see that password hash is null because this is our google account now and now here in asp.net user logins we also see a new entry the login provider is google provided displayed and so on and this is important now the user id see it here it starts with a17 and when we go back to the asp.net users table again a17 so these are really connected now and now let's try to log in with this account again and it worked right i was already uh logged in with google here in this session and so now i can well log in with google in essence and don't have to enter a password and this is pretty much everything as always i will push this to github and then you can check out the code but the most important thing really is this thing here right configuring a project and an application in the google console and getting the client id and the client secret and then hopefully this should work all right that is it google authentication together with identity web api even a secret server express database and blazer so this is how this is done this is how this is done great english again patrick i hope you liked the video and you learned something if so please give me a thumbs up it would mean the world to me if you even subscribe to my channel and even click the bell icon to get a notification for new videos here on my channel thank you so much for that maybe you also want to check out my newsletter for these videos earlier in your inbox and upcoming.net 6 stuff for instance the dot-net web developer boot camp if you want to get early access to that stuff then the newsletter is definitely something you should have a look at and the last thing again thank you so much for your support guys i love you forever for all your coffees teas hot chocolates orange juices i really appreciate it i love you guys forever thank you so so so so much and now if you want to see more.net stuff then maybe maybe you just hang around a little with me maybe we can get to know each other a bit more and you just have a look at the videos here on the side binge watch all my videos then you might know a lot more about net and blazer and maybe now also a bit of angular so if this is something for you check out all these videos thank you so much for watching again thank you so much for your time and i hope i see you next time take care

Channel: Patrick God

Views: 24,976

Keywords:

Id: r3tytnzCuNw

Length: 26min 26sec (1586 seconds)

Published: Tue Jul 12 2022