This tutorial will guide you through using the Synatic HTTP Service source step to connect to Facebook API using the long-live OAuth 2.0 authentication. We will use Facebook as an example API and connect using OAuth.
You will learn how to:
Create a Synatic flow with an HTTP Service step.
Register and set up an OAuth App on Facebook (this is similar to most other OAuth APIs)
Configure the HTTP Service step to use the provider OAuth URLs and credentials.
Test the connection in a Synatic flow.
We are going to access the simplest endpoint on Facebook that requires authentication:
https://graph.facebook.com/me
When you execute the API request, the response will return your Facebook username and ID.
Watch the video below to learn how to create a flow using the HTTP Service using OAuth 2.0 authentication to connect to an API.
The following sections explain each step of the process, as shown in the video.
Create the initial Synatic Flow
In Synatic, create a new Flow in your Solution.
Click ⨁ to add a new Flow.
Give the Flow a name, like "HTTP Service using OAuth Authentication" and a short meaningful description.
Click Save.
Add a JSON step
Because we will be receiving a JSON Object from Facebook's API, we must add a JSON step to the Flow.
The JSON step is located in the Reader drawer in the Steps palette. Select and drag it onto the flow canvas to the position shown.
The JSON step opens. You can click to save it as no configuration is required.
Add an HTTP Service step
The HTTP Service step is located in the Source drawer in the Steps palette.
To add the HTTP Service step to the Flow:
Select and drag the HTTP Service step in front of the JSON step.
Give the step a name, like "HTTP Service using OAuth Authentication" and a short meaningful description.
Create the API OAuth connection
Creating a connection to the API endpoint will require several steps, so click + in the Authentication Method group to create a connection and select OAuth 2 from the Auth Type dropdown.
At this point, you'll notice that the HTTP Authentication connection dialog requires multiple authentication configuration fields to be completed. These fields make up the URLs and credentials to authenticate against Facebook's OAuth API.
We'll pause Synatic here for a while to create and register an app on Facebook to get credentials such as the Client ID and Client Secret required in our connection.
Create a Facebook App
Before you can begin the OAuth building process, you must first register a new app with Facebook. Here, you will register basic information such as; application name, website, email, etc.
Most OAuth APIs will require you to register an app with them before you can connect. The processes will be similar to Facebook but may require other info or steps.
📝 You can learn more about their requirements by reading the API documentation on their websites.
Go to https://developers.facebook.com/apps/ and sign up if you don't already have an account.
Select Create App.
Select the type of App you want to create (we're using Manage Business Integrations in this example) and click Continue.
4. Give the App a name and select its purpose and click Create App.
5. Confirm the Security check and click Submit.
6. Facebook groups its OAuth functions and settings under the Facebook Login product. Select the Facebook Login product and click Set up.
7. Select a platform for the App. For this tutorial, we'll use Other to manually build a Login flow for Synatic.
Now click on the link Manually Build a Login Flow. This will take you to the Facebook documentation detailing the provider and token URLs we need.
Gather Facebook OAuth information
In the Manually Build a Login Flow Facebook documentation, scroll down to the following paragraph:
Copy the Facebook login URL https://www.facebook.com/v9.0/dialog/oauth (without the query string parameters) and paste it into the OAuth Provider URL field in your Synatic OAuth connection:
Now go back to the Manually Build a Login Flow Facebook documentation, and scroll down to the following paragraph:
Copy the Facebook Access Token URL https://graph.facebook.com/v9.0/oauth/access_token (without any query string parameters), and paste it into the OAuth Token URL field in your Synatic OAuth connection:
Client ID and Client Secret
To get the Client ID and Client Secret, go to the dashboard in the Facebook app. Select the top Settings menu, then the Basic option to show the dialog with your App ID and App Secret passphrase:
App ID (This is equivalent to Synatic's Client ID)
This is considered public information and doesn't need to be kept secret. The Facebook App ID should look something like 243***********728.App Secret (This is equivalent to Synatic's Client Secret)
⚠️ The Client Secret must be kept very confidential and NOT shared at all.
Click on the Show button to expose the resulting token. The Facebook App ID will look something like 30566*************0d7f9
Now, select and copy your App ID and App Secret, and paste them into the Client ID and Client Secret fields in your Synatic connection:
Also, select the following options in Synatic:
Select the Response Type as Code.
- where response_type indicates that your server expects an authorization code, which Synatic can exchange along with your Client Secret for the final bearer access token.Select Grant Type as Authorization Code.
- where grant_type indicates the type of authorization to be granted to Synatic.Select Use Refresh as Token to enable the use of Long Live tokens. Some providers only support short-lived tokens, which need to be refreshed after a predetermined time. Facebook, however, supports long-lived tokens for server-side authentication and authorization.
Redirect URIs
Go to the dashboard in the Facebook app. Select the Facebook Login product in the left menu, then the Settings option to show the Client OAuth Settings dialog.
Here you can register the Synatic redirect URI with Facebook to authorize Synatic as a valid destination to return tokens and codes to.
Synatic uses https://admin.synatic.com/app/public/oauthresponse as its redirect URI. Paste the Synatic redirect URI into the Valid OAuth Redirect URIs field in the Client OAuth Settings dialog, and click Save Changes.
Getting an Authentication Token
Now that we've set up both Synatic and Facebook, we can execute the login flow to get an OAuth access token from Facebook.
In Synatic, click on the link Logon to oAuth Service.
A panel will open on the right side of the screen. Click on the Logon to Service option to redirect to Facebook and authenticate Synatic.
You should be redirected to Facebook. You will be shown a dialog with your app requesting permission to access your Facebook account. Click Continue As [Username].
If the Login is successful and Synatic has received the access token, you will see the notification below.
In the OAuth Connection in Synatic, the Auth Token field shows the access token placeholder as redacted.
Click OK to acknowledge the successful connection. The OAuth connection is now assigned the access token for each future occasion that you execute the flow. Click Save to finish setting up your connection.
Setup the HTTP Service step with a test endpoint
Now that we have a successful connection to Facebook, we can set up the endpoint to call. We're going to use a simple test endpoint, https://graph.facebook.com/me which just gets the Facebook user name and ID for the user connected to the OAuth token.
Fill in https://graph.facebook.com/me in the URL field in the HTTP Service Step configuration:
Click Save to finish up and return to the flow editor.
Test the Connection
As usual, it's a good idea to test the Flow logic before continuing, so let's open the Synatic browser tab again.
Click the blue Run Test play button on the Flow to run a simulation.
Then click Test to execute the API request.
Check the response to verify that the request was successful.
Things to try
Try accessing other Facebook endpoints to get other information from your account. You may need to add permissions or scopes to your OAuth connection in Synatic to access some of them.
Try replicating this tutorial with another OAuth API, such as Google or Quickbooks.
Read the QuickBooks OAuth2 tutorial.