Facebook intergration
How to easily make use of Facebook’s services with WEM, using OAuth 2.0
Integrating Facebook with WEM
One of the many things that make a WEM App easy and swift to develop with, is its capabilities to integrate with external services. In this guide we’ll show you step by step how to do this. First we need to pick an external service to integrate with. How aboutFacebook? It’s one of the most used social networks and many apps use Facebook yo authorize users to access apps.
Sounds fun? If so, let’s get started then!
The OAuth 2.0 authentication protocol
To be able to safely make use of external providers there’s always some authentication procedure involved. The WEM Modeler already supports the two main standard industry protocols, SAML 2.0 and OAuth 2.0. Office 365 uses SAML 2.0 for example, while Facebook and Gmail use OAuth 2.0.
In this guide we’ll be using the OAuth 2.0 protocol. Below is a little bit of technical protocol information that helps you understand the actual integration. The OAuth 2.0 protocol requires 5 pieces of information to properly work:
An Authorization Endpoint, a link where we’ll redirect to when we start the authentication procedure.
A Token Endpoint, a link which will give us an access token after we’ve successfully validated ourselves with the ‘Authorization Endpoint’.
A Client ID, this will validate our application to the external service provider.
A Client Secret, this will also validate our application to the external service provider.
Redirect URLs, after successfully logging into the external service we’ll be redirected to these URLs.
After retrieving the access token we’ll be able to use the external service provider’s API.
(An API, application programming interface, is like a toolbox that grants us access to a bunch of useful functions. For example, Outlook’s API allows you to retrieve all your unread mails.)
The WEM nodes we’ll be using
Step 1 – Creating a new WEM Project
If you haven’t already got a WEM account, you can create one for free at ‘https://my.wem.io’. When you’re logged into your account go to the WEM modeler.
Once you’re in the modeler click on the New Project + button.
Enter any name for your project you like. You can always change it later on. For this guide we chose the name “Facebook”. Clear and simple. The workspace we put our project is not something we worry about for now.
Press the Ok button to finish creating your project.
Step 2 – Setting up the project (optional)
Let’s say we end up working on our project for a long time. Then it would be nice if we could publish the project right? To be able to do this we first need to link a domain address with our project.
First we need to select the little house icon on the left side of our screen.
Once we’ve done that we can access the project settings by pressing the Default tab.
If you scroll down the page you can see that there are two environments we can link a hostname with. The staging environment is suited for testing, while the live environment is suited for your project when it’s ready to be taken into production.
We prepared 2 hostnames for this guide so we’ll use those.
(If the hostname isn’t taken, you can generally use the name of your project and the postfix “.staging.wem.io” or “.live.wem.io” as hostnames.)
And with that our hostnames are set up. Don’t forget to save the changes we’ve made to the project!
Step 3 – Creating a Facebook App
To be able to integrate with an external service we need 2 things. A WEM Project and an app from the external service.
Since we’re integrating with Facebook we need to go to ‘https://developers.facebook.com’ to create such an app.
Once we’ve navigated there we first need to log into our Facebook account.
After that we’re able to create a new app by clicking on “Add a New App”.
Once again you can use any name you like.
Click the Create App ID button to finish creating your Facebook App.
Step 4 – Getting the Client ID and Client Secret
At the top of our dashboard we can see our Client ID. Facebook calls it an App ID, but it basically has the same meaning. It’s a good idea to write that down somewhere since we’ll be using it later on.
We can find our Client Secret by going to the Basic Settings tab.
There we can find our Client Secret under App Secret. Again it’s smart to write that down somewhere.
After we’ve done that we see that
Our Client ID is ———–6861
Our Client Secret is —————————add1
Step 5 – Storing the access token
We need to create a data item so we store the access token that we’ll be receiving from our Facebook App.
Click on the Data model icon in the WEM Modeler.
Create a new text data field by clicking on the New field menu option, and then select a Text field.
Enter “Access Token” as a name for the text field.
Click the Ok button to create the data field.
Now we can store the access token.
Step 6 – Creating the Authentication Provider
In our WEM Project select the Authentication Providers tab.
Here you can create a new Authenticationprovider that your app will use to connect to the Facebook service
Create a new authentication peovider by selecting the “Add authentication provider” option. In the dropdown menu, select OAuth 2.0
We need to select the OAuth2.0 authentication protocol since we’ll be using that to communicate with our Facebook App.
For the name of the authentication provider you can onnce again use any name you prefer.
Click the Ok button to create the authentication provider.
Step 7 – Setting up the Authentication Provider
The settings of our Authentication Provider probably look a bit like this.
It looks a bit barren with so many empty fields, let’s add some more info to the Server Details to begin with.
Under Authorization Endpoint you need to enter ‘https://www.facebook.com/dialog/oauth’, feel free to copy-paste it.
The same thing needs to be done for the ‘Token Endpoint’ but there we need to enter ‘https://graph.facebook.com/oauth/access_token’.
(In case you’re wondering ,these endpoints can be found at ‘https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow’.)
Once that’s done let’s enter our Client ID and Client Secret under Client Details.
The only thing that’s left to enter is the data field we’d like to map our access token to. That’s what we created the data field for in step 5!
Click on the first A button to select the data field.
Select the Access Token data field and then click the Ok button to map it to the access token.
And with that our Authentication Provider is done! The settings should look something like this.
The only thing that’s left to do is to write down all the Redirect URLs.
The first one is:
<https://preview.wem.io/8390/auth/oauth2/facebook-authorization>The second one is:
<https://facebook.staging.wem.io/auth/oauth2/facebook-authorization>The third one is:
<https://facebook.live.wem.io/auth/oauth2/facebook-authorization>
Step 8 – Entering the redirect URLs into the Facebook App
To be able to enter our redirect URLs we first need to add a product to our Facebook App.
By clicking on the + icon you can add a product.
There are many products to choose from but for now we only want the Facebook Login product.
Press the Set Up button to add it to our Facebook App. We immediately go to the settings of our Facebook Loginbutton by clicking on the settings tab under Facebook Login.
The settings should look like this.
Under Valid OAuth Redirect URIs we can enter our Redirect URLs.
Don’t forget to save the changes afterwards!
Now our Authentication Provider and Facebook App are finished and ready to be used.
Step 9 – Creating an Authentication Node
To be able to use our Authentication Provider we first need to make use of a WEM flowchart. The flowchart is a piece of visual logic which helps us navigate and manage our WEM Application. (You can visit ‘https://wem.io/documentation/wem-modeler/wem-modeler-flowcharts’ for more information about flowcharts.)
Click on the Flowcharts icon to view all flowcharts.
The Home flowchart is a flowchart which every project starts out with.
We need to double click on the Home flowchart to be able to edit it.
Once you’re there you can place an authentication node.
Select Facebook Authenticator for the authentication node.
Press the Ok button to place the authentication node.
Step 10 – Connecting the nodes
To be able to use the authentication node we need to draw an arrow from the start node to the authentication node.
You can either draw an arrow by holding the control key or by pressing the Draw arrows button.
It should look like this.
Step 11 – Placing an interaction node
The interaction nodes are the parts of your WEM App that will be visible to your users. Place an interaction node in the flowchart by dragging one from the side onto the grid.
Draw an arrow from the authentication node to the interaction node, and selcte the Authorized exit.
Step 12 – Editing the template of the interaction node
You can edit the template by double clicking on the interaction node or by pressing the Edit template button.
A blank template looks like this at first.
By editing the text and font size you can make it look more pleasant though. Try writing something down!
On the right side of the screen we can see our Access Token data field. We can put it in our template by double clicking on it.
It should look like this.
Don’t forget to save the template!
What’s going to happen when we use our WEM App is that the authentication node will retrieve an access token from our Facebook App. Our authentication node will put that token into our access token data field so that it’s stored in our WEM App. Afterwards the interaction node will present the Access Token data field to us on our screen.
Step 13 – Previewing our integration WEM App
Well, everything’s set up and we’re ready to test our WEM App. You can do this by going to the ‘Home’ tab in the WEM Modeler.
By clicking on the blue play button you can preview your WEM App. Feel free to click it!
If everything went well you should be greeted by this screen.
Do you see the gigantic access token that our Facebook App has given us? This string of text will authorize us to use the Facebook API and much more. In the ‘Advanced’ section of this guide, we’ll use the Facebook API to retrieve a cool bit of information about your Facebook account. What information? Keep reading to find out.
Advanced Step 1 – Create a file data field
Click on the Data model icon.
Create a file data field, that will be used to store an image.
The interesting bit of information we’ll retrieving is your Facebook profile picture in the advanced part of this guide. Name your file data field Profile picture.
Press the Ok button to finish creating your file data field.
Advanced Step 2 – Place a web request node
Click on the Flowcharts icon and navigate to your Homeflowchart.
We’ll be placing the grey node with the little globe in it. This is a web request node and it allows us to communicate with the Facebook API, in other words: it allows us to make ‘requests’.
Drag the web request node onto your flowchart.
Draw an arrow from the authentication node to the web request node, and select the Authorized exit.
Also draw an arrow from the web request node to the interaction node, and Default exit option.
Click on the ‘web request’ node and on the right side of your screen this will appear.
Enter the text:“https://graph.facebook.com/v2.12/me/picture?type=large&access_token=” +
Be careful to not get any letters or symbols wrong, the quotes and the plus sign need to be included in the URL. Double click on the Access Token data field on the right side of the window.
Afterwards it should look like this.
Click on the Ok button to save the url.
Select the Profile picture data field and press the Ok button to add the response body.
Advanced Step 3 – Update the interaction node
Double click on the blue interaction node and edit your template so that it looks like this. (Double click on the ‘Profile picture’ data field to add it to the template.)
After that’s done click on the yellow box surrounding Profile picture. On the down right part of the screen some settings will appear.
It’s important to set the Display as property to Image.
The interaction node is fully updated now. It’s almost time for testing! Do not forget to save your template though.
Advanced Step 4 – Publish your WEM Project
We’d like to be able to use our WEM App by surfing to the hostnames we specified in step 2 at the beginning of this guide. For example if someone enters ‘www.facebook.staging.wem.io’ in a web browser we’d like that person to immediately be able to use our application.
To be able to do that we need to press the icon with the green arrow.
Click on the arrows to select which environments to publish to.
To publish the app click on the green Publish button.
If this window appears it means that our WEM App has been successfully been published. Congratulations!
By all means visit your hostname URL to officially use the WEM App, and play with it to add functionality, or use this example to incorporate it in other WEM apps you create. width
Last updated
