ASP NET Web API facebook authentication

this is per twenty nine of asp.net Web API tutorial in this video the disk is using Facebook authentication with asp.net Web API this is continuation to power twenty eight so please watch part twenty eight before proceeding so here is what we want to do on our login dot HTML page in addition to login with Google button we also want to include login that Facebook button when the user clicks this button the user will be automatically redirected to facebook login page once he provides his Facebook credentials and once they login is successful the user will then be redirected to our application with an access token which is it proof that the user is successfully authenticated by Facebook and then our web application will grant access to the user to the protected resources to use Facebook account for authentication we will have to first register our application with Facebook to register our application with Facebook navigate to develop list dot facebook.com once we are on this side click the login button and login with your Facebook credentials once you are successfully logged in we'll have to create an application so to create an application click this button create app provide a name for your app I'm going to name this test app and provide you our contact email and select a category we can select any category let me select education and then let's click this button create app ID and we need to end this security check code so let's go ahead and enter this and then click submit' button this is going to take a few seconds to create the application for us the application is successfully created now we need to make this application public to make this application public click this link right here a preview and then click this button it's asking for our confirmation to make the app public so let's click the confirm button the application is now made public next to this application we need to add facebook login product to add the facebook login product click this add product link on the left we have the facebook login here so let's click this get started button so we have just added facebook login so click this settings link on the left and here we have to provide or redirect your eyes and if you look at where our application it's running its rang at this URL localhost colon 3 4 8 3 8 that's the port number so let's copy that and specify that URL right here so that's the URI at which our application is running we also have to specify the redirect URI so it's going to be same port number 4 slash sign-in - Facebook for Google we have specified the redirect URI as sign and - Google for Facebook it is sign in - Facebook let's save our changes the changes are saved now let's go to dashboard so here we have the app ID and app secret we'll use this app ID and app secret in our asp.net Web API service in just a bit the next step is to implement Facebook back channel handler so what's this Facebook back channel handler let's understand that now Facebook has made a breaking change to its API version 2.4 prior to 2.4 this is how the URI used to look like now notice to the URI we are sending access to again using a question marks the first query string parameter so we are appending that to the URI using a question mark now with Facebook version 2.4 they have made a breaking change and the changes in addition to access token they also want the list of fields that we want from Facebook so in this case we want ID and email and that is appended to the URI using question mark so the next parameter which is the access token that's now appended using an ampersand that's a breaking change because the default implementation provided by Microsoft for the Facebook client appends the access token using a question mark instead of an ampersand so we will have to change that to ampersand and to do that we are going to implement this Facebook back-channel handler so let's see how to do that now this is the same project that we worked with in our previous video so that is employee service project let's add a new folder let's call it Facebook to this folder let's add a new class file let's call it Facebook back-channel Handler and this class is going to inherit from HTTP client handler class this class is present in system net dot HTTP namespace so let's bring that namespace in within this class all we are going to do is override send async method that is present within the base HTTP client handler class we want this method to be asynchronous so let's use async keyword since we are using async keyword we also have to use a weight keyword and we're going to make use of this request object which is coming into this function as a parameter so if not request dot request URI dot absolute path so if the request URI absolute path if that does not contain so / oh art then all we want to do is lick restored request URI equals new URI request daughter equal to RI dot absolute your i dot replays so what they're going to do we are going to replace question mark access underscore token where ampersand access underscore token so that's all this function is going to do replays question mark access and the spoken with ampersand access underscores token so let's see what changes is the code that we have just implemented so that's our second step implement Facebook back-channel handler to address the breaking change introduced by Facebook to its API version 2.4 the next step is to enable Facebook authentication in startup dot or dot CSV file so let's go to startup dot or dot CSV file remember in our previous video we have enabled Google authentication now let's enable Facebook authentication to do that I'm going to create a variable let's call it Facebook options equals new Facebook authentication options this class is present in Microsoft that open door security dot Facebook namespace so let's bring that in and we're going to specify few options here going to specify a PI D AB secret remember we got these two after we have registered our application with Facebook so let's navigate back to developers to our Facebook comm they've called the app ID here so let's copy that and specify it right here similarly let's copy app secret and specify it right here in addition to app ID and app secret I'm also going to specify back-channel HTTP handler we have just implemented Facebook back handler so let's include a new instance of this class as the value for our back-channel HTTP handler and this class is present in employee service dot Facebook namespace so let's bring that namespace N and the last thing that we need to specify is the user information endpoint remember that Facebook API version 2.4 this is the endpoint which we are going to issue the request so let's specify that as the user information endpoint now from the user information endpoint we want email so to the scope let's add email and to enable Google authentication on the app object we are calling use Google authentication method so to enable Facebook authentication we are going to call use Facebook authentication method and this method they are going to pass the Facebook options that we have just created so this is the code required to enable Facebook authentication so let's save our changes so that's our third step an able Facebook authentication in startup dot or dot CSV file the next step is to modify the HTML on our login dot HTML page to include login with Facebook button so let's go to login dot HTML page here I notice we already have log in with Google button so let's make a copy of this TR and then change the bits that are required let's change the ID of the button to be DN Facebook log in and let's change the text to log in with Facebook let's see what changes reload our login page notice now we have log in with Facebook button here is the HTML required for that the next step is to wire up click event handler for our login that Facebook button let's scroll down to the script section notice here we already have the even handler for login with Google button let's make a copy of this and then change the bits that are required the ID of the button is BTN facebook login so let's copy its ID and specify that right here and then we also want to change the provider from Google to Facebook because when we click login with Facebook button we want to redirect the user to facebook login page let's save our changes here is the code required for that the next step is to modify these two JavaScript functions these user registered and signup external user functions that are present in Google authentication dot JS file so let's go to Google authentication dot J's file notice this method signup external user look at this you are right which we are redirecting the user notice the provider it's hard coded to Google that's because in our previous video we had only one login provider which is Google but now we've got to login provider's Google and Facebook so depending on the login provider that we are using we'll have to supply the appropriate provider name we can't hard-coded like this so let's introduce another parameter to this function I'm going to call it provider and then let's replace this hard-coded value from here so instead of using Google let's use the provider parameter and obviously when we call this function we also have to supply a value for this parameter and we are calling the sign of external user function from this is user registered function so when we call this function we will have to supply a value for this provider parameter now look at this success callback function so for this function we have this response parameter so response parameter has got login provider property which tells us who the provider is Facebook or Google so let's use that property login provider let's save these changes let's give our solution a build and reload the login page I'm already logged into Facebook so first let's log out of Facebook and now let's click this log in with Facebook button notice now we are redirected to facebook login page let's login with our Facebook credentials I am authenticated and I'm automatically redirected to data dot HTML page and then I click the store employees button notice we can see the employees data and look at the email address here Web API 3-degree at gmail.com and if you look at ASP net users and ast net user logins table notice we have an entry for web api dilatory at gmail.com the email address that we use to log into Facebook now let's log off from our application and let's try to log in with Google provider so let's click log in with Google button notice we are redirected to Google sign-in page let's log in using code banker at gmail.com I am I am identified by Google we will be redirected back to data dot HTML notice they are using could wink at at gmail.com and then when I click load employees we can see the employee's data now if we go back and check SP net users and asp net user logins table we also have an entry for could wink at at gmail.com so at the moment we have both Google and Facebook authentication so here are the modifications for is user registered function and signup external user function thank you for listening and have a great day

Channel: kudvenkat

Views: 105,820

Keywords: web api 2 facebook login, asp net web api facebook oauth, web api 2 facebook authentication

Id: kxLxlukWuVg

Length: 14min 56sec (896 seconds)

Published: Wed Feb 08 2017