Plugin-Free Facebook Login (Support Cordova and Web)

Hey everybody, this is my first tutorial, I made a simple facebook login that support both web browser and cordova mobile. I made this capx because i want to make a game that connect to facebook but support in web and cordova, i'm searching everywhere but i'm not found what i exactly want. But then i found this tutorial (thanks for the idea) and then i make a little changes.

As i said, this is a Plugin-Free, what i mean is you don't need to install any 3rd party plugin, just use the official scirra plugin.

There will be 2 capx :

[multi support] - support both cordova and web in the same time

[choose support] - support cordova only/web only (based on your choice, you can choose with function's parameter)

So let's get started.

NOTE : Make sure you have create your facebook app and have the APP_ID.

The CAPX (Multi Support)

The multi support capx is used for game that will be exported to html5 and also cordova. it uses logic <is on mobile screen><else> so the event will be executed based on user's platform.

First of all, let's add 3 button, there's button for login, logout, and check login status.

Insert the Official Facebook Plugin and then fill the APP ID (i dont fill the APP secret but it works!). Don't forget to insert the Browser and Function object too.

Open the event sheet, and then add 3 global variables :

FB_Status(text) for handle user's status

FB_AccessToken(text) for handle facebook access token

FB_ID(text) for handle user id

event for button status when clicked :

Code :

on mobile :

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

on browser :

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

event for login button when clicked :

Code :

on mobile :

    "facebookConnectPlugin.login(
    ['email, public_profile, user_friends'], 
    function(response) {
    console.log(response);
    if (response && !response.error) {
    c2_callFunction('FB_login_success',[response.status,response.authResponse.accessToken,response.authResponse.userID])
    }
    },
    function(err){
    c2_callFunction('FB_login_error',[err])
    }
    );"

on browser:

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

event for logout button when clicked

Code :

on mobile:

    "facebookConnectPlugin.logout(
    function(response) {
    if (response && !response.error) {
    c2_callFunction('FB_logout_success',[response.status])
    }
    },
    function(err) {
    c2_callFunction('FB_logout_error',[err.error])
    }
    );"

on browser:

    "FB.logout(
    function(response) {
    if (response && !response.error) {
    c2_callFunction('FB_logout_success',[response,status])
    }
    },
    function(err) {
    c2_callFunction('FB_logout_error',[err.error])
    }
    );"

and the last is the function:

okay, let's check it out...

The CAPX (Choose Support)

this capx using the same object and variable from above. but we use different action for button clicked. see the image below

Available parameter : PC or MOBILE

below is the function

Ok, let's try...