Hello everyone
Today we are going to learn, How to integrate Login With Facebook feature in our apps. And for this, we are going to use Facebook OAuth APIs to
- Generate verification code
- Getting user approval
- Getting User details like Name, Email & Profile Picture
But before we start we need an access token to make requests on Facebook OAuth API request. And for this, we need Client ID and Client Token.
here is the step-by-step guide available on my website to get the credentials. Follow the steps and get the access token.
Alright! I assume that you now have your access token with you. So let’s proceed to our project.
Design
Login to the @thunkable dashboard and create a new project. ( you can use your existing project too ). here we have to create three Columns named.
- Step1: Contains a button to initiate the login process.
-
Step2: Contains a label to display the user Access Code, a button to cancel the Login process, and a web viewer to load the Facebook OAuth screen so users can log in to their Facebook and Approve the login. The URL of web viewer is by default set to
https://m.facebook.com/device - Step3: Contains an image component to display profile picture, two labels to display User name and Email.
Blocks
First, let’s create an initialize variable code to store the code sent by Facebook OAuth API response for further use.
Now on the login button click. we’ll make a post request on
-
URL:
https://graph.facebook.com/v2.6/device/login -
Body:
access_token=YOUR_ACCESS_TOKEN&scope=public_profile,email
In response to this request, we’ll get Code that we’ll store in initialize variable and User_Code that we’ll display to the user (in step2) so he/she can enter this code to access and approve the login request.
Please note that we are also using a clock component to keep checking if the user is redirected to the approval page so we can hide the Step2-Column and display Step3-Column.
As we know we have given a cancel button on Step2-Column so the user can cancel the Facebook login if he/she doesn’t want to. In this case, we’ll simply hide the Step2-Column and display Step1-Column with a message, try again. (you are free to change this message)
Now the clock will loop in every 100ms and check the current URL of the Web viewer. If the URL contains m.facebook.com/device/logged_in it means that the user has either approved/canceled the login request so we’ll hide the Step2-Column and make another API request to get the user_access_token so that we can get the user info using that.
-
URL:
https://graph.facebook.com/v2.6/device/login_status -
Body:
access_token=YOUR_ACCESS_TOKEN&code=initialize variable code
In response to this API request if access_token is not null then we’ll use this access token and make another API request [GET] on
- URL:
https://graph.facebook.com/v2.3/me?fields=name,picture,email&&access_token=access_token
In response, we’ll get user info like name email, and profile picture. we just have to insert this info in labels we created to display user name email and load the profile picture to an image component.
All DONE 
Congratulations… We have successfully integrated Login With Facebook option in our app. If you like this guide then do hit 
button and if you have any queries or suggestions feel free to comment below. you can also visit my website cttricks.com for more amazing guides.