What is the best practice when attempting to use facebook or twitter authentication inside a phonegap application?
Traditionally I’ve used Passport.js in my applications and have the user redirected to facebook/twitter login page, and then redirected back to the application, but I’m not sure how to perform this on a mobile application. Or is it the same process? Any help or examples are appreciated.
This can help you:
I didn’t sucess with this plugin. Is anyone have a tutorial about it ? It doesn’t work, I’ve tried a lot of various techniques without sucess… I need a login page for my application.
I handle authentification with this plugin too. It was a bit tricky to make it work :). I followed the manual Android installation. Moreover I integrate it with Angular.js with this module.
I’ve followed the manual too but I can’t build the app. I got an error:
$ cordova build
Generating config.xml from defaults for platform “android”
rm: could not remove directory (code EBUSY): c:\Sites\apps\hello\platforms\andro
id\assets\www
mkdir: path already exists: c:\Sites\apps\hello\platforms\android\assets\www
Preparing android project
Compiling app on platform “android” via command “cmd” /c c:\Sites\apps\hello\pla
tforms\android\cordova\build
Error: An error occurred while building the android project.Error executing “ant
clean -f “c:\Sites\apps\hello\platforms\android\build.xml””:
BUILD FAILED
c:\Sites\apps\Android\sdk\tools\ant\build.xml:471: The following error occurred
while executing this line:
C:\Sites\apps\sdk\facebook-android-sdk-3.7\facebook\build.xml:46: sdk.dir is mis
sing. Make sure to generate local.properties using ‘android update project’ or t
o inject it through an env var
Total time: 0 seconds
at ChildProcess.<anonymous> (c:\Users\Leo\AppData\Roaming\npm\node_modules\cordova\src\compile.js:65:22) at ChildProcess.EventEmitter.emit (events.js:98:17) at maybeClose (child_process.js:743:16) at Process.ChildProcess._handle.onexit (child_process.js:810:5)
I’ve resolved this error running android update lib-project -p . in the folder facebook/ do sdk.
Would you mind provide the setup for this module to work in a native environment? My angular controller is set up as described in the README, and I have included files from the facebook sdk and the module in my index.html. I works in the browser if I substitute facebook-js-sdk.js for http://connect.facebook.net/en_US/all.js
<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>-->
<script src="lib/js/angular-facebook.js"></script>
<script src="lib/js/angular-facebook-phonegap.js"></script>
Edit: I just posted this question on stackoverflow
Hi,
I tried to give you the most usefull steps in your question on stackoverflow. I hope it will help you!
I’m also trying to do a Facebook login with an Ionic starter template app but I’m getting this error when I try to build the app:
#import "FacebookSDK.h" !'FacebookSDK.h' file not found
I have the FacebookSKD.Framework in the Framerwork folder in my project, following the steps on phonegap-facebook plugin. any thoughts?
Try changing the path to
#import "FacebookSDK/FacebookSDK.h"I actually needed something like that for a few apps I’m working on. I spent quite some time investigating this and was able to achieve something I was happy with, just thought I’d share some of the stuff I’ve done.
In addition to email/password authentication I’ve added some social authentication which kind of works in the same way.
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
Nice stuff @vmaliko. I’ve been working with Satellizer for web clients and was about to try implement with Ionic, but I plan to give this a go.
@grege thanks let me know if you have any questions or issues.
any update , on using satellizer with ionic
I want to give the users the ability to login with Facebook and Twitter but not by opening a link with inAppBrowser plugin. I’d like to be able to access the Facebook/Twitter apps already installed on the mobile devices(or the accounts from Settings -> Twitter/Facebook on iOS), where the user grants access, and then gets back to my app logged in. Any ideas?
It seems there’s a way to do this with the Facebook plugin previously mentioned. But what about Twitter?
I found a couple similar questions on stackoverflow but they had no answers.
@pcbulai - not the easiest of approaches, but you could do something like this: Native authentication leading to a crosswalk webview - put the login screen as an activity inside of Android Studio (or XCode in the case of iOS) and have it just send you to a webview when you’re authenticated.
Thanks for the tip. I’ll take it for a spin and hopefully it’ll solve my problem.
@pcbulai if you get anywhere with this, please update this thread, I’ve found way too many abandoned threads on this topic on the web, we all need a solid solution available for Android and iOS. I’ve been looking for a native app solution for Facebook login + Phonegap + AngularJS for a while. I’ve been using the InAppBrowser for a while and whenever I’m present when someone uses my app and they see that it doesn’t use native, they get confused or worse yet “I can’t remember my Facebook password”… which is really their problem, but the user flow is interrupted with InAppBrowser.
@ScottN I agree the social login is a big problem. I’m fairly new to mobile development and when I saw that I can do the social login I was really happy. But that lasted about 5 minutes, until I realised that you’re not supposed to login with facebook/twitter in an app by entering your social networks credentials but by using the native apps. So yeah, I’m kinda stuck in solving this right now.
Of course I will update the topic, regardless of what the end result will be. Stay put!
Hi @neilff,
You might take a look at the ngCordova module I made for Oauth. I wrote about it here:
http://ionicframework.com/blog/oauth-ionic-ngcordova/
It will open a browser pointed at the official provider endpoints so when you enter your credentials, you’ll be entering them directly on the providers website. The logic in the module will determine what to do after.
Regards,