ASP NET Core google authentication setting up the UI

they see sparked 1:06 of a speedo netcode tutorial in this video we'll discuss integrating Google or authentication in our Explorer net core application well setup the UI and also configure to redirect the requests to Google for authentication when this Google button is clicked in our next video we'll discuss handling the authenticated user identity received from Google so the first step here is to configure Google authentication for our asp.net core application we do that in the configure services method of our startup class notice on this services object which is of type I service collection we have add authentication method and on this we have add Facebook to configure Facebook authentication similarly to configure Google authentication we have add Google enter this method let's pass lambda as a parameter I'm going to name the parameter options when I hover the mouse over notice this options parameter is of type Google options we use this Google options object to specify client ID and client secret if you remember we discussed registering our application with Google and obtaining author client ID and client secret in our previous video at the moment I'm on console to developers.google.com and I'm already logged in when we click on the credentials tab and then click Edit against our project name we see both the client ID and client secret the code required for Google authentication including this add Google method is present in a new trade package so if we take a look at the new gate node in the solution Explorer we have the asp.net core meta package and when we expand this we can see we have a package with named Microsoft a spinet core authentication dot Google this is the package that contains code for Google authentication similarly we have packages for Facebook Microsoft and Twitter authentication since we are using asp.net core 2.2 these packages are automatically installed for us as part of this meta package if you are using an older version of asp.net Co you may have to install these packages yourself manually our next step is to design our login view like this we already have a section to allow the user to log in using their local account now we need a section for external login before we could design our login view like this we need to include two more properties in the model of this login view the model for this login view is login view model so let's get to login view model within our project we need a property to hold return URL the property type a string and the property name is return URL we need another property to hold the list of configured external authentication providers at the moment for our project we only have Google authentication configured in addition to Google we can also configure Facebook Microsoft fitta etc so this property that we are going to include here is going to contain the list of these configured external authentication providers the property type is a list of authentication scheme and let's call the property external logins this authentication scheme type is present in Microsoft a spinet core authentication namespace so let's bring that in if you are wondering why we need this return URL property well as the name implies this property holds the URL the user is trying to access before authentication that is before signing in so we use this property to preserve and pass that URL between requests so we can redirect the user to that same URL after successful authentication it is the login action within our account controller that serves this login view now what we want to do is populate these two new properties before serving this login view so let's get to the login action within our account controller first we want to pass return URL as a parameter to this method model binding in asp.net core is going to automatically by the value from the URL to this parameter if the use of this parameter is not entirely clear at the moment please don't worry in our next video when we see this parameter in action it will be much clearer at that point now this login action is going to call another basic method so let's make this method also async we also need to change the return type from I action result to tasks of I action result the model for of a login view is this login view model class and in this class we have just added two new properties so within our login action let's create an instance of login view model set return URL property to this incoming return URL parameter we also need to populate external logins property and the value for this is going to come from the injected sign in manages service get external authentication schemes async method as the name implies this is an async method so let's await it and then convert the result that we get back to a list to list is n system dot link namespace so let's bring the namespace in and we want to pass the model object to the view get external authentication schemes async method returns us the list of all configured external login providers at the moment for our project we only have one login provider configured and that is Google so if we run this project right now this property is going to contain just one external login provider and that is Google now let's look at the changes required in our login view however login view is in the account subfolder in the views folder we want this login view to look like this divide the page into two sections this section on the left is for local account login in the section on the right is for external login first let's change the text here to local account login move this h1 element inside this dev and we want this first tip to be only six columns wide let's also include a horizontal line and then we want another div that is also six columns wide for external logins so let's make a copy of this and then include another day right here the heading for the section is external logins let's also include a horizontal line and we are going to write some server-side code the model for this view is login view model and before passing an instance of this class to the view we are populating external logins property with a list of configured external login providers so let's include an if block here and then check the count of external logins if the count is zero that means we do not have any external login providers configured so let's display a text saying so and let's comment this one login provider that we have already configured and then run our project and see what we get at the moment we do not have any external login providers configured so when we navigate to the log in action we see no external logins configured now let's stop debugging and uncomment this code now we have Google configured as the external login provider so we want to display Google button like this inside a form so for that in our login view let's include an else block we want to form with the method attribute set to post and this form must be posted to external login action within our account controller we don't have this action yet we'll create it in just a bit we are also passing the return URL as a route parameter inside this form let's include a development with a for each loop and look through each external login provider in model . external logins as we are looking through for each external login provider we want to display a submit button like this for that let's include a button element with the type attribute set to submit I am also going to include name attribute and set it to provider and the value to add provider dot name at the moment in our project you only have one external logon provider configured and that is Google and through this loop variable we have access to that configured login providers and on the provided loop variable we have name property which gives us the name of the login provider in this case it is Google in addition to name we also have display name name and display name both have the same value in this case Google let's display the value that we have in display name property on the button notice on the provider variable in addition to name we also have display name let's also include the title attribute which will be displayed as a tooltip and a value for this is login using you are at provider dot display name account with all these changes in place let's run our project and see what we've got so far notice now we see the button Google and when I have the mouse over we see the tooltip login using your Google account so this property display name is returning the value Google because our login provider is Google similarly named property also returns the value Google now notice when I click this button we see 4:04 error that's because at the moment within our account controller we do not have external login action so let's include that now in our account controller let's include external login action it has two parameters the name of the provider as a string and the return URL and if we take a look at the button HTML notice the name of the button is set to provider and this name matches the name of the parameter and the button value is set to provider dot name this gives us the name of the external login provider in this case it is Google and this value is automatically bound to this parameter because the names mat and asp.net core model' binding does that for us automatically what should happen when we click this Google button well we want to send the user to Google sign-in page where the user will provide his login credentials upon successful authentication we want Google to redirect the user back to our application first we want to build that redirect URL so let's create a variable for that to build this redirect URL let's use your alert action you want to send the user to external login callback in account controller and we also want to pass return URL this return URL might be slightly confusing at the moment but please don't worry when we look at this in action in our next video we'll be much clearer next we need to configure a couple of properties for the external authentication provider for that let's create a variable called properties and then use the injected sign-in manager service configure external authentication properties method and this method takes two parameters the name of the external login provider and the redirect URL finally return challenge result passing it the external login provider and the properties that we have configured this challenge result also implements I action results and it redirects the user to the external login provider sign-in page in this case Google sign-in page with all these changes in place let's run our project one more time notice now when we click Google button we are redirected to Google sign-in page notice the name of the application right here this is the name that we have configured on the auth constant screen we discussed configuring the OAuth constant screen in our previous video now let's provide our Google credentials notice we have a full 0 for error upon successful authentication Google redirected us back to external login callback action within account controller now the question is why did Google send us back to this action method well that's because that's what we told using this redirect URL upon successful authentication send the user back to external login callback action within the account controller and at the moment within our account controller we don't have this external login callback action and that's the reason we see this 4:04 error in our next video well discus handling authenticated identity received from Google that is will implement external login callback action within our account controller that's it in this video thank you for listening you [Music]

Channel: kudvenkat

Views: 61,094

Keywords: asp.net core identity external login, google external login setup in asp.net core, external login providers in asp.net core, asp.net core external authentication, asp.net core 2 external authentication, asp.net core external auth, asp.net core login with google authentication, asp.net core identity social login, asp.net core social login, asp.net core mvc google authentication, asp.net core mvc oauth2, asp.net core mvc oauth, asp.net core oauth authentication

Id: fgzRnlB992s

Length: 14min 15sec (855 seconds)

Published: Tue Sep 24 2019