Facebook login Cordova Plugin or native js api?


#1

I would like to offer a facebook login option to my app. i found https://github.com/phonegap/phonegap-facebook-plugin and it says if I use phonegap build just to include in the config

<gap:plugin name="com.phonegap.plugins.facebookconnect">
    <param name="APP_ID" value="..." />
    <param name="APP_NAME" value="..." />
</gap:plugin>

I don’t see how this will let me test it locally ?

I have tried other ways to get a facebook connect to work on an ionic/phonegap app but I am not sure how to fill out the information on the facebook dev page about iPhone Store ID iPad Store ID for iOS and the Class Name on the android one. Or is it just a web app? but then what is the Site URL for that one?

I am confident I can use the API once i get it working. I understand how to do the Graph API queries and use the objects and such I just dont know how to get it started.

Thank you


#2

Continuing the discussion from Facebook login Cordova Plugin or native js api?:

I’m still having trouble with integrating facebook with a phonegap app.

Now I am using oauth.io’s phonegap plugin. I think there is a bug somewhere in the plugin though because it says it cannot find plugin InAppBrowser. I think it has something to do with the casing. in the plugin it comes with an inappbrowser.js file rather than InAppBrowser.js. Anyone else have problems too ? I created a blank project and included oauth.io’s plugin only and had these problems. Once I duplicated and renamed the file in the plugin directory with capital letters it works but this isn’t a solution. I don’t know how to figure out how to make it not look for the capitalized version.


#3

Here’s what I’ve done to get this all working…

First create a FB app just for testing if you haven’t already.
Then on the Facebook dev page do this:

  1. In IOS section, fill out only the Bundle ID. Make it the same as the id value you have in your config.xml file under <widget id="com.whatever.you.have.here"> (Sorry, I haven’t tried Android yet)

  2. For desktop testing, add a Website section. Enter your development url (http://localhost.com:8000/) or whatever it is. I also entered “localhost.com” in App Domains above, although I’m not sure if this is really needed.

At this point, FB apis to sign in/out and make graph queries should hopefully work on the phone and in the emulator.

If you also want to test on your desktop browser, there’s one more trick that took me quite some time to figure out. The version of facebook-js-sdk.js that comes with the cordova plugin is old or custom or something.

It seems to work natively and play nice with the cdv-plugin-fb-connect.js plugin file, but it won’t work correctly on your desktop browser. When using it, I consistently got an error back from FB about an invalid url that wasn’t authorized in my app settings (even though it was).

To solve this for desktop testing, I had to use the latest fb js file. I haven’t yet managed to get this working with “one codebase”, but by slightly altering my index.html file depending on whether I’m deploying to the device or testing in my browser, I managed to get both scenarios working well.

The relevant section of index.html looks like this:

<script src="lib/js/cdv-plugin-fb-connect.js"></script>
<!-- For native 
<script src="lib/js/facebook-js-sdk.js"></script>
-->

<!-- For webapp 
-->
<script src="http://connect.facebook.net/en_US/all.js"></script>

Comment out whichever one you aren’t using, depending on your target environment.

Last step, is to run different FB.init() code depending on the environment. Like this:

ionic.Platform.ready(function() {
    var appID = "[ your app id here ]";
    var device = ionic.Platform.device();
    try {
        if(device && device.model) {
            console.log("doing Native fb init");
            FB.init({ appId: appID, nativeInterface: CDV.FB, useCachedDialogs: false, status: true });
        } else {
            console.log("doing non-native fb init");
            FB.init({ appId: appID, status: true});
        }
    } catch (e) {
        console.log("fb init error"+e);
    }
});

I’m still curious if there’s a nicer way to do this without having to have different includes for different environments. If anyone knows of a way, please share. Thanks.


Facebook login + Parse
#4

Thank you for your reply.

What do I put for the url when I test on a phone?

Do I not have to do anything else with the ios or android SDK from facebook ?

I don’t mind having to put it on a device every time, I’m going to be testing on the android emulator locally and then put it on my phone and tablet. I don’t have an ios device but that is also a target. I have someone that will test on ios for me.


#5

When you test on the phone, you don’t have to worry about urls. As long as you have the correct app id in your init code, and you’re doing the native init, I think things should work fine.


#6

@udi ok thank you. I’ll try that.

Using this facebook connect plugin I have a blank project and copied the example files over to the www folder. I run it and it runs the ‘Hackbook’ demo. I try to log in and I am getting invalid android_key parameter then it lists a key. I copy that into the android section on the developers.facebook.com site and it still says that. I found the documentation on how to generate the hash and everything. I have both the one listed on the app and the one generated against the debug.keystore.

Anyone have experience with facebook and using phonegap build ? i would greatly prefer to use phonegap build so it can be ‘hydrated’ which makes it easier to test across multiple devices.


#7

Just FYI for anyone else using the Facebook Connect and targeting Android. I think I figured it out. It seems that the output of the command

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

which is given to us at https://developers.facebook.com/docs/android/getting-started outputs a hash with a = at the end of it. do NOT use this trailing = in the Facebook app settings.


#8

Hi There,
thanks for pointing out the trailing =
Did you encounter any other errors?
I keep getting
"Given URL is not allowed by the application URL"
what do I set the app URL to if its a native android app?
…are there are any other tricks to this?


#9

Any chance you put this in plunker so i can understand how and where u implemented this?


#10

Everything other than the code snippets I posted is the same as the standard documentation instructions. My version lets you test in the desktop browser as well as in the app, with working FB connect. The first snippet goes in index.html and the second one goes in your apps initialization code, perhaps in js/app.js or in a service. If there’s anything in particular that’s unclear, let me know and I’ll try to clarify.


#11

Hi, this post is outdated since phonegap-facebook-plugin released a new version where you can install the plugin automatically via plugman.
Even the solution I wrote a week ago is outdated since there isn’t an init method for native fb sdk anymore.
When I update my repo with the latest version of the plugin I’ll write another post.


#12

Y’all may also want to look at this :

http://coenraets.org/blog/2014/04/facebook-phonegap-cordova-without-plugin/


#13

Thanks, looks like it’s a good alternative!


#14

Today Christophe Coenraets posted this: http://coenraets.org/blog/2014/04/sociogram-angularjs-ionic-facebook/


#15

Hello,

My Application crashes when I tried login with facebook. This situation occur in the case of facebook app not installed. If facebook app is installed it worked fine.

I am using this plugin https://github.com/phonegap/phonegap-facebook-plugin

Can Anyone help me, so How I can work out login without being have to facebook app installed also. I want both way my application should work.

Thanks
Gaurav


#16

Have you, or anyone else out there, gotten this to work? Can’t seem to get the fb login window to close after it opens.


#17

I used this integration and then used it as a basis for a twitter integration that I needed also.

You can see the twitter sample I wrote here ionic.twitter.sample


#18

You need to set an id to the main ion-view. In his example he set id=main


#19

I’m using the sociogram configuration, but how do you take the access token that is returned to the oauthCallback.html page and actually get it into your app?


#20

if you look at the code, the oauth page calls a function back in your service, that is where you should be parsing the response url for the token.

See this line in the original code sample