C2 w/ Facebook Login and Intel XDK

Get help using Construct 2

Post » Mon Mar 30, 2015 9:24 pm

I am having a really difficult time getting the Facebook login feature to work once I import into Intel XDK.

I know I have seen others saying they have it working so I must be missing something. Hopefully someone will be kind enough to point out what I need to do differently.

My goal is ultimately to have the player be able to sign in with their FB account and I will personalize the game with their name, scores, etc.

I have tested with Cranberry's FB 2.x and PB plugins and ended up running into the same issues.

Here is what I tested:
  1. In C2, build titleLayout w/ titleEvents
  2. Add a sprite for the button as btnSprite
  3. Add the C2 Facebook Object
  4. Enter my Facebook Developer App ID and Secret
  5. In the titleEvents add Event for Touch on btnSprite with Facebook Log In action

    Browser in PC, Android and iOS
  6. In C2, Export HTML5
  7. In Filezilla, upload exported files to server
  8. In browser, test live page
  9. Login successful

    Android App Emulate
  10. In C2, export Cordova specific to Android
  11. In Intel XDK, import Android files exported in C2 to create a new project as a Hybrid app
  12. Check the box for Facebook Connect then enter applicable App ID and App Name
  13. I have also tested without checking the Facebook Connect with the same results
  14. Go to Emulate
  15. Click the btnSprite
  16. Nothing happens

I have essentially done the same thing using Intel XDK Test and Build for Android and iOS, various versions and hardware devices. All have resulted in the btnSprite doing nothing.

The one thing I have been unsure of is the App Name. I assume this is the "Display Name" in the FB Developer account under Settings. I have the main app and the test app. I expect as long as the "Display Name" and the App Id are from the same app it should be fine.

I also found that I didn't have the toggle for "Do you want to make this app...general public?" under "Status & Review" set to "Yes" so I fixed that. It appears to apply to the whole app including any test apps within it.

This has been making me nuts.

I am considering trying to use the HTML_iFrame plugin to pass the FB information and sign in back and forth but am really hoping to get the proper Log In to work.

Any help would be greatly appreciated.
B
7
S
3
Posts: 30
Reputation: 687

Post » Tue Mar 31, 2015 6:26 pm

Adding some detail as I continue to troubleshoot.

I have created a clean capx just to test the FB stuff and hopefully to figure out what I am doing wrong. There will be one for the default C2 FB plugin and then one each for the cranberry v2 and PB plugin tests.

Files available:
C2 FB capx - http://gruvisoft.com/games/fbtest/fbtest_c2.capx
Index.html - http://gruvisoft.com/games/fbtest/export%20-%20c2/web/index.html
C2 FB Android apk - http://gruvisoft.com/games/fbtest/export%20-%20c2/cordova%20-%20android/installers/fbTestC2.android.20150331175728.apk
C2 FB Crosswalk ARM apk - http://gruvisoft.com/games/fbtest/export%20-%20c2/cordova%20-%20android/installers/fbTestC2.crosswalk.arm.20150331175153.apk
Cranberry v2.x capx - http://gruvisoft.com/games/fbtest/fbtest_cbry_v2.x.capx
Cranberry v2.x Android apk - http://gruvisoft.com/games/fbtest/export%20-%20cbry%20-%20v2/cordova%20-%20android/installers/fbTestCbryV2.android.20150331230058.apk
Cranberry v2.x Crosswalk ARM apk - http://gruvisoft.com/games/fbtest/export%20-%20cbry%20-%20v2/cordova%20-%20android/installers/fbTestCbryV2.crosswalk.arm.20150331225844.apk

I am also writing a comprehensive, step-by-step, process to further determine what I am missing.

Some assumptions that I am making are:
App ID = Facebook App ID
Secret = Facebook App Secret
Facebook app name (requested in Intel XDK) = Google Play Package Name from Facebook Dev (ie com.gmgllctest.gruvisoft)
App NAME (requested in Cranberry v2 plugin) = Google Play Package Name from Facebook Dev (ie com.gmgllctest.gruvisoft)
B
7
S
3
Posts: 30
Reputation: 687

Post » Wed Apr 01, 2015 1:37 pm

Processes that I am using as a guide are:
Follow FB Dev app creation here: http://shatter-box.com/knowledgebase/facebook-functions-for-cordova-crosswalk-phongegap/
Intel XDK "Import an existing HTML5 project" section from here: http://shatter-box.com/knowledgebase/how-to-build-with-crosswalk/

Here is the process that I have been going through:
1. Follow FB Dev app creation here: http://shatter-box.com/knowledgebase/fa ... phongegap/
2. Add email into the apps "Settings\Contact Email"
3. Make app publicly available in "Status & Review" using the toggle button
4. Add a Platform to add website, required for web testing
5. Open C2 and create Empty Project
6. Add "Facebook" object to Layout 1
7. Add "Button" object to Layout 1
8. Add "Text" object to Layout 1 as "helloText"
9. Click the "Facebook" object and update properties with App ID and Secret
-- a. App ID = Facebook App ID
-- b. Secret = Facebook App Secret
10. Update Event sheet 1 as follows
-- a. Add event - Button - On clicked - Facebook - Log in (request None, None)
-- b. Add event - Facebook - Is user logged in - helloText - Set text to "hello "&Facebook.FirstName
11. Web test via Chrome on Windows 8
-- a. Export project "HTML5 website"
-- b. Select location, leave defaults and make sure "Minify…" is unchecked, click Next
-- c. Select "Normal style" and click Export
-- d. Upload to webserver via Filezilla and test
12. Web test successful
13. C2 Android test via installable package from Intel XDK
-- a. Export project "Cordova"
-- b. Select location, leave defaults and make sure "Minify…" is unchecked, click Next
-- c. Supported devices: "Universal"
-- d. Check "Hide status bar"
-- e. Export audio files for "Android…", uncheck "iOS…"
-- f. Leave Minimum defaults and click Export
-- g. Open Intel XDK and follow the "Import an existing HTML5 project" section from here: http://shatter-box.com/knowledgebase/ho ... crosswalk/
-- -- i. App ID = Facebook App ID
-- -- ii. App Name = anything I want
-- -- iii. Remaining left to defaults
-- h. In Intel XDK click the Emulate tab
-- i. Test doesn’t do anything
-- j. Click the Develop tab and select intel.config.additions.xml
-- -- i. Instructions here: http://shatter-box.com/knowledgebase/ph ... ion-2-0-x/
-- k. Test still doesn’t do anything
-- l. Updating xml file again based on this: http://shatter-box.com/knowledgebase/troubleshooting/
-- m. Test still doesn’t do anything
-- n. In Intel XDK click the Test tab
-- o. Sync, Push, etc file to server
-- p. On device to into "App Preview" and load build
-- q. Test button
-- r. Nothing happens
-- s. In Intel XDK click the Build tab
-- t. Create builds for Crosswalk and Android
-- u. Load builds to device and launch to test
-- v. Crosswalk ARM test, nothing happens on button click
-- w. Android test, nothing happens on button click
14. Cranberry v2.x Android test via installable package from Intel XDK
-- a. Add the plugin into the C2 folder
-- b. Add the "Phonegap Facebook" object into Layout 1
-- c. Click "PhonegapFacebook" object to edit properties
-- -- i. Facebook App ID = Facebook App ID
-- -- ii. App NAME = Google Play Package Name from Facebook Dev
-- d. Update Event sheet 1 as follows
-- -- i. Add event - Button - On clicked - PhonegapFacebook - Log in (request "email,FirstName")
-- -- ii. Add event - PhonegapFacebook - Is user logged in - helloText - Set text to "hello "&PhonegapFacebook.FirstName
-- e. Export project "Cordova"
-- f. Select location, leave defaults and make sure "Minify…" is unchecked, click Next
-- g. Supported devices: "Universal"
-- h. Check "Hide status bar"
-- i. Export audio files for "Android…", uncheck "iOS…"
-- j. Leave Minimum defaults and click Export
-- k. Open Intel XDK and follow the "Import an existing HTML5 project" section from here: http://shatter-box.com/knowledgebase/ho ... crosswalk/
-- -- i. In the Included Plugins section check the box for "Facebook Connect"
-- -- -- 1) Facebook App ID = Facebook App ID
-- -- -- 2) Facebook app name = Google Play Package Name from Facebook Dev
-- -- ii. App ID = Facebook App ID
-- -- iii. App Name = anything I want
-- -- iv. Remaining left to defaults
-- l. In Intel XDK click the Emulate tab
-- m. Test seems to work but I get the same result as if I were testing from C2 before uploading to a webserver
-- n. In Intel XDK click the Test tab
-- o. Sync, Push, etc file to server
-- p. On device to into "App Preview" and load build
-- q. Test button
-- r. Nothing happens
-- s. In Intel XDK click the Build tab
-- t. Create builds for Crosswalk and Android
-- u. Load builds to device and launch to test
-- v. Crosswalk ARM test, nothing happens on button click
-- w. Android test, nothing happens on button click
B
7
S
3
Posts: 30
Reputation: 687

Post » Thu Apr 02, 2015 2:03 pm

I am now trying out the Pode HTML iFrame plugin. I send the frame to a page that I created with the FB login form and the frame works for signing in.

Any recommendations on passing the user information, such as FirstName, back to the C2 Layout?

Below is the latest capx using the pode plugin
C2 file using frame : http://gruvisoft.com/games/shared/fbtest_frame.capx
Pode HTML Plugin: https://www.scirra.com/forum/plugins-pode-html-pack_t69356

I am hoping to be able to keep the Facebook user account connection in the game but might have to abandon the idea for v1 if I cant figure it out.
B
7
S
3
Posts: 30
Reputation: 687

Post » Fri Apr 03, 2015 3:00 pm

Ok. I completed another build of the test last night using the tutorial here: https://www.scirra.com/tutorials/1319/how-to-use-phonegap-facebook-plugin-for-android-cranberrys-plugin

Thought maybe there was a step I was missing. Still nothing happens after I export to android using Cordova then Intel XDK for Crosswalk and Android.

I keep seeing references to an example capx but I cant find it anywhere. I thought it was supposed to be included in the plugin download.

Latest test capx is here: http://gruvisoft.com/games/fbtest/fbtest_frame_game.capx

It is a bit of a mess with all the tests I have done. The latest is on the default loading Layout with the "Log In" and "Log Out" buttons. Those are supposed to use the PhonegapFacebook plugin.
B
7
S
3
Posts: 30
Reputation: 687

Post » Fri Apr 03, 2015 4:01 pm

Found another test to run through here: https://plus.google.com/102658703990850475314/posts/FHsiUrvZXWT

Still no dice
B
7
S
3
Posts: 30
Reputation: 687

Post » Sat Apr 04, 2015 12:52 pm

Hi Gmgllc,

This is something i asked about before but like you got no reply. Hopefully you can figure it out as i had no luck when i tried it and it is something i would love to have in my game also. Best of luck.
B
9
S
3
Posts: 45
Reputation: 805

Post » Mon Apr 06, 2015 2:47 pm

Thanks for the confirmation that I am not the only one having this trouble.

I have given up on the Facebook login for v1 of my game. Hopefully I can get it figured out for v2.

I hate giving up but I have spent way more time than I should have on trying to get this working.

Please keep me posted if you get it figured out. I will do the same for you.
B
7
S
3
Posts: 30
Reputation: 687

Post » Tue Apr 28, 2015 11:26 pm

I'm facing the same problem. If some one can get us on the right direction would be wonderful!!!
B
30
S
5
G
4
Posts: 6
Reputation: 2,813

Post » Sat Jun 13, 2015 5:45 pm

yep, im waiting for a solution too..
B
17
S
2
Posts: 52
Reputation: 947

Next

Return to How do I....?

Who is online

Users browsing this forum: andersonaraujodl, Carlafnt, LaurenceBedford, teha and 1 guest