Facebook login + Parse

hello. has anyone tried to use ionic with Facebook connect and Parse? i get the facebook login to work fine, but when I try to link to Parse as my backend I have no clue of what I’m doing. Would love some directions if you know something about it. i have the parse script on my index.html, but i’m not sure it should be there:

<script>
window.fbAsyncInit = function() {
 Parse.FacebookUtils.init({
        appId      : 'xxxx', // Facebook App ID
        channelUrl :'channel.html', // Channel File
        status     : true, // check login status
        cookie     : true, // enable cookies to allow Parse to access the session
        xfbml      : true  // parse XFBML
      });
     
      // Additional initialization code here
    };

(function(d, debug){
       var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
       ref.parentNode.insertBefore(js, ref);
     }(document, /*debug*/ false));
  </script>

and I created a controller

controllers.controller('LoginCtrl', function ($scope, $location, ParseService) {

$scope.FB_login = function() {
ParseService.FB_login(function(user) {
  // When service call is finished, navigate to items page
  $location.path('/tab');
});
}

})
LoginCtrl.$inject = ['$scope', '$location', 'ParseService']

And a channel.html with just this:

<script src="//connect.facebook.net/en_US/all.js"></script>

i open the simulator and get a blank screen.

1 Like

couple of links i use that may help

http://blog.brunoscopelliti.com/facebook-authentication-in-your-angularjs-web-app

http://brandid.github.io/parse-angular-demo/#/features/facebook

2 Likes

Currently there is no support for handling the facebook login by Parse via the InAppBrowser i guess.

I just debugged a bit and saw that the origin url in the request (which is handled by the Parse SDK / FB SDK) is something like file://{HASH} (example: file://f3b7695e8) which is correct because the origin of the request is a local embedded file from cordova. You can’t add a file:// path to your facebook app, so there is no way to get around it.

Here is the alternative you can go with:

Use the OpenFB library by Christophe Coenraets to handle the facebook login by your own. His library builds up the facebook login url itself. This enables you to add a callbackUrl to your app settings.

This way you can signup your users with facebook data through the Parse.User.signUp method and enforce them to set a password.

Parse.FacebookUtils.login

openFB.login

@darrenahunter Do you have any idea of getting the parse-angular-demo on phonegap / cordova working ?

Can anybody confirm the same behaviors ?


Further reading

1 Like

Hi mtt

I have apps working using ionic / angular / parse / phonegap - working well however haven’t implemented the FB interface.
Can you give me an idea of your use case or workflow for FB integration and I could have a go

Cheers
Darren

Hey @darrenahunter,

do your apps work with the Parse.FacebookUtils.logIn method ?

Hi mtt

Haven’t had the need for Parse Facebook integration as yet

Cheers

Hey guys, let’s put higher priority to the ngCordova facebook integration. Add +1 at https://github.com/driftyco/ng-cordova/issues/102

2 Likes

hi @mtt

i have successfully integrated Parse.com with my ionic app with the Parse Facebook login as well, everything’s working fine in my chrome browser, then i add the cordova fb connect plugin and build my app using phonegap build, test it on my device and nothing happens when i click the login button, no response at all not even any error messages from fb, any clues for that? thx in advanced.

1 Like

Hey guys,

great news. I found a solution that worked for me.

  var fbLoginSuccess = function(userData){
          if (!userData.authResponse){
                  fbLoginError("Cannot find the authResponse");
                  return;
          }
          var expDate = new Date(
                  new Date().getTime() + userData.authResponse.expiresIn * 1000
          ).toISOString();
          var authData = {
                  id: String(userData.authResponse.userID),
                  access_token: userData.authResponse.accessToken,
                  expiration_date: expDate
          }
          fbLogged.resolve(authData);
          fbLoginSuccess = null;
  };

  var fbLoginError = function(error){
          fbLogged.reject(error);
  };


  var fbLogged = new Parse.Promise();
  facebookConnectPlugin.login(["email","user_birthday"], fbLoginSuccess, fbLoginError);

  fbLogged.then(function(authData){
          return Parse.FacebookUtils.logIn(authData);
  }).then(function(userObject){
          .......
  }, function(error){
          .......
  });

Andrea Zicchetti posted a perfect solution for that problem here: https://www.parse.com/questions/facebookutils-and-cordova-310

From what I’ve read it seems most people used parse on the client side (angularjs code). I went in a differrent direction and used it with my nodejs server. I’m able to login with twitter and instagram. Adding facebook would follow the same principles applied for twitter and instagram.

You can download the apk and test it.

If this is what you’re looking for you can checkout both the client side code at : https://github.com/malikov/Authenticate.me-client-cordova-ionic

And the server side code at : https://github.com/malikov/Authenticate.me-Node-Server

Best of luck

You can refer to this guide here: http://www.benjamin.my/how-to-set-up-facebook-connect-plugin-and-parse-com-in-ionic-phonegap/

The example is specifically made in Ionic Framework.

hi @mtt,

Nice to hear that u already success doing facebook login using ionic and parse.
Could you give me a full example how to do that ?
There is so many different documentation that make me so confused how to use it.
I need explanation about …

  1. best way to init parse and facebook ?
  2. how to use facebookConnectPlugin?
  3. example login code in controller and service.

Thks in advance.