Discuss

Using OAuth2 Connector with Facebook

Using the OAuth2 Connector in Wappler you can add a “social login” option to your website, so the users can directly log in using their Facebook account.
In this tutorial we will show you how to create accounts for new users and also how to log the registered users in, using their Facebook account data - like email and Facebook ID:


Setting up a Facebook App

First, you need to go to: https://developers.facebook.com/apps/ and click - Add a New App:

Add a name for your app and click Create App ID:

Your App ID has been created, by default your app in development mode. This will allow us to work and test our login workflow on our http://localhost server without a need of an SSL Certificate:

We need to add the Facebook Login to our App, click the Set Up Button:

Select Web:

Enter your site URL here and click the Save button:

Click Continue:

There is nothing else we need to do on this page, just select Next on all the steps, then click Dashboard:

Open Settings and click Basic:

Here you will find your App ID and App Secret, copy these as you will need them later:

Add your site domain here, we enter http://localhost as we are developing this on our local server:

You can setup the rest of the settings here - terms of service and privacy policy URLs, App Category and App Icon. We leave these empty, as we don’t need them right now:

We are done setting up the Facebook Part of the login process.

Setting up the Server Action

In server connect we need to setup the OAuth2 Provider and authorize user with Facebook and get his/her Facebook ID and email. Then we need to check if the user exists in the users database table and log him/her in, using the security provider. If the user does not exist, we need to create it in the database and then log him/her in using the security provider.

Authorize user with Facebok

Create a new server action:

We call it login.
Then, right click steps:

Open OAuth2 Connector and select OAuth2 Provider:

Open the Service menu and select Facebook:

Here you need to enter your Facebook App ID and Secret, which we mentioned a few steps back:

Change the token handling to Self Maintain:

For local development without an SSL Certificate (like in this case) turn the Verify SSL option off. When working on your production server, on your live site it’s recommended to enable it:

Now, as we’ve set up the OAuth2 Provider for Facebook, we need to Authorize the user. Right click the OAuth2 Provider step:

Open OAuth2 Connector and select OAuth2 Authorize:

Add a name for the authorize step:

Select the OAuth2 Provider which we created:

And add a new Scope:

We’d like to access the user’s email, so we can compare it with the users database table later, so we enter email:

NOTE: the user email is available in the users default public profile info, so it does not require your app to be verified. You can learn more about the available data, required permissions and how to use them in Facebook Docs.

We are done setting up the user authorization, now we need to get the user info. Right click the Authorize step:

Open API Connector and select API Action:

In the API URL field add https://graph.facebook.com/v6.0/me - this is the URL you need to access to get the user info:

In the Query Parameters add Name: fields and a Value for it: email:

Save your server action, and click the Open In Browser button:

You will be asked to Continue with your Facebook Profile:

You will see the response from the steps we just setup. We need to copy everything inside the "data" : in the returned JSON response, just as shown on the screenshot:

Then, back to the Server Connect panel, click the Define API Schema button:

Paste what you just copied in the Source panel, then click the Run button:

Then your API Schema will be generated. Click Save:

Open the Authorization dropdown and select OAuth2 , then select the OAuth2 Provider which we already created:

Check if user exists in the database

Now as we’ve setup Facebook authorization and have access to the user details, we can check if he/she already exists in our database.

After the API Action step add a Database Connection and a Single Query steps. You already know how to do this, so we skip these two steps.

Then open the Single Query Builder:

Add your users table:

And let’s filter the query:

We want to check if the user exists in the database. We will do this check by his/her email, so select the email column from your database table, select equal to and click the dynamic data picker icon:

We want to check the user’s Facebook email returned by the API Action, so select API > data > email:

Click OK:

Right click the Single Query step:

Open Core Actions and select Condition:

Click the dynamic data picker icon, to select an expression for the condition:

Select the single query as a condition:

If the query returns a result - the condition will be trued, if no record is returned (i.e. no user found) the condition will be false.

Login existing users

If the user exists in our database, then we want to log him/her in after the Facebook authorization, using the existing login details. First we need to add the Security Provider to our server action, it’s better to add it before the Condition, so it’s available inside the Condition steps. Right click the database connection step:

Open Security Provider menu and select Security Provider:

Select Type: Database and click the Users and Permissions button:

Select your users table and setup the ID, username and password columns:

Then link this security provider, to make it available across the whole site (quite useful):

Now right click Steps under Then, in the Condition:

And add Security Login:

Click the dynamic data picker, in order to select the value for the username:

This should be the email, returned by our database single query:

Do the same for the password of the login step:

Select the password returned from the database single query:

Now if the user exists, his/her login data will be filled by the database query and he/she will be logged in automatically.

Create new users, when they don’t exist in the database

If the database query returns no results, we need to create the user based on the email and ID returned by Facebook.

Right click steps under Else in the Condition:

Add database insert:

Click Insert Options:

Add your users table from the dropdown:

We only need to insert data into the email and password fields, so we remove the rest from the insert list. Click the dynamic data picker, to select a value to be inserted in the email field:

We need to insert the Facebook profile email, returned by the API Action:

We do the same for the password:

Here we use the Facebook profile ID, returned by the API Action:

Click OK:

Now if the user does not exist in the database his/her details will be inserted as follows: Facebook profile email will be used for login and Facebook profile ID as a password.

Now, we need to auto-login the newly created user. Right click the Database Insert step:

And add a Security Login step:

Click the dynamic data picker button, to select a value for the username:

This should be the same email value, returned by the API Action, which we used in the insert step:

We do the same for the password:

And select the same ID value, returned by the API Action, which we used in the insert step:

Now our users will be auto logged in, after they are added in the database.

Redirect users after log in

We need to redirect the users, after they’ve been successfully logged in. Right click the Condition step:

Open Core Actions and select Redirect:

Add a name for this step and click the browse button to select a page, where your users should be redirected to after log in:

Save your server action, when you select it:

We are done with the serverside setup.

Setting up the login page

Close the Server Connect Panel and open the App Connect Panel.

You need to use an anchor button or a regular link, to run the Facebook login server action. We added an anchor button on the page. There are two ways of calling the server action - either setup a server connect route in the routing panel or link directly to it, using the browse icon - it’s your choice.

In this case we will just link to the Facebook login server action:

Just browse to the dmxConnect/api/ folder and select your Facebook login server action:

Save your page and you are done.
This is just a basic example of how to use the OAuth2 Provider with Facebook, so you can extend this as per your needs.