How to implement Facebook native login with Meteor?
About Meteor & Facebook Login
Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor provides in build methods for logging in to various services like Facebook, Google, GitHub, etc. However, these methods are not configured to login with these services natively i.e. using credentials from the Facebook app installed on your device. In this article, I am going to explain how you can implement native Facebook login for your Meteor App.
Prerequisites
- Prerequisites for android development in meteor.
- Facebook App in Facebook Developer Console.
- Meteor app with default Facebook login i.e. Meteor.loginWithFacebook() along with ServiceConfiguration.configurations, more details about the same over here.
Procedure
Configure Facebook App
- Open https://developers.facebook.com
- Select your Facebook App.
- Go to Settings (Basic).
- Click Add Platform.
- Select Android.
- Provide Google Play Package Name as com.example.app, replace it with your app name.
- Provide Class Name as com.facebook.LoginActivity.
- Generate Key Hashes using
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
- Click Save Changes.
Configure Android Platform
- Run meteor add android-platform in your Meteor project.
- Add mobile-config.js at the root of your Meteor project.
App.info({
id: 'com.example.app',
version: '0.0.1',
name: 'NativeFacebook',
author: 'Aman Gupta',
description: 'How to implement Facebook Native Login with Meteor?',
email: 'aman.gupta@outlook.in',
website: 'http://startupaman.com'
});
App.accessRule("*");
Configure Cordova Plugin
- Run meteor add cordova:cordova-plugin-facebook4@1.9.1 in your Meteor project.
- Add following configuration in your mobile-config.js
App.configurePlugin('cordova-plugin-facebook4', {
APP_ID: '[app_id]',
APP_NAME: 'NativeFacebook'
});
Override Meteor Login Methods
- Run meteor remove accounts-facebook in your Meteor project.
- Run meteor add btafel:accounts-facebook-cordova in your Meteor project.
- Add settings.json to your Meteor project.
{
"facebook": {
"appId": "[app_id]",
"secret": "[app_secret]"
},
"public": {
"facebook": {
"permissions": [
"basic_info",
"user_interests",
"user_activities",
"read_friendlists"
]
"profileFields": [
"name",
"gender",
"location"
]
}
}
}
Run Meteor Project
- Since Meteor’s OAuth2 login doesn’t work with mobile apps in local development mode. This limitation is because you need a public Internet address to register as an authorized redirect URL with the login provider. As a workaround, you can deploy your app and modify your app’s configuration to test OAuth login on a mobile app when developing locally.
- Run meteor run android-device --mobile-server http://deployed-server-url.com --settings settings.json --verbose to run your Meteor project.
You can follow these steps to integrate Facebook native login to your Meteor Android App. Also, you can generalize certain steps and extend it to iOS also. I hope you will find this procedure helpful.
If you liked this article, be sure to recommend it and help spread good ideas as far and wide as possible just like the broadness of Technology. Please also leave your responses below :-)
Aman Gupta is Co-founder & CEO of YourMarch. He is working with his team on this disruptive platform to bring governance and technology on the same plate. He is very passionate about the way technology can be used to disrupt old models of democracy where the contribution of citizens was limited.
6 Likes
Comments
Post a Comment