Skip to main content

Facebook Login Helpful links













How to implement Facebook native login with Meteor?


Aman Gupta

Aman Gupta


Co-Founded YourMarch · Entrepreneur · Designer · Engineer · Coder

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

  1. Prerequisites for android development in meteor.
  2. Facebook App in Facebook Developer Console.
  3. 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

  • 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.
In his free time, you can find him playing games, lots of games :-). You can follow him on TwitterFacebook or connect with him on LinkedIn.
This article originally appeared in his Personal Blog “Startup Aman!”.


Comments

Popular posts from this blog

Meteor JS REST API

WRITE A POST Shahid Shaikh FOLLOW Engineer, Blogger from Mumbai. RESTful CRUD Operations in Meteor.js Published Dec 31, 2015 Last updated Jan 19, 2017 Introduction Meteor is a popular framework for building real-time web applications. We have already covered a tutorial which explains  how to build chat system using Meteor.js . In this tutorial, we will learn how to develop a RESTful API using Meteor which perform CRUD operations. Creating new project Create a new meteor project using the following command: meteor create appName Choose an application name of your choice. Once Meteor is done creating the project, you will see the directories and files created by Meteor in the folder name. We will not need them as of now, so we will delete all of those files and create whatever we need in the coming section. Installing iron-router In order to perform routing in Meteor, we will use  this awesome...

Meteor Mongodb Mup Commands

docker exec -it mongodb mongo docker cp mongodb:dump/ce5-meteor . If deployed with mup, you are in luck. You can find the steps here:  https://github.com/xpressabhi/mup-data-backup Here are the steps again: MongoDB Data Backup deployed via mup These commands run well only if meteor deployed with mup tool. Mup creates docker for mongodb hence taking backup becomes easy with these commands. Backup Take backup of running app data from docker then copy to local folder out of docker. docker exec -it mongodb mongodump --archive= /root/m ongodump. gz --gzip docker cp mongodb : /root/m ongodump. gz mongodump_$ (date +%Y-%m-%d_%H-%M-%S). gz Copy backup to server Move data to another server/local machine or a backup location scp /path/to/dumpfile root@ serverip : /path/ to/backup Delete old data from meteor deployment Get into mongo console running in docker then drop current database before getting new data. docker exec -it mongodb mongo appName db. runCommand ( { dropDatabase : 1 } ) ...