ASP NET Web API google authentication

this is per 28th of asp.net Web API tutorial in this video well this is the benefits of social logins and using Google authentication with asp.net Web API so here is what we want to do on our login page we want to include this button login with Google once we click this button the application 3 directors to Google sign-in page where we provide our Google credentials and once we are successfully authenticated by Google it's going to redirect us back to our application where we can see the protected data in our case protected data is employees data let's look at this in action notice on the login page we've got this button login the Google once I click this pattern notice we are redirected to the Google sign-in page now let's login with our Google credentials I'm going to use this username Web API 33 at gmail.com let's provide our Google password once I click sign-in notice I am successfully authenticated by Google and at this point Google is asking for my permission to allow the application to view the data that Google is holding about myself so I love the application so at this point we are redirected back to our application and we are on data dot HTML and notice what the message says here hello Web API 33 at gmail.com so this is the username that I have used to authenticate myself with Google and now when I click load employees I can see the employees data once we click the log off button we are logged out and back on the login page and if you look at these two tables a spinet users and asp net user logins notice in both of these tables we have got an entry for our Google login look at the email address this is the same email address that we have used to authenticate ourselves with Google and look at the password hash column this is null so we don't have to write any code to manage usernames and passwords and authenticate users all this is done by external authentication provider in this case the external authentication provider is Google so what are the benefits of using social logins like Google Facebook Twitter Microsoft etc for application users registration is simple and easy all they have to provide is their social login username and password and the user is automatically registered with our application this also means one less password for the user to remember when users don't have to remember multiple usernames and passwords to log into multiple web sites there will be less failed logins as you know remembering multiple usernames and passwords it's definitely a hassle from the development point of view we do not have to write code to manage usernames and passwords all this is done by the external authentication providers like Google Facebook Twitter Microsoft etc to use Google authentication first we have to register our application with Google to register our application with Google let's navigate to this URL console developers.google.com/live in with our Google credentials once we have successfully logged in we are going to create a new project to create a new project click on this drop-down right here and then select this option create project I'm going to name our project employee Web API service let's click this create button this is going to take a few seconds to complete the project creation notice it is still busy creating the project for us once the project is successfully created click on this tab right here credentials and then click on this option or consent screen and then provide a product name which will be shown to the users so let's specify the name as employee Web API service and let's click the Save button now click this button which says create credentials what we want to do here create Roth client ID so let's select this option of our application type is web application so I'm going to select this radio button and I'm going to leave this default name web client 1 and then we need to specify the authorized JavaScript origin the application is running at this URI localhost colon 3 4 8 3 8 so basically the authorized origin is nothing but the origin where your application is running so let's specify the URI right here and then we also need to specify the authorized redirect URI and the redirect URI is going to be localhost colon 3 4 8 3 8 4 / sign in - Google so this is the URI to which the user will be redirected after he is successfully authenticated by Google and notice here we get client ID and client secret we need both of these to enable Google authentication for our asp.net Web API service in just a bit we'll see how we are going to use both of these let's click OK now there is one more last thing that we need to do here we need to enable Google+ API service to enable that click on library' and under social api is click on this which says Google+ API and then we'll have to enable that service so just click the enable button which is going to enable the Google+ API service for us so these are all the steps to register our application with Google now let's see what we need to do from the web api service ID to use Google authentication first we need to enable Google authentication to enable Google authentication open this file start up dot auth dot CS and scroll all the way down notice the code block that enables Google authentication is commented so let's uncomment this and we need to specify client ID and client secret we got both of these after we have registered our applique with Google so let's go to Google console and then click on this credentials tab and then click this edit icon notice here we have client ID so let's copy that and paste it right here similarly let's copy the client secret and paste it right here next we want log in with Google button on our login page so let's open login dot HTML page and just after this existing user login table we want this social login table so to speed things up I'm going to copy this HTML paste it right here and then change the bits that are required so the text is going to say social logins we don't need any button or anchor elements so let's remove them from there we don't need this call span here so let's get rid of that as well and here we just need one TR we don't need all these TR so let's delete all of them and within this TR let's include a TD and then we need a button for Google login so let's include an input element of type button let's give it an ID let's call this BTN Google login the value on the button is login the Google and let's use the boot share button classes BTN and bTW and success let's save our changes and reload our login page notice now we see log in with Google button let's know wireup click event handler for our login with Google button the ID is BTN Google login so let's use the ID find the button and then wire up the click event handler so what is supposed to happen when we click this log with Google button we want the user to be redirected to Google sign-in page so window dot location dot href equals some redirection URI so where are we going to get that URL from to get that URL we are going to issue a cat request to this URL right here localhost colon port number three four eight three eight four slash API four slash account four slash external logins and then we have got couple of query string parameters I'll have this URL available in the description of this video so issue a get request to this URL which is going to give us another URL and we will specify that as the value right here before we issue a get request let's give our solution a pearl bail succeeded now let's go ahead and issue a get request to this URL right here so once we issue a get request to this URL look at what we are getting back we are getting another URL right here so this is the URL that we want to redirect the user to when we click that log in with Google button so I am going to copy that URL and then specify that right here now if you notice the URL right here we have got a query string parameter which says redirect underscore URI so basically this parameter specifies the URL that we want to redirect the user to after he is successfully authenticated by Google so this URL is encoded here that's the reason why we can't read it easily but I am going to copy it until here so these last five numbers here three four eight three eight that is the port number at which our application is running so I'm going to copy the redirect URI which is URL encoded and I'm going to decode that now to decode the URL simply type in Google URL encode decode and we have a website here URL - and go - decode so let's paste the encoded URL right here and let's decode that so this is our redirection URI HTTP colon four slash four slash localhost colon three four eight three eight now in our case what we want to do is we actually want the user to be redirected to our login dot HTML page after he is successfully authenticated by Google so I'm going to specify this as the redirection URL so let's copy that paste it right here and then let's encode the URL so the encoded URL let's take it and then I am going to specify it as the value right here so instead of redirecting it to the you know root application root I am actually going to redirect after the user is authenticated by Google to login dot HTML page all right so let's save our changes and we also need to do one more change in application o or provider file you can find this file and providers folder so let's open the file and we have to make a change in validate client redirect URI method so again here the redirection URI is specified as the root of our application instead of that I am actually going to redirect the user back onto our application login dot HTML page let's give our solution a build reload the login page and let's log out of the Google account and now let's click log in with Google button we expected it to redirect us to Google sign-in page but we are getting invalid request error this is because if you look at this redirect URI query string parameter the value for this is this notice after login dot HTML we have these encoded characters percentage to F these encoded characters stand for a forward slash so let's copy the redirect URI value let's go to URL and code decode tool let's click this start over link and let's paste our end coded URL right here and let's click this decode URL notice at the end we have got a forward slash but if you look at this file right here application or what provider validate client redirect URI notice in the redirection URL right here at the end we don't have a forward slash so there are two ways to fix this error one way is to include a four slash here the other way is to remove the four slash from here so to remove the four slash let's remove the encoded characters let's save our changes reload our login page and now let's click login with Google button notice now we are redirected to the Google sign-in page so let's provide our Google credentials now let's sign in now Google is asking for permission to allow the application to view our email address and basic profile info let's click this a log button so we are giving of a permission and now we are redirected back to login dot HTML page and look at the URL to the URL we have the access token appended so we need to retrieve this X token from the URL and need to do a few things first let's write a JavaScript function that's going to retrieve the access token from the URL we are going to keep all over Google authentication related JavaScript functions in a separate file so let's right click on the scripts folder and let's add a new JavaScript file let's name this Google authentication and we are going to make use of jQuery so let's drag and drop jQuery and let's roll it to our function let's call this function get access token so to retrieve the access token from the URL let's use location dot hash so basically this is going to check if the URL has got a hash in it notice within our URL after hash we have got the access token so location dot hash is going to written as the hash and whatever we have after the hash okay so if location dot hash is true the meaning if there is a hash in the URL and if location dot hash dot split and we are going to split using this string access to kin equals so we want to split it using that so again if this is true thee meaning if the hash fragment has got this access token equals then we want to split it so if it is true thee then what do we want to do let's actually split it so let's create a variable let's call it access token equals location dot hash dot split access token equals so what is the split function going to do it's going to return as a string array with two strings in it the string at index position zero is going to contain access token equals and the string at index position one will contain the access token value and in the URL in addition to access token we also have few other query string parameters notice here we have token type expires N and we also have state now we don't need all those query string parameters so we want only the access token value so we want to further split the string that we have at index position one so take the string at an x position one and then call again the split function and this time we want to split it using the ampersand character so the access token value ends here and then we have an ampersand there so we want to split it at that point so let's split it using ampersand and let's take the index string at index position zero so this is going to give us the access to again so now we are going to do another check if access token is true D if we have a value in this access token variable then what we want to do is call another function is user registered we don't have this JavaScript function yet we'll create that in just a bit so basically this function is going to check whether if the user you-know-who is authenticated by Google is already registered with our application so to check if a user is already registered with our application let's issue a get request to another URL using fiddler we have fiddler fired up here to check if the authenticated user is registered with our application we are going to issue a get request to slash API slash account slash user info we also need to send the access token to the server using authorization header since the access token is a bearer token we also have to use this word bearer and then the access token value we've got the access token in the URL so let's copy it from the URL so the access token value starts right here and within the URL we have other query string parameters as well token type expires in etc we don't need all those query string parameters we just need the access token value which ends right here so let's copy it and paste it right here let's execute this request notice the request completed successfully and look at the response we got we got a JSON object and look at this property has registered this is set to false so basically the user who is authenticated by Google is not yet registered with our application so the function that we are going to know right now is going to issue a get request to this URI and check if the user is registered with our application if the user is already registered with our application then it's going to store the access token and user name in browser local storage and then redirect the user to protected areas within our application in our case he will be redirected to data dot HTML in case if he is not registered this function is going to call another function which we are yet to implement and that function will have the code to register the external user so first let's implement is user registered function which is going to check if the user is registered with our application we are back in Google authentication dot J's file let's implement these user registered function to this function we are also passing the access token so the first thing that we want to do here is issue an ajax call let's specify the ajax options the first thing we want to specify is the URL the URL to which we want to issue a request is right here / api / account / user info and that URL we want to issue a get request so method is get and we also need to specify headers first let's specify content type header content type is application for / jason and let's also specify authorization header the value for this is this word vader followed by a single space and then to that we will append the access token which is coming into this function as a parameter and when the request completes successfully we want to handle the response that comes back from the server using this success function so let's pass the response to the function and the first thing that we want to do here is check has registered property notice once we issue a get request to this URL and the response that we get we got this has registered property which tells us if the authenticated user is registered with our application or not if the user is registered with our application then we want to store the access token and username in local storage and then redirect the user to data dot HTML page so local storage dot set item let's use the key as access token so this is the same key that we are using on the login page and we are getting the access token from the parameter similarly within the local storage let's - username as well let's use the key as the username and where are we going to get the username from we get the username from the response object using the email property so let's use the response object email property and then finally we want to redirect the user to data dot HTML page so window dot location dot H ref equals data dot HTML so if the user is successfully I mean if the user is registered with our application this is what we want to do if the user is not registered with our application then we want to register the user so to register the user we are going to call another JavaScript function let's call it signup external user and this lets pass the access token we'll implement the signup external use a function in just a bit first let's look at the URL that we need to issue a request to to register the external user here is the URL slash API slash account slash register external to this URL we need to issue a post request first let's make a copy of this function is user registered and then change the bits that are required first of all the name of the function is signup external user to which we are passing the access token and then we want to issue a request to this URL so let's copy that and specify it right here and to this URL we want to issue a post request instead of a get request the headers are going to be the same and when the request completes successfully that is when the user is registered successfully with our application we want to redirect him to Google sign-in page that is the same page to which we redirect the user when we click login with Google button that is present on all login dot HTML page so I am going to copy this line of code right here and then paste it right here so what is this signup externally use a function doing this registers the user with our application and then redirects him to Google sign-in page we also need to make a change in register external function this function is present in account controller so let's go to account controller and here is the register external function so stuff all we don't need this parameter register external binding model parameter and so let's get rid of that we don't need this F block as well so let's get rid of that as well and to get the email property value we are going to make use of this info object instead of the model object we have already deleted the model object so it's no longer available but to get the email property value let's use the info object which also has the same email property and let's go to login page and let's reference this Google authentication dot JS file on our login dot HTML page this script file is present in scripts folder so let's drag and drop this just after the jQuery script file here and then within our ready function let's call get access token function now let's look at the flow let's see what happens you know when we login with our Google credentials so on login dot HTML page we have this log in with Google button we click the button we send the user to Google sign-in page so the user logs in with his Google credentials once that is successful Google will redirect the user back to login dot HTML page that is the same page with access token appended to the URL and on this page we are calling get access token function and what is this function doing it retrieves the access token from the URL and then calls is use a registered function passing it the access token and what is the C's use a registered function doing it checks if that external user is registered locally with our application if he is already registered with our application then it's going to store access token and user name in the browser local storage and redirect him to the data page where he can see employee's data in our case the external user is not yet registered with our application so in this case it's going to call sign of external user function passing it again the access token and what is the sign of external user function doing it registers that external user with our application by issuing a post request to this URL and once the user is successfully registered it redirects us back to the Google sign-in page and this time again the access token method will be called get access token it retrieves the access token from the URL and then this time since the user is already registered with our application that's going to store the access token username and browser local storage and then redirects the user to data dot HTML page where he can see employee's data so with all these changes let's give our application a build build succeeded now let's go back to login dot HTML page we are already logged in with this email address Web API 33 at gmail.com and notice to the URL the access token is appended so at this point when we look at these two tables a spinet users a spinet user logins we don't have web api 33 registered with our location yet so these two tables are empty so when we click login with Google button look at what's going to happen we are redirected to data dot HTML and look at the message hello Web API 33 at gmail.com and then I click load employees we can see the employees data and at this point if we look at these two tables notice there is an entry for web api 33 at gmail.com in both of these tables so this external user is now registered with our application now let's log out of gmail and let's also log out of our application and at this point when we click login with Google it's going to redirect us to Google sign-in page let's login with another email could wait it let's provide the password and sign in notice it's asking to allow the application to view all our email address and basic profile information let's allow it and now we are redirected back to data dot HTML it identifies that I am logged in with good Wengert at gmail.com and we can see the employees data as well so at this point if we look at these two tables we have an entry for could when cut at gmail.com we are back on the slides let's quickly recap the steps to use Google authentication first we have to register our application with Google to register the application with Google go to console developers.google.com step two in startup dot dot dot CS file that you can find in app and it's called start folder uncomment this block of code include client ID and client secret that you have got after registering your application with Google this block of code enables Google authentication for asp.net Web API service step 3 in login dot HTML page include this HTML table which displays login with Google button step 4 wire up click event handler for login with Google button when we click login with Google button we are redirecting the user to Google silent page to get this redirection URL issue a get request to this URL right here step file modify validate client redirect URI method to redirect the user to login dot HTML page after the user is authenticated by Google you can find this method in application / provider dot C as file in the providers folder notice here we have changed the redirection URL to four slash login dot HTML instead of just the forward slash step 6 add a JavaScript file to the scripts folder name it Google authentication dot J's and include these three JavaScript functions get access token which retrieves the access token from the URL these user registered this function checks if the user authenticated by Google is already registered locally with our application sign of external user this function registers the external user with our application and here we have got get access token function here is user registered function and finally sign up external user function step seven in account controller dot CS modify register external method to remove the parameter register external binding model parameter and we also removed the if model state dot is valid code block from there and then we are using info object instead of the model object to retrieve the external user email and finally on login dot HTML page reference Google authentication dot JS file and call get access token function so those are all the steps required to use Google authentication with asp.net Web API thank you for listening and have a great day

Channel: kudvenkat

Views: 164,223

Keywords: asp.net identity google authenticator, asp net web api login google authentication, asp net web api 2 social login, asp net web api external authentication, external authentication services with asp.net web api, asp net identity external login, web api external login, web api oauth2 google, asp.net web api oauth 2.0 tutorial, asp net web api google oauth 2.0

Id: WsRyvWvo4EI

Length: 32min 35sec (1955 seconds)

Published: Fri Dec 30 2016