Because there is an issue with OAuth2 login and localhost development, you currently have to deploy your meteor site to be able to test the Facebook login. A nice little workaround for this is to make the local instance of meteor accessible externally.
There is a great online guide for setting up port forwarding with your router and you can check your public external IP here.
For example, If you have an Apple router, simply open up Airport Utility on your Mac and click edit on your router, then go to the Network tab. Under Port Settings click the + icon and select Personal Web Sharing, setting all of the public and private ports to 3000. Make sure the private IP is set to your current computer IP.
The end result of this is that if you meteor locally, you'll be able to access it at http://localhost:3000 on your computer and http://externalIP:3000 from anywhere.
For the sake of this walk-through, I'm going to set up a project from scratch.
Create the project
meteor create facebook-login
cd facebook-login
Add the required packages
meteor add accounts-ui
meteor add mrt:accounts-facebook-cordova
Note: The accounts-facebook-cordova package is used instead of the accounts-facebook package.
Add the IOS platform
meteor add-platform ios
Add the facebook button. Open up the HTML file in your project and put {{> loginButtons}} in the hello template.
Add the cordova plugin. This one is crucial to get right as it makes the facebook login use the native app on your phone, instead of an in-app 'popup'. It is also important to install this directly from a tarball, and not from the cordova library as to avoid a problem in x-code which results in a 'FacebookSDK/FacebookSDK.h' file not found error.
meteor add cordova:com.phonegap.plugins.facebookconnect@https://github.com/Wizcorp/phonegap-facebook-plugin/tarball/0e61babb65bc1716b957b6294c7fdef3ce6ace79
Start up your meteor app locally by typing meteor from within the directory in terminal. You will get an error saying Meteor settings for accounts-facebook-cordova not configured correctly. which you can ignore for now.
Go to your external IP that you set up earlier in a desktop browser and if you've done it correctly you should see the same result as visiting http://localhost:3000. Click "Configure Facebook Login" and follow the instructions. The only differences are:
- Set your Site URL to
http://localhost:3000/and your Mobile URL tohttp://externalIP:3000/. - Choose "Redirect based login at the bottom.
- Make note of your APP ID, name and secret. You'll need them again in a minute.
Stop the meteor instance that is running by pressing control + c in terminal.
2 files are required for configuration. Both need to be created in the root directory of your project.
This is the equivalent of the cordova config.xml file. Place in here the following:
App.configurePlugin('com.phonegap.plugins.facebookconnect', {
APP_ID: 'YourFacebookAppId',
APP_NAME: 'YourFacebookAppName'
});
This file tells the facebook cordova plugin what settings to use and which permissions to ask for.
{
"facebook": {
"appId": "YourFacebookAppId",
"secret": "YourFacebookAppSecret"
},
"public": {
"facebook": {
"permissions": [
"public_profile",
"email",
"user_friends"
]
}
}
}
Note: I think that if you are creating a hybrid app that needs to work in the browser also, you have to request the permissions the normal way as well.
Plug in your phone to your computer and type the following.
meteor run ios-device --mobile-server http://externalIP:3000 --settings settings.json
This tells meteor to run the app on your ios-device using the external IP you provided (which is really just your local machine) and with the settings.json file we created earlier.
After it has opened in XCode, run the app on your phone by selecting it from the dropdown at the top and then clicking the play button. Note - you may have to click "Trust" on your phone the first time you run it.
You should now be able to login using Facebook using the native app!
Thanks so much for this! Saved my life : )