Post 12: Plugin-Free Mobile Facebook

At this stage we are only using the Facebook plugins (the official one + Cranberrygames) for four things:

  1. Checking a users current Facebook login status
  2. Logging in to Facebook
  3. Logging out of Facebook
  4. Downloading Facebook data (name, email etc.)

In this tutorial I'll go through how to handle the first three of these actions using JavaScript. We will still need the official Facebook plugin to initialize Facebook on browsers (I haven't been able to work out how to do this using JavaScript yet) however this will allow us to completely bypass Cranberrygames plugin where the Intel XDK plugin handles initialization. The advantages of not having to use the Cranberrygames plugin are:

  • Cranberrygames plugin is not 100% reliable on Android. Occasionally the login action will not work properly. Using JavaScript gets past this weakness and increases the reliability of your app.
  • You do not have to pay $10 for a buggy plugin with zero user support.
  • Increased flexibility with regards to advanced features
  • Access to information not provided by the plugins
  • You get to learn a little bit of JavaScript and how to interact with the Facebook SDK (Software Development Kit)

Note that SDK stands for "Software Development kit". The Facebook SDK is just a collection of functions we can send to Facebook to interact with their databases. The disadvantages of interacting directly with the Facebook SDK are:

  • You have to design your login logic much more carefully
  • Increased complexity means you're more likely to make errors

Lets get started. I have adjusted the main screen of SSA to give us a message bar specifically for displaying messages about Facebook. This makes it a lot easier to troubleshoot issues with the login process (particularly on mobile devices where there's limited access to debugging screens). I highly recommend building a similar status bar in your app to speed up development. You can disable this bar in published version. I have also added a 'Status' button used to check a user's current login status.

new screen.jpg

We'll also need a few more global variables to handle Facebook data.

Checking a users current Facebook login status

To check a users current login status we'll use the Facebook SDK's "getLoginStatus" function. We'll map this function to the new 'Status' button:

On mobile devices the function is:

And on browsers:

Lets step through each part of these functions:

  • FB.getLoginStatus = This part tells Facebook which function we are using
  • function(response) = This part is required to read data back from Facebook
  • {console.log(response); = This part logs the response from Facebook in your browser. This is great for troubleshooting as you can see the response in the debugging screen on your browser (hit F12 to bring this up on Chrome or Ctrl-Shift-K to bring up on Firefox)
  • if (response.status === 'connected') = The code within these brackets will be executed if the status is returned as 'connected'. It is necessary to break up our code like this to avoid errors when the user is not connected to Facebook as the Facebook SDK would have otherwise returned a null value for the access token (Construct 2 functions do not like null values)
  • c2_callFunction('FB_LoginStatus_Received',[response.status, response.authResponse.accessToken]) = This tells Construct 2 to execute a function named "FB_initialized" with parameter 0 "response.status" and parameter 1 "response.authResponse.accessToken" when the JavaScript function is completed
  • } else {c2_callFunction('FB_LoginStatus_Received',[response.status, 'no access token'])} = This section tells the Facebook SDK which values to feed into the function if the user is not connected to Facebook. You'll notice that the only difference is that we are not returning the access token if the user is not logged in to Facebook as this access token would then have a null value.

The above code is available for copy-paste below:

Mobile:

"facebookConnectPlugin.getLoginStatus(function(response) {
if (response.status === 'connected') {
c2_callFunction('FB_LoginStatus_Received',[response.status, response.authResponse.accessToken])
 } else {
c2_callFunction('FB_LoginStatus_Received',[response.status, 'no access token'])
}
});"

Browsers:

"FB.getLoginStatus(function(response) {
console.log(response);
if (response.status === 'connected') {

c2_callFunction('FB_LoginStatus_Received',[response.status, response.authResponse.accessToken])
} else {
c2_callFunction('FB_LoginStatus_Received',[response.status, 'no access token'])
}
});
"

If the above function is able to contact Facebook the 'response.status' value will be equal to one of three things:

  1. connected: This means the user is logged in to Facebook and has authorized your app
  2. unknown: This means the user is not logged in to Facebook or has blocked your app
  3. not_authorized: This means the user is logged in to Facebook but has not yet authorized your app

Either one of these 3 return values means that contact was successfully established with Facebook. The next step is to implement the return function 'FB_LoginStatus_Received':

As seen in the code above, we can now populate two of the new global FB variables. The "FB_Status" variable can now act as a "Logged in" condition in Construct 2.

Logging in to Facebook

Logging in to Facebook using JavaScript is actually quite simple. As per our usual workflow, we'll separate mobile and browser logins. We will also use the 'FB_Status' variable to determine if the button should log a user in or out of Facebook:

On mobile devices the function is:

And on browsers:

Here's a quick explanation of the additional parts to this code:

  • if (response && !response.error) { = This part of the code checks 2 things; whether or not there is a response and whether or not there are no errors.
  • {scope: 'email, public_profile, user_friends'}); = Add in any permissions you require. Note that if you require any permissions other than the three listed, you will need to submit your app to Facebook for review.

If we get a response and there are no errors this function will call the "FB_login" function within Construct 2. The above JavaScript function returns the same two variables so we might as well feed these two variables into our "FB_LoginStatus_Received" function in order to update our Global FB Variables:

The above code is available for copy-paste below.

Mobile:

"facebookConnectPlugin.login(['email, public_profile, user_friends'], function(response) {
if (response && !response.error) {
c2_callFunction('FB_login',[response.status, response.authResponse.accessToken])
 } else { alert('Error', response.error);
}
});"

Browsers:

"FB.login(function(response) {
 console.log(response);
 if (response && !response.error) {
c2_callFunction('FB_login',[response.status, response.authResponse.accessToken])
} else { console.log('Error', response.status);
}
},{scope: 'email, public_profile, user_friends'});
"

Logging out of Facebook

The final thing we need to build into our code is a logout function. Now that you're pretty familiar with how JavaScript functions work this should be a breeze:

Mobile:

Browsers:

The above code is available for copy-paste below:

Mobile:

"facebookConnectPlugin.logout(function(response) {
if (response && !response.error) {
c2_callFunction('FB_logout',[response.status])
 } else { alert('Error', response.error);
}
});
"

Browsers:

"FB.logout(function(response) {
 console.log(response);
 if (response && !response.error) {
c2_callFunction('FB_logout',[response,status])
} else { console.log('Error', response.error);
}
});
"

That's it! In the next tutorial I will go through how to download additional information such as the email, full name and gender of your users.

Want to see what SSA looks like on your mobile device?

Download here for Android or here for iOS or play it on your browser here


Want to see what Facebook implementation looks like in a real game?

Check out my latest game Nut Drop on any of the below platforms

If you have any questions about how to implement any of the features in Nut Drop in your games let me know in the comments and I will make a tutorial for you