External Login Authentication from Scratch in Blazor

[Music] [Applause] [Music] [Applause] [Music] nah [Music] [Music] [Applause] [Music] [Applause] [Music] hey good morning how's everybody doing it is Tuesday is Tuesday Wednesday it's Wednesday Wednesday it's Wednesday April 10th of 2024 that's how this week has gone and welcome everybody to the dev talk show I'm Chris Gomez here with my co-host Rich Ross how are you doing doing well I mean hey if you're thinking it's Tuesday and it's Wednesday then I think the week is going quicker than you expected so yeah that's not not always a good thing though no definitely not definitely um yeah we've got uh uh yeah there's there's a lot going on this is uh um it's crunch time for us because it's the end of our fiscal year this now in the fourth quarter so everybody wants to come in and have conversations with this great but we are super busy oh yeah okay you know I can I can imagine so uh um you know it's been a little while since we've been on uh kind of busy to end the last week and then there was an exciting event Monday across North America that um I I did not I was not in the path of totality but did make a little pin wheel viewer and so my daughter and I watched the saw the little crescent sun it's it's actually really um interesting how how much sunlight you get from even a little sliver of sun and I think that's what some of the folks who were in totality were saying is that it doesn't take more than like I don't even think it takes a half a second escaping that for it to be like oh it's pretty bright again yeah but I wasn't there and uh be curious to hear from somebody who was I don't know so so I was in that P we were up in uh Northern New York uh New York State and we woke up that morning everything looked great it was like you know par you know partly cloudy as they say plenty of blue sky and by the time the event happened it was full on clouds we couldn't see a thing I mean we couldn't even tell where the sun really was in the sky so it sounds like it was a wash out but I'll be honest with you the almost four minutes of totality that we experience sure it it was you could see the you know it was like a you know like a um like a rainy day right the clouds are in the sky but you can tell still tell the Sun up there and then all of a sudden it goes into that sliver disappears and it is complete darkness and if it wasn't for the cuz we're watching in a parking lot cuz figured there was nothing around as we plenty to see um that uh if it wasn't for the lights around us it would have been that would that would have if we were in someplace that was completely dark that would have really set it but I mean just the understanding what's going on around our planet and how all of those things interact and how instantaneous things went from light to dark was just it was incredible it was totally worth everything we took to get up there hanging out in the dark clouds and just to see 4 minutes of Darkness was impressive yeah no certainly there was being live stream NASA had a nice live stream different places and and I I'm sure a lot of people really impressed if it for those moments where you can safely look at the Corona and and we didn't you know where I was at we did not get that um and but we did have a lot of cloudiness too during during kind of like what you would call the Peak um yeah the peak as much of coverage as we got um and so there were moments where you could tell like oh it's super cloudy can't not going to be able to see anything and then all of a sudden it would be kind of light again and so I'd grab the little pin wheel box and be like okay let's look you know and so it was cool you know it was cool so for everybody joining us um thank you for joining us and we have been working a lot with Blazer and the authentication and authorization pieces because I think some of the feedback we've gotten from viewers and even ourselves this is why we kind of embarked on this journey is that if you take the step in starting a new project of picking individual accounts then you get an implementation of Blazer that supports individual accounts going to a database with Entity framework core and you are ready to go uh with a full identity solution including if you want to add external login support you know um and by external logins we mean log in with Twitter login with Google login with Microsoft because those are the kinds of things we're doing nowadays when we're building sites is we're asking oursel that first question do I even want to own the login piece yeah do I want to own keeping usernames and passwords do I want to ask my user to have yet another password and I personally have had the feeling for a while that there are two pretty good scenarios where a developer might say you know maybe I don't and one of them is internet facing just all comers I I think of there's like two types of apps in this world there's everybody show up you know this could be xbox.com everyone come on in sign in now frankly you sign in with a Microsoft account there but let's use our imaginations a little bit and say that that's going to an ntity framework SQL Server database and everybody who comes can can you can choose to browse around or you can choose to create an account sign in start using the the the the shopping cart buy game stuff like that there's also a site that I think a lot of our viewers are eager to to create as well because I know this happens to me is I'm at work and at work we say we could use a tool to do something for us I mean it's the TR you know I'll make it as generic as possible we could use a transaction viewer because we all work somewhere where there's transactions being stored somewhere and what happens uh you end up having to call the database team to say hey can I can we see the transac for the last quarter wouldn't it be cool man we should stop bugging the database team what if somebody built a tool oh well should we build a tool like a little Wind forms tool no no what are we using Wind forms for we we have the web like let's just build a website and that sounds like it's this answer to all your problems let's just put an internet website up and we're good and then somebody says wait a second how do we make sure that like only the people who are allowed to view the transactions can view the transactions like once that conversation happens yeah because before that you could say like oh well we'll keep it in the internet so anybody in the company it's fine it's fine it's fine wait a second is everybody in the company is everybody in the company allowed to do this and the moment somebody opens their mouth there now it's like oh well we're going to need like our own internal login and what are you gonna do you're not going to have people create logins for your tool what you want is you want you just want you're probably on like like what most of us watching might still consider active directory or Azure active directory but called entra ID MH um you know that that branding there but it's the same it's the same thing it's the thing we all love and know yeah say well let's just let's just yeah let's just use the corporate uh entra ID like what what's wrong with that we'll figure out what roles they're in and it all sounds great yeah and then you do file new project in Blazer and you go what do I do so we are we're not far past that we've gotten new project up and running yeah yeah right um and so you know let's take a look I've made some change I'm going to go ahead and present on my screen here and I've actually made some changes since last time so I want to share with everyone while you're doing that we'll do uh quick greetings farro cre joining us welcome welcome um and he brings up a good point yes we don't want the janitor to go run the reports on our Internet site so yeah I I think just some general locking down of what's going on is is kind of important here um yeah and so the first step there for me and this is what I'm I'm showing now is I have made some changes if people have been watching the show you have seen that I have when we have gotten to parts of the code that is built into the net platform in Visual Studio you can still hit uh you can hit like like F12 to go to definition and sometimes control F 12 to to push past an interface to the implementation and we've been doing that um in order to say well what what is it that they're doing now what is it that they're doing now I decided to kind of up my game there a little bit there is a feature in visual studio called enable just my code that's going to be this is going to be checked when you install visual studio and so what happens is um by default I it's not going to let you set breakpoints in code that's not yours this could be code in a new get package this could be code from aspnet and just because just because there's some really cool features that will when you go ahead and it F10 it's pulling the source down for you like really quickly it's using like Source link I think it's what it's called I'm not sure if that's what that feature is called um to just go ahead and grab the code and then you scroll up to the top it says licensed by Microsoft so you know you're not in your code anymore you can't set break points there so okay I turned off enabled just my code then I made sure that enable Source link support was checked and I made sure that these symbol servers were checked now from this point on when you step into any net or ASP net core code you could set break points in there and you can debug in there and that so that you can stop and view variable values and things like that right right and so I'm going to go ahead and share this um I I found this you know I have found this to be pretty useful and I think uh I I I do want to say though there's pros and cons to it so the pro is that now I can set break points in and step through aspet core code the con is the first time you do this it's it's got to go get the symbols and ASP net core is a pretty big project and you including a lot of it in your application so you're going to have like this like wait time of the and it's kind of a firsttime thing um but this is actually a pretty cool feature of of that that's kind of enabled in new get in visual studio and and all that all the way around because if you make internal new get packages and you enable Source symbol support which you know whole other show whole other topic then you as an as an another developer in the organization or even yourself you can step into straight into the new get code that you own the new get based code that you own and that can be that can be really helpful to figure out problems so I've done that now nice um let's look at where we are what I did is and I I think I have a little bit of a of a mayaula as it were people who've been following along there is a GitHub repo at the dev talk shows uh GitHub site basically it's called Blazer blazer off from scratch and I've been trying to keep up but I think I've I've made a mistake here and in our last episode we implemented log out and I don't I don't think I have it oh no I don't think I have log out so I think we're I'm perpetually like kind of stuck here unless I or we Implement log out but I I I might try to skip that real quick so we can get into what we're doing now that I've deleted the cookie the tdts cookie then okay now I'm not logged in anymore so if you haven't seen the shows we have some previous shows where we basically did a file new project we started from scratch and then this is a component this is not built in this is not the support you get we did not create this with the individual account switch this component is um it is it is not asking this is not a true production level ready component because it actually doesn't care what you type in here whatever you type in that's fine oh whoops I've double clicked there and so now let me just refresh let's just refresh I don't want to resubmit the form and um it just accepts whatever you log in as a valid user and signs you in and I'm I'm sure people watching might say like I don't understand the utility of that well what we were trying to do as we can see here is we were just trying to demonstrate that your mission to sign someone in is to create a claims principle which you can create from a claims identity that has claims M set an off scheme and the off scheme is just a string that you've defined to basically tell the system okay this is a one way to log people in I'm going to give it a name and then you you call HTTP context sign in async and you're good yeah nice now in a real production application we would have code that verifies that your password was correct maybe some other features maybe verify that your account isn't suspended that you have the correct roles you have the correct permissions like that's all this that's what this is right but all that's on you and is custom for the application you're writing all. net core is saying you're going to need these things regardless of how you're figuring all that out so here are the pieces the that you can assemble so you can do identity right right right um in the future I think it might be interesting for us so asp.net identity is a feature of ASP net core there was also a version in framework it is a whole set of abstractions that for one thing get you these capabilities like sign in async that's from Identity uh it's an extension method that got thrown in once we did using Microsoft ASP net core authentication and we also had to include the new get package prior to that HTTP context was what are you talking about I have no idea what you're talking about so there are other abstractions there's the signin manager the user manager uh the user store these abstractions we have put to the side for now okay um when you are do when you when you create a new blazer project with individual accounts they fully Embrace those abstractions the sign-in manager does the signin but a sign-in manager when you when you create a signin manager when you instantiate one you have to provide a user manager when you provide a user manager to instantiate that you have to provide a user store okay in that particular template those are all already put into the dependency injection pipeline for you using EF using NTI framework and Blazer will either do SQL Server based if you create the project in visual studio it'll do uh MySQL based no SQL light based which is even cooler if you do the project in the command line and the reality is when you go to command line and do the net new you can say no no no I want SQL Server that's what comes in the box if we implemented I user store to whatever we wanted it could be postgress for all I care or it could just be it could be for demonstration purposes it could be in memory maybe I don't know I don't know if that's valuable for this show but maybe we'll think about it if we implemented user I user store we could implement the user manager for that user store we could implement the sign and then then we would get the advantages of all of those abstractions as well but as you know Rich we really tried to break this down yeah so all we have right now is the ability theoretically is if if you've been watching the show and you've been following along I can literally type anything I want in here and I will be authorized for this app as that name so let's just pretend that that is the standard username and login path okay what about that doesn't solve my problem of I'm at work we're on entra ID right and I want a I want someone a colleague to sign in yeah yeah doesn't solve the problem I me I mean they can right because it doesn't matter who's signing in but you might want to have some kind of some role associated with who is signing in or making sure that it's going against your valid credential store to basically be able to say this is this this person has authenticated themselves at this point and not necessarily authorized themselves to do what we're doing is that kind of where we are yet yeah exactly and you know so I'm looking at this sample application so what I'm looking at now what everybody's seeing on the screen this is a sample we started a few weeks ago and we what we did here is we embraced the template and said we want individual accounts we even want Interactive Auto we wanted to see everything yeah and I think that we've added Google support so what I'm going to do is I'm going to run this this has been it's been a little while but this will at least show us the way I'm going to run this and then we can start looking to see what is happening under the hood and do I need all of that if I'm going to implement that that sample application I'm talking about okay so this one says looks like you're not logged in okay I see here's where we used our own component yeah but let's go ahead and use what the app says the app says I can use a local account to log in or another service to log in so anybody watching you've done individual accounts you've gone to the login page and it say it doesn't say this here it doesn't say use another service to log in it says there are no external off providers configured and it sends it gives you a link to show you exactly what to do and I think we did this on the air I think we did this we added Google pretty sure okay so if I just click Google here then Google's going to take over and say hey what the dev talk show website wants you to sign in with Google we're going to share your name email address language profile whatever so I clicked it and oh now Google's making me I guess this is fine I appreciate that Google is saying hey let me just make sure this is Google doing this now saying let that's an important point right right right because because it's not happening in the context of our application that we're creating we've actually sent because you said sign him with Google you were sent over to Google's pages to authenticate so it's in goog Google's home essentially you're doing that yep and just just to be safe I took that off screen even though I was pretty sure it was going to cover the password but you know we're in the age of of of uh of AI and I have heard I actually this is nothing new by the way researchers had already been been doing some some hacking proof of Concepts where just by listening to the audio of you typing on the keyboard they could figure out what keys you were typing now I believe this technology is extremely expensive and it's not something I'm too worried about people watching on YouTube but I am hearing I am hearing some people that that using uh basically by training AI models are accelerating that research so what I figured is let me just take it off screen let me talk over it try to make it a little bit harder I'm actually not really that paranoid about it but the fact of the matter is I'm authenticated yeah and if I log out because Google is already given permission now I click again and it should just jump in and I can just do this now this this could be the rest of the show is log in log out log out log in log out so thanks everybody for joining us um but how does it work right yep so what did you what do we what do we wire up here right this was actually the secret sauce is when you start this project you're going to see uh add authentication was already given to you along with all this other code that sets up the Entity framework it adds the sign-in manager adds adds the DB context all the stuff that we have been and the email uh the the email sender which is the um the piece where it it confirms that you're the user by sending you an email we ignored all of that in our sample we were trying to get to the heart of how do you sign somebody in right so there is a great page in the docs uh talking about external logins uh external authentication in asp.net and asp.net core and I'm going to bring that page up we'll make sure we get this in the show notes on YouTube and um this is actually pretty darn helpful I I there there's a whole set over here there's there's the overview and then there's Google specifically there's Microsoft specifically so um and we'll add authentication in a bit but the thing that got my attention was okay in this template what are they doing and so the way to figure that out is Let's see we want to start by looking at the login page so again when you create this application and you say individual accounts you get a whole lot of stuff in this account folder under components and we have a login page this is now this is not our code this is not our app we are what we are doing is we are learning by looking at the template and in the template they have this is this right here that we're looking at this is the form to take your email to take your password to check box to remember you and then right here we have this this is what I was looking for that looks an awful lot like a Blazer component right yeah external login picker so now my next question was is this Blazer component something in the platform and the answer is no and there's a reason the way I know that is because when we created this project we just gave it a name we called it include okay the intellisense is telling me that this component comes from includes uh namespace components account shared so that's my clue when I'm working with this code just like you might be that's your clue to say oh this isn't something I'm going to go out and look at the platform for this is right here yeah so I go to solution Explorer and I go to account shared and here it is the external login picker okay okay and this probably came about because we selected on the new project template do authentication yep I'm not sure if we went more specific than that but this is yeah there's only one choice though there's none an individual accounts in net 8 that's it okay that's your choice so you when you take the individual account's choice you will get this in your app yep and that's the thing it's it's a compon it's it's part of the template and it's a component that got put in your app yeah it's a component that yes it's a component that got put in your app if I can make a slight like the slight differentiation is that it's in it's code in your app now you own it in your application you're free to change it whereas if something's in the platform look you still kind of own it you're you're taking but you're not going to go changing it you you might build on it right but you're not gonna change it whatever yeah yeah so what are they doing they have a component here that is asking a question if external logins if there's more than one some kind of array here if there's more than one then let's say uh hey there's no external off configured why don't you go look at this documentation to figure out how to do it but if there is something configured then they do they run through each provider that's configured and they create a button for it which is cool yeah and we've been to websites that do that right log with your Google account your Microsoft account what LinkedIn whatever it is this is giving that capability it is it's cool but it makes me think it might be overkill for what we're doing because this had to be generic in terms of we want an easy way for people to get our template get to work add authentication from what they wanted we don't want to have to configure anything else that just should just it should just go it should just work and that's what they accomplished because this is all the code that was required to get Google working that's all that had to happen um sitting back in user secrets are the client ID and client secrets so what I'm not showing you here is going out to that dashboard and creating all that stuff so right as I started kind of diving into What's Happening Here For example what is get external authentication schemes async what is that that's an extension method that's uh well it's part of the signin manager so this is not code that we own but it's part of the sign-in manager and it says why don't I look at all the schemes all the a schemes and if the scheme does not have a display name then I'm G to say okay um schemes apparently can have display names like who knew authentication schemes let's dive in and look at that real quick they have names Handler types and display names okay okay so it says null is valid and used for nonuser user facing schemes fine let's go back to this code they basically just run through the list of off schemes and for everyone that they see where that's not null or empty they assume that must be an external law scheme so let's go ahead and display it okay and when we come back to this uh to what actually happens is we can see that they must be running and I even I even actually walked through that code a little bit which maybe we don't have to do here and they said well there was an off scheme that was that was built in to handle this and then there's another one called Google well that must be the external one I kind of feel like yeah that's what they're doing is there in fact I wonder if I can stop on it let's see let's see I I made all this talk about how I can do debug just my code look at that that break Point's red it's red we're gonna hit it so that's cool and we are in we're in ASP net core identity right now we are not in anything we own y this is the external login picker which yes this code if I go to solution Explorer and click this button it's going to tell me Yep this is yours external login picker so let's refresh this I refresh that page it's waiting to call that method it wants to know how many external logins are there so let's go ahead and jump in and first thing it does is it says well let's get all the off schemes that are available in this app and what it's going to find is uh I took why isn't it showing me schemes I'm surprised that it's not I'm actually a little surprised that I'm not getting it but if I come here it says there's five right here this is a little hard to see okay oh I lost I was hoping it would keep showing it to me there's more than you'd think though okay can I zoom in on that oh no intellisense is the moment I hit the control button tell usense is like oh you must want me to be transparent for a second and it's like nope I didn't really so actually there's another way to do this I can come to the immediate window and I can type schemes and I think this is going to get me what I want yes schemes count to five okay I guess we can't actually see what they are that's all right no big deal what are those schemes there's a scheme for your internal login for the one that and then there's also for two Factor authentication there's another one that kicks off um uh it's a little it's going to be a little small but it kicks off the remember me for two factor and it kicks off um it says it kicks off external but none of those have none of those have if I drill into them it's not going to have a display name if I were to keep Drilling in there it is display name is null right but if I back out and sorry that I can't zoom in on this at least not actually maybe that's not true can't I zoom in with what is live Zoom it's four let's try this okay there we go oh wow okay but here's Google remember I added Google in program Cs and I provided my client ID and client secret it has the display name of Google so I'm I'm I'm not 100% sure if that was like totally by Design and I I don't know I guess it doesn't really matter because what's going to happen is when we get back here external logins is going to have a grand total of one off scheme because it found the one with a display name and this one is Google so it now knows it knows everything it needs um if you drill into Handler type you'll get a bunch of information about there's all kinds of information about that comes along with this a scheme to allow it to know who do I talk to I talk to signin Google or something I forget what the link is and who do I respond back to who is who is Google going to fire its answer back to that is all configurable but you don't need to configure it you just get the button the button works and we're super happy my take on this oh and then we have our log out button so that's pretty cool all of that's great my take on this was now if we head back to our our Bare Bones app was do I need all of of that right so I do need I do want to create a login picker just like our own our own uh forms based login so let's create a component and let's say let's call this just to make sure the name is different my own external login and that's here okay so now we've got it we've got a new component any any questions about that before I start moving on no okay cool that makes sense y okay now I don't necessarily know that I need all this fancy code uh login with Google I'm not 100% sure that I need all the fancy code that figures out whether an off scheme is available like I know what I want to do and and and I know I'm I'm linking up with Google today because that'll save us the time from going out to entra ID and setting all that up but but we'll want to do that because I think that's the internal method that people are going to be looking for that just if you ask me yeah so I think you're right um yeah we'll see where you go through because I do have some questions if I think I know where you're going here yep so all I'm going to do is say you can log in oops you can boy why is it fighting me you're in the code block oh well there you go why am I doing this in the code block that's silly this is the HTML section there you go and just because just because we want to be a pro web developer we'll make sure that we put this in a div and a lot of pro web developers are cringing when I say that you can log in with Google internal Microsoft login coming you promise okay yep so I stole this line of code on line eight I stole this from the external login picker that comes with uh um with the application and you can see what they're doing is they're looping through the provider which is fine like whatever they're looping through their providers but part of me was thinking do I need this I mean I I think I'm not saying that it's it's a bad idea uh and in fact what what might be interesting we could come back to this right is we could say like oh you know now that we have two providers maybe we want a more elegant way to display this button but part of me it feels like we are are trying to demystify this so the least the you know let's let's take out everything that's just not needed I'm not even sure that I really need this value Google what I have is a button that when I submit uh it's going to say log in with your Google account and this is the my own external login component this is our brand new component so I can go to our where did we do this we did this on um the homepage yeah yep here's my own login so let's add our new friend my own external login this is just to show that we're we're we're moving okay now I'm currently authorized so let's uh because we we we're gonna have to get our log out button back but for folks who maybe missed that show I blow away the OS scheme cookie and we are now no longer logged in no that is not production ready code but that at least now you know how it works right so I click login with Google and nothing's going to happen we have no code behind right we don't have the providers enabled in the uh okay yeah we got nothing going on we've done nothing all we did was put a button on a component that's it so um the question now is to say so what what are we going to do when someone clicks on that and probably the easiest thing to do is to set say uh that's interesting that all of this was done oh I see I I left some stuff out here uh oh um we're gonna need a form which is okay because I want this to submit I want this to actually submit out somewhere else so we'll need a form we're going to want to post to that form and then because uh let's see what else do we need I think I will accept this for now I'm not 100% sure if I need it and then we'll close the form if you if you are watching right now and looking at the external login picker you're going to notice that I stole most of this code from there um yeah what is the return URL for the provider that's very interesting proide from I mean in our case it's Local Host right it's it's got to get you back to here yeah I'm not 100% sure why don't we find out from our friends in the previous let's find out what they're doing in here so return URL I'm going to go ahead and set a break point here this is we are now looking at the full code from the template because I just want to see and and so for folks that are watching if you're wondering like how do we figure this out well now you're seeing how I figure it out um return URL was null so maybe that's maybe I didn't need to worry about it right I I might be I might sometimes what happens is you look at the template code and you say do I need this and it's null so it may not have been important well I know that sounds weird you're like you're like how right right maybe just comment that out because if we run into why isn't this working we at least say okay well we we have this commented out here do we really need it yeah well another thing that's happening here okay is that I uh just because we're kind of following their example I'm leaving this my own external login component to call some endpoint okay that endpoint's going to do the work that's going to do the heavy lifting sure and the question is is well wait a second I don't have an account perform an external login endpoint so we're going to once again copy this pattern that's happening in the big template where you may not realize this but you have an identity components endpoint route Builder extensions class that got added to your project boy that's a mouthful yeah yeah and what is this thing doing this is using minimal apis to create some some uh what it's really creating is it's kind of creating some back some backend server side code that like I can go hit that code and then it'll do some stuff for me now why is it doing that well remember Blazer has web assembly and interactive Auto Options yeah and you can't log in from the client loging can only happen from the server um so they create this they map this endpoint and that way what happens is even if you're in interactive Auto interactive Auto can submit a form no big deal submits a form back to the server and you take over here so um we're going to need our own uh version of this I don't know that it has to be called the same thing but we need a place to map endpoints so let's come here and we'll leave it let's see where should we do this um it looks like it looks like we have our own login here so we can maybe call it I don't know um do I want to call it I don't know that I want it in components I don't know that I really is it that important am I Fring over something that's not that important let's um let's just go ahead and create a class here we could always move it can always move it and we'll call it uh R I'm using these terms on purpose so nobody confuses them R identity endpoint extensions okay so we now are going to create a class um and it's going to be an extension method and there's a reason why I want to do this because I want to get it into the aspet core pipeline I need to implement this endpoint con iion Builder extension like I'm not I'm not implement it that's what I need to return uh basically what I'm doing is I'm creating an extension method on top of I inpoint route Builder this is how oh actually it's telling me to do that oh awesome thank you copilot oh and then you went away got it right again okay cool all right so um I'm just curious what it what it offered me there not really anything that I wanted so I don't care that much all right so what do we need we are going to um create an endpoint group this is this is minimal apis if you're not used to minimal apis that's what we're using right now oh I love how it's offering a suggestion stream here but I'm going to copy in some different code okay now what we're doing is we're creating a group called account and we're creating a uh an endpoint called perform exteral login which is going to be called by the previous what is you complaining about here we not returning anything yet right we are not all pass return oh I know why because we have we don't even have a class defined here anymore because I overwrote it oh yeah I overwrote the class that we uh kind of need here's a interesting tidbit since you were kind of running into this from uh the lanky Scottish nerd uh welcome by the way um so alt plus brings back the co-pilot suggestion and let you cycle through them is it alt plus uh period maybe let's see we'll see what happens the next time so that would be alt period wouldn't it yeah it might be okay okay cool so we'll have take a look we don't have to call this let's call this map yep just period okay awesome map identity endpoint extensions not all code pass return a value I think that is true because I have to return the account group that's what I have to do yeah okay oh and then look there it is there's the little so oh yeah it even says it right there check that out alt plus next suggestion you know that's great I love it I love it so alt plus period brings it back there's not many other suggestions that it's giving me which is makes sense it's like you probably want to close that me back out of there yeah there's really no other option here so yeah okay so now we have our identity end point extensions what we have to do is we we need to make this part of our our like those aren't nothing's going to happen yet until I go to program Cs and we map those just like razor components get mapped on line 31 we are now mapping um it's it's map map identity extensions I might have to because I haven't compiled this I may we'll live with this for now see the name spacing I think is kind of kind of blah but that's all right we can always fix that so now are you going to find it for me app zoom in a little bit and what did I call it map identity yes map identity end point extensions now I made that name up but now we have we now have endpoints in here where you can call account perform external login so I should be able to set a breakpoint here we have our external login picker I should be able to go to https and um what I really wanted is I really wanted that break point here because this is mapping it this is actually executing it so here we go we were authorized so we've got to get rid of that now there's all kinds of stuff going on in here there's an identity external cookie like there's all kinds of Madness and we're not authorized and it says we're saying you can log in with Google so the way this should all go down is it should be we should end up here but then we're submitting a form right so that should drop us here okay so we click and we blew up now the required antiforgery request token was not provided and you know and I think I think I did leave out in any forgery token I think I did so let's go back to our component and just to be inspired by the template we're going to go look at their external login picker and look at this yeah so let's get an anny forgery token into form so everybody can see right now that Blazer is always on guard for every form you create to make sure that you have an Ann forgery token which is good I'm glad and that component takes care of it watch famous last words that component takes care of it so when I click on the button we're going to be past it no we're not past it ah so you were right you were right very cool it can be no but you got to tell it regardless right we have to have one okay so we'll find out more about that later but it was a hidden field in the external login picker and then now that we have an external field we have to go one step further we need to supply the parameter from query here um because since we're doing this server side this return URL will not get automatically mapped by uh the model binding since this is a this is a full server side rendered page there is no interactivity on this page we're not using a render mode of interactive Auto or interactive server or anything like that you know so um I have to have that Supply parameter from query at least I believe I do let's see let's see what happens now okay awesome this is what we wanted let's see what got passed in a provider of Google and a return URL of of nothing which maybe will come back to Haas I don't know um now a lot of this code was copied from their endpoint but let's see if we can walk through it is is because you might look at and say like what is it doing well the first thing it's doing is it's creating a key value pair uh well let's just go ahead and run this it'll be easier to look at after it's built is it creates essentially a dictionary okay and the dictionary has a couple things in it because we're going to pass these items to Google um let go to query and results view so that we can just look at what they are maybe I should have done that from live view from the beginning results view return URL there's nothing but action is login call back and we don't even quite know what that means yet so let's go down to the next line of code redirect URL all right so it's building a redirect URL oh whoops I accidentally made a change to the code I did not mean to yeah this there you go it creates this query string for us this redirect URL that it's created is account extern internal login return URL is nothing and the action is login call back so I think what we could do I think here's what we could do we could have that component in a future episode find your what page you're on and throw that into the return URL okay so then so it navigates you back yeah so it navigates you back so what's really happening here is a properties uh an authentication properties object is what we're trying to build up that's what all of this was about was let's build up an an authentication properties project because aspnet the platform offers us this nice little method that challenges and Returns the results in a way that minimal apis can use as long as you hand it these properties and the provider okay it can go look up the provider and move on now this this isn't going to work because what haven't we done yet we never registered authentication a Google authentication Handler so I think in the last two minutes we can get that done that's not going to give us everything we need but it's going to get us what we can do for today so what do I need to do I need to we have ADD cookie we also need we need add Google Google bit yep which also means we need a new get package okay we're going to browse we're going to say authentication dog Google and hope that it comes up pretty high in the list there it is cool sounds good get that in there because without that that extension method is nothing and here we go extension method's there I think I think it's good now oh except for the fact that it's not going to work um because why why aren't we what are we still missing we're missing in user Secrets I need to get I need to get the that's what this is saying it's saying go get oh the authentication uh client ID client secret so I'm going to say manage user Secrets which let me just double check that there wasn't a user Secret in there already I'm going to take it offline real quick just yes it's a still blank file if you're not used to user secrets we get user secrets I'm going to pop that in and then that should work okay what what I want to see before we get out of here is I want to actually see the call out to Google I know I know that we've got to get moving though okay and while you're you're bringing that along I'm GNA bring up this comment here from a little while back from Viger um basically you know is there a log in your database that tells you that someone logged in using your Google account or is that even tracked who is logged in so with what we have here our application doesn't do any of that right it is getting to the point where it can go out and authenticate and say yes here's a valid token for this user but that's all it's going to give us if you if that's a requirement of your application to go do all right Co that uh to go and if it's a yeah if it's a requirement then you can certainly build that in and log it to whatever database or whatever you want but on our side we're not now you might have login tracking on the Google side depending on what you have set up so you can look at and see where are all the places where I've logged in and over there it might be tracked but not in our application at least not in this point right so a couple things um I screwed up anyway and people probably notice that I accidentally exposed the secrets so oops so I will be killing that ooth client in fact it's already dead so but uh that credential doesn't work anymore so which is fine that's something I wanted to do on the show anyway was like you know people watching whatever but notice that the apps request is invalid and the reason why is because our one of the things you have to go tell Google is where to expect the logins to come from and when you're doing development you often put in your local host or something or you or we could even try using like Dev tunnels or or something another time um yeah definitely but what happened there is that this application is every time you create a website in a web application on your machine it assigns it a different port I'm sure that that Port didn't match what was currently sitting in the Google dashboard and if we had more time we could go Rectify that but instead but what I wanted to show was yes it it went out to Google and Google said oh you know what don't recognize where this is coming from so I'm going to deny this request yeah which is great because you want to yeah we're on our way come from one spot with code that we wrote instead of code out of the I wish we could have gotten more but you know what it's almost time for standup um so we will have to come back and finish off getting the information back from Google and getting signed in because um it's a lot less code than what comes in the template not because the template is bad because the template is trying to be more generic and say you might want to register one four zero of these sources and I want these uh Blazer components to react to all those scenarios and do the right thing for you and all you have to do as a developer is just say add Google add Microsoft add Twitter and you're just done and it works right so we're saying what I'm the approach I'm taking is but I don't need all that generic ability I know what I want can I strip it down and get to the place I want to get to yeah which is you know lighten up the the load of code that you have inside of there which is great yeah and I think also importantly more importantly you understand the code that you own now right yeah so getting lots of different scenario options in there it's it's great for getting started but I think driving in a little bit to to um to understand them but also be able to only have what you need yep Control Alt Enter also generates 10 suggestions man I'm G to try to remember all this stuff thank you so much for these tips from the lanky Scottish nerd yeah that's a good one too I did not know that one cool we have more to do thank you everyone for joining us we hope you all have a great day wherever you are and if it's time for stand up then you know grab that cup of coffee and get over there and uh Rich hope you have a successful day thanks you too all right all right see all of you next time yep go ahead you take us out sorry about so uh so so for Chris uh uh yeah how do we do this um thanks for watching and and uh leave a comment let us know what you think and uh hopefully we'll see you next time on the dev talk [Music] [Applause] [Music] show [Music]

Channel: The Dev Talk Show

Views: 461

Keywords:

Id: DAqW5YiqSr4

Length: 58min 36sec (3516 seconds)

Published: Thu Apr 11 2024