OAuth2 Facebook Login How To Assistance

I know this has been asked about a few times in the past, but I am having trouble integrating the Facebook Login OAuth2 into my site. I currently have a working login work flow using the existing tutorials, but my boss has asked for a Facebook Login integration because 90% of our clients utilize Facebook and he does not feel they should have to utilize a new set of credentials unless it is necessary.

So, here is what we have so far.

  1. Active Facebook Developer Account
  2. Verified Business Status (took 10 days and required documentation)
  3. Using the App ID and App Secret in the Facebook Developer website, I created the OAuth2 Provider and OAuth2 Authorize in Wappler.
  4. Tested by opening the Server Action in browser and see return code that appears to be successful.
  5. Went back to https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow and got completely lost. :frowning:

At this point, it looks like I have a successful connection to Facebook, but I am not sure where to go from here. I understand what they are talking about on the manually build a login flow website, but I am unsure how to accomplish it in Wappler.

The goal is to provide users with two options:

  1. Login/Register using the native Wappler login setup.
  2. Login/Register using the Facebook Login OAuth2 setup.

The Facebook Login OAuth2 setup would need to insert the publicly available information from their Facebook profile into the existing user database so that permissions can be associated with the information as need be.

Any assistance with this would greatly be beneficial not only to me, but other Wappler users as well. :slight_smile:

P.S. There might be a :coffee: or :beer: in it for you too! :crazy_face:

Do i see beer?
Well, then i am going to create a walk-through for this :slight_smile: and probably for the other oauth2 providers (google, linkedin, twitter etc.)

9 Likes

@scott
After step 4 you need to add an api call (Api Connector > Api Connection step) using the https://graph.facebook.com/v4.0/me url.

Method: GET
Data Type: Auto
Authorization: OAuth2
OAuth2: your_oauth_provider

In the query params, add:

Name: fields
Value: email - will return the user email; email, name - will return the user name and email.
Check the available options here: https://developers.facebook.com/docs/facebook-login/permissions?locale=en_US#user-data

So your Server Action will look like:

You can then use the returned email and name to check if user exists or not :slight_smile:

@Teodor,

Thank you so much for providing that guidance! :slight_smile:

I added the API action using the information provided and clicked on Define API Schema to retrieve the data so I can use it in future queries and received the following error:

fb%20api%20error%20400

No need to define a schema here, just save the server action and try calling it in the browser to see the results.

Ok, I called it in the browser and see code there, at the end, I see my name and FB ID #, but not my email address. I have in the API Action, Query Params, Name: fields, Value: email, name.

Have you selected oauth2 as an authorization in the dropdown?

Yep.
fb%20api

Strange, and you don’t see your email? Have you tried using this in another browser or in incognito mode, so it will show a Facebook dialog which asks you to allow sharing your email with this app?

I think that might be the issue. When you say to call it in the browser, what I did was click on the Open in Browser button at the top of the Server Action. I have a feeling that is not what you meant.

When I do that, what I see is this:

That’s exactly what i meant.
Try logging out of facebook, then run the server action this way. It should ask you to log in and then allow access to your name and email.

Ok, I logged out of Facebook. Clicked on open in browser. A new page popped up and asked me to login to Facebook. I logged in and was redirected to the page shown above showing my name and Facebook ID at the end.

I went into the Facebook App Dashboard and created a test user. I then went into Firefox (instead of Chrome) and pulled up the page. I was redirected to Facebook and I logged in as the test user. It popped up a box asking for permission to share my profile and picture and I accepted. I received a token error, however on refresh, I see the same results as I did in Chrome.

fb%20api3

Have you added email to the scope in the authorize step, you need to have permission from the user to read the email address:

Thanks @patrick and @Teodor ! That retrieves the name, email, and FB ID number. I received a subsequent pop-up asking for permission to view the email address after adding it into the OAuth2 Authorize Scopes.

Moving on to the next steps of checking to see if the email address is already registered and if not insert it into my users table, what would be the best way of accomplishing that? I am not able to see the information in the data picker so I think I would need to manually add it.

I can use the existing tutorials on checking if a record exists and insert it if it does not exist, I am just not sure how to list the Facebook API retrieved name and email address for the entries.

You can access the name and email like:

{{api1.data.email}}
{{api1.data.name}}

in your steps, where you check if the user exists.

Awesome! I really appreciate you @Teodor and @patrick for taking the time to walk me through this.

1 Like

I’ve added to the work that we completed above by adding the user check and user insert actions and it works when I click on the open in browser from the server action screen.

So I moved on to the next step and added the Security Provider and Security Login following the user check and user insert actions. I was not able to remove the $_POST.password default option in the Security Login because it is a required field and I really have no idea what to put in its place since Facebook does not provide anything in terms of a password. I did try using the Facebook email salted with the Facebook id, but that returned a server error so I removed it.

Moving past that issue for the moment, I added a server connect form to a test page and added an anchor image for the form submission. I went with the anchor image because Facebook requires the use of their image for logins.

When I add the server action to a server connect form and run the page, after clicking on the image, I get the following error:

You should not use ServerConnect for that, use a normal link to the facebook login action. With the client credentials flow the authorize step will redirect the page to the facebook login and after the login back to the action file.

<a href="dmxConnect/api/api/facebook/public/insert/login.php">
  Login with Facebook
</a>

At the end of the action as last step place a redirect step that redirects the user back to your page or any other page he should go after the login.

@patrick, thank you. I have made that change and have encountered a new error.

When I go to the test page and click on the new button, it takes me to Facebook, I log in, and then the pop up with the permissions pops up. After confirming the permissions, it takes me back to my site, but this error occurs:

fb%20active%20access%20token

On refreshing the page, the redirect in the server action occurs, but the insert does not occur and I get a message that says Unauthorized.

Here is my server action:

In the OAuth2 Provider set the Token Handling to Self Maintain. Leave the Access Token and Refresh Token empty. This will force users to always login and not to reuse the access token.