How to Incorporate Facebook OAuth 2.0

There is no debate that the advent of OAuth 2.0 made the lives of developers everywhere better.  OAuth 2.0 makes adding an authentication system to your app or web page became considerably easy.  Many different service providers support the OAuth 2.0 spec and, in turn, so does DreamFactory. Below are the supported OAuth services DreamFactory which are supported natively.

Incorporating Facebook OAuth 2.0

DreamFactory supported OAuth Services

In this post, we are going to examine the Facebook OAuth login.  We have done this one previously, but a fair bit has changed (such as enforcing HTTPS on callback URLs, etc., for instance), so we wanted to update and refresh the post with current screenshots and info.  Let’s face it, Facebook is one of the most used services out there, so this use case is a very common one.

Alright, without further ado, let’s do this thing

First and foremost you will need to create an account on Facebook’s developer site.  You can do that here.  When you create the account you will want to create an app.  After creating an app, you will be sent your app dashboard where you can see some analytics, and see whether or not your app is live.  The status bar in the top right corner, under the search box, is where you will set it to live when it is configured. You can see in the red box I have my Facebook login added to my app.

Create Your Facebook App Account

You will want to add your “App Domains”, as you can see in the red box highlighted in this screenshot and take note of your “App Secret” as you will need that when setting up your DreamFactory service.

Add Your Domains to Your Facebook App

Almost everything in this next image is important in order to make your OAuth connector work with DreamFactory.  Let’s start from the top of the screen and work our way down.  You will need all of the boxes I have checked yes, checked...well yes.  The “Enforce HTTPS” will be defaulted to yes since your app was most likely created after April 2018.  If your app was created before then, you might still have the option to not enable it, but either way as of October 2018, it will no longer be an option.  HTTPS will be required.

The section labeled “Valid OAuth Redirect URIs” should contain the EXACT information you will be providing in your OAuth service configuration.  For testing purposes, I have two in here, but you only need one. This will help designate where your users land after authentication, based upon the role assigned to your DreamFactory OAuth service.  Do not get too mired in this detail as we will explore this further later in the blog post. I just wanted to introduce the concept now as we are setting up the Facebook portion of this project.

The last section is where you can check whether your Redirect URI is valid.  This is a pretty cool feature as it will throw an error if something is wonky or off.

Facebook App Login Configuration Page

Ok, for now, we are done with the Facebook portion.  You will most likely need to go back in and add your redirect URI(unless you had it ready to go), but the basic setup is taken care of.

The DreamFactory Side

The DreamFactory setup portion is pretty simple.  You will set up your service like you would any other service by naming it, giving it a label if you like and a description.  The real meat and potatoes happen in the config tab.

DreamFactory Service Config Tab

You will need your Client ID(App ID from Facebook), Client secret (App Secret from Facebook), Redirect URL, Icon Class (thank you Font Awesome), and any roles for other Apps you would like your user(s) to be able to access once they login and are authenticated successfully.  I have been pretty liberal with my permissions, as my default role actually allows the user the ability to access any of my DreamFactory apps.

Again, the biggest stumbling block here is the redirect URI.  If it doesn’t include the service name (Facebook_OAuth in this case), you will not get the redirect back to your site once the code&state are generated after confirming your identity on Facebook.  Without this, your OAuth will fail. You can see in the dev tools in Chrome where the code is generated when the call is made:

Facebook Redirect

You will be redirected back to your DreamFactory application.

Once the service is configured you will see the Facebook icon on the login screen of your DreamFactory instance:

DreamFactory Login Screen

Optional Goodness

Okay, all of this great.  How do I do this if I am on my local machine?  I do not want to waste time configuring certs/proxies and everything else so that I can access my local instance on the internet?

I have recently started playing with ngrok.  What is this voodoo?  It basically makes your local machine accessible on the world-wide-web in a literal matter of minutes.  Why waste time when there is an easy to use, off the shelf tool that can do this for you?  It’s a lot like DreamFactory in that way.

ngrok Running in iTerm

Ngrok will forward your localhost address to a reachable IP.  Their docs are great, and again, it took me less than 5 minutes to get this forwarding in place.

Here are some additional resources you can reference:

• https://developers.facebook.com/docs/facebook-login/overview
• https://ngrok.com/docs
• https://wiki.dreamfactory.com/DreamFactory/Tutorials/Using_OAuth