Facebook has a popular API. To use the API, you need to get an OAuth Access Token first. In this week’s episode, I show you hands-on how to get both the OAuth token and how to call the API.
In the video, I show you how to use the worksheet as a step-by-step guide. It makes your life much easier because it guides you through the process, and helps you to get all the nitty-gritty details right. Without it, you would probably spend a lot of time reading the documentation or figuring it out by trial and error.
Get the Facebook API & OAuth Worksheet, I will mail it to you. Just leave your address below.
Learn about OAuth in a more structured way, with step-by-step guides:
Transcript
Do you want to use the Facebook API? Do you get stuck at the authentication part?
Well there’s lots of documentation on Facebook, but the authentication is such a tricky part and the only thing you want to do is basically call a Facebook API. So what are all the steps on Facebook? What do I need to do how do I get an access token and OAuth token and how do I call the API? This is what you learn in this video.
Because people usually don’t think that’s so super easy and straightforward I have created a handy resource it’s a worksheet the Facebook API worksheet I call it and in this video we will go through this worksheet it’s a step-by-step guide that takes you through all the important things you need to do right from the start and then in the end to calling the API.
So you don’t miss anything and you don’t need to read up every little detail in the documentation so here’s his worksheet and I will tell you how you can get this worksheet if you want to use it for your own project later on.
There’s a couple prerequisites all right you need to have a Facebook account if you want to follow along this tutorial and you need to have curl installed so you can do API calls or you have something similar or a postman or something you need some way to call APIs — and there are a couple steps here until you can call the api the first step is actually climbed registration this is the thing that usually trips people up.
I will show you I will actually do the exact same thing that you would need to do for your app client registration and one client registration you get a couple of credentials for your app and that you can use later on. Then you start with authorization endpoint this is where you give the end-user possibility to login to Facebook. So this is a UI thing.
And the second part is the token endpoint which goes by a back-channel right so and then once you have received all the responses from the token endpoint you have an access token and now you can finally do your API call.
So in the end of this tutorial you will be able to call the graph API from Facebook and just do a call on the /me resource, to get some information about the first name or the name of the logged in user. But of course does not limit it to just the name it can be any a graph API from Facebook that you can call later once you have completed the first steps and the first steps are the important ones.
So we start with the first thing and that’s client registration. When you want to use an API from Facebook your app is the client and it needs to be registered. Facebook needs to know what this app is who who it belongs to who owns it and what are the settings and the configurations for this app and therefore you need to register.
An app gets some credentials, so it’s basically the same as if you would sign up for Facebook you also need to kind of go there put in your name and put in your phone now burn so forth and then you get your credentials you get your your login and the same thing is true for an app so you need to register your app there’s this webpage called developers.facebook.com
Let’s just go there to developers.facebook.com
Nice website but — there’s lots of stuff on there right if you just want to call an API there’s way more information right so the important thing is that you go on “my apps” and then you say “create app”
I’m already registered as a developer there so maybe there’s a step before that, where you just sign up. But basically everyone is on Facebook notice so so probably you’re all good. You just go to this developers.facebook.com and and you will be in there right so you say create app you want to give it a new app ID display name we’re gonna call this “myfirst”
Contact email yeah it looks good, click on “create app”. ID security check. They don’t want this to be scripted or automated so that’s why there is a robot check in there or capture okay so we’re gonna create my app. my app is called “myfirst” so now the APIs already created right in the list of my apps in here these are all my apps and there is my first app in there okay we can see what’s in this “myfirst” app on the left side there is settings settings are actually pretty important let’s go into the basic settings there’s something called an app ID and app ID is also called client ID that’s the identifier for your app that has been given by Facebook so we copy that and put this actually here at a client registration into our worksheet because we will use this information later.
So app ID is also called client ID and it is this number. Next step is the app secret that’s already in there so I will show this secret now. Copy-paste it into the worksheet.
For the security people that are watching this until you will see this video this app including all the credentials are already going to be deleted so there’s no need to kind of try to hack this but yeah is all gone already it’s just for testing purposes.
Now we have already filled-in two elements in our worksheet: the client ID and the client secret.
Now we need to have the redirect URI now redirect URI is not so straightforward as you can see there’s lots of information everywhere and this is all not really relevant for the purpose of just calling an API.
If you want to call an API you need to add the login as a product so you go here products say facebook login say set up basically adds a product and you say web site URL well I’ll take my own site go on save and we’re good right I mean this is the basic setup now we go into settings and in settings you have a lot of configuration and the most important thing that you need to do is put a redirect URI. Facebook is very particular about this redirect URI you can put in whatever you want but it will put a splash in the end, it automatically puts it in. So you need to be really careful when you put it in and because it really checks later on based on the exact match. Save Changes ok.
Let’s check how it put it in yes it put it in with the slash in the end how we want to dit now we put this also in the worksheet and the next step is a URL encoding of our redirect your I take a URL encoder put it in encode this is required because the redirect URL will be a value of a query parameter later on and that’s why I needs to be URL encoded so what is this redirect URI right if you don’t know off and then the redirect URI is I’m that your I or URL of your app and this under this address you need to write later on a so called redirect endpoint it’s a small web application that can be called or that can be redirected to.
A HTTP GET will go to the redirect endpoint and in the request you will later on receive a query parameter called code from the authorization endpoint and that’s that it’s important that this code parameter gets to your app right so you need to write this and maybe if you if you’re not familiar with what you should do on this redirect end point you need to learn a little bit about off at another point but for now I think we have configured our app correctly settings are saved and we’ll go back to the dashboard.
Yeah, this all looks good.
Now let’s continue on the worksheet. Next up in the worksheet is calling the authorization endpoint in the browser and for calling the authorization endpoint we need to fill in a lot of these parameters that we have just configured in the app for example we need to have the redirect URI in there okay so the URL encoded redirect your eye goes in here okay I just overwrite this placeholder there then we need to have the client ID this is number identifier of our app and then there is a state parameter I just set the state parameter to some value but if you write production code then you need to keep track of the state right you need to generate something unique in your application when you call the authorization endpoint and then later on on your redirect endpoint where you receive this parameter this code parameter you need to check it that it’s actually the same as you put in in the beginning okay so we have prepared our URL and we’ll just fire it up this is what would happen if a user later on logged in to your app if he locks into your app then he needs to authenticate with Facebook and I’m already authenticated right in my browser and probably lots of your users are already authenticated with Facebook so they don’t need to go through the step of logging in putting their Facebook password in and so forth so what you just see now is just a request for sharing data from Facebook to our “myfirst” app. It describes pretty clearly what it wants to share my first will receive your name and profile picture. I want to continue as Matt so this is a logged in user and I kind of agree to this data sharing.
What happens next I come to my redirect endpoint. The important thing is just getting this code parameter write this code parameter and if you copy paste you need to watch out that you don’t copy the state which is by the way the correct one. The one that we put in comes out here so that’s very good take the code and save it here in our worksheet okay first step is done on the authorization endpoint next step is the token endpoint right token endpoint on Facebook is not the standard that you have and off the standard North would be to do a post on the token endpoint but Facebook doesn’t get it so therefore our curl call here which goes to token endpoint is configured appropriately I already put the URL in to the v6 auth access token API and now we need to pull the parameters here the code that we have just got mmm let’s go in here and now we need to go up need to have the client ID client ID or is it yours declined ID we need to have the client secret client secret from before it’s the one from registration let’s go in here and the redirect URI and it’s the HTTP API University of Kong of course to URL-encoded version of it so that looks good.
Curl where’s my curl where’s my command line putting in the call what do I get back? Well a couple of HTTP header parameters while below blah blah and a jason construct this jason construct already contains an access token excellent this is what we want it right so the thing is this here what we have this response is not the access token but it contains the access token there is meta information in there so this is the access token I’ll copy it out here for later reference because now we can call our API finally finally calling the API we’re gonna call the graph API from facebook using the me but we can’t just call it we need to put the credential in Quran shil is the access token all right the one we just got in the previous step and that copy this call over here fire ah it worked what do I get I get a JSON construct.
wow this is a small one small JSON but nevertheless I can format it nice. I have an ID and I have a name all right so oh there it is that was from starch to API call all the steps that you have to take in order to do this API call and to get the data that you need in your app now there were a couple things you needed to register the app you needed to call the authorization endpoint then the token endpoint and then finally the API right there’s of course a lot more api’s on Facebook that you might want to call and we can’t go through that but there’s good documentation of Facebook so I trust that you will find that but well this worksheet where do we get it right where do you get this worksheet without this worksheet you will be lost you will not know which parameters to use and when we’re all right so I will put the address forgetting the worksheet in here in this call will pop up and you can just go through this URL and and get it, work with this worksheet.
That’s everything for today for Facebook but this series will continue so in the next week we’ll have another API we’ll have another possibility to get to learn how to use an API how to use OAuth for that API and I am looking forward to your suggestions to your ideas which API do you want to know more about just post it in the comments below and I will do my best to review that API and then don’t forget to subscribe so see you next week looking forward to it
Also published on Medium.
