Bulent Tastan

Login with Facebook using Meteor JS

Meteor JS makes it very easy to authenticate users with Facebook. The social authentication support comes built-in with use of a couple of packages in your application. I’ll demonstrate how easy it is by creating a website that lets users login with Facebook and shows their name and gender after logging in (if you’d like to show/use more user details they are available, but for simplicity we’ll just show these two). So let’s jump right into it:

Facebook allows developers to create test apps to validate the functionality from the localhost domain, so we’ll create a test app for our demo. Here’s how we create a test app:

Go to Facebook developers page and from the Apps tab select your app.

Screen Shot 2014-12-02 at 5.43.56 AM

 

Then from the left menu hit Test Apps and on that page hit the Create a Test App button.

Screen Shot 2014-12-02 at 5.45.32 AM Screen Shot 2014-12-02 at 5.45.46 AM

 

 

 

 

On the create a test app form enter a name for your app (I used “sample app – test1″). It will ask you to pass a captcha test and once you pass that your test app should be ready to use.

Screen Shot 2014-12-02 at 5.48.41 AM

On the Basic settings, hit “+ Add Platform” to add a Website platform to our app.

Screen Shot 2014-12-02 at 6.01.07 AM

Add “localhost” to the App Domains and “http://localhost:3000″ to the Site URL, then hit Save Changes.

Screen Shot 2014-12-02 at 6.05.39 AM

On the Advanced settings, scroll down and add “http://localhost:3000/_oauth/facebook?close” to the Valid OAuth redirect URIs and save your change.

Screen Shot 2014-12-02 at 6.07.46 AM

Go to the app’s Dashboard and copy your App ID and App Secret. We’re going to use these ids later for app configurations.

Screen Shot 2014-12-02 at 6.10.51 AM copy

That was all we needed to do to set up our app configurations from the Facebook developers site. Now we can start writing our code to wire up things together.

I’m skipping the creation of a basic meteor app, but if you need help on that part you can follow the meteor’s official tutorial to learn more about creating a meteor site and read this  article to structure your app.  I assume you have a “client” and “server” folders and a basic project that is up and running.

We need to add 2 packages to get the Facebook login functionality working. Let’s add these packages:

The accounts-facebook plugin enables facebook login and service-configuration allows to store the setup for our Facebook app’s ids.

We’ll create a file “social-config.js” under the server folder to hold our Facebook configurations and add the following lines to the file (don’t forget to change the appId and secret with your app’s ids):

In order to show a page with the login button we’ll create a basic login template:

In the login template we check if the user is logged in. If the user is logged in we display the user’s name and gender, and we add a logout button. If the user is not logged in, we show the famous login with Facebook button. You can use other ways to display the login page or even use the “accounts-ui” package, but for the sake of simplicity we’ll stick to this template.

Then we’ll tie the click events to define the login and logout actions and we’ll use meteor’s loginWithFacebook and logout methods:

Now the app is ready to accept Facebook logins.

Go to your app’s page and try logging in with your Facebook account and you should see your name and gender displayed on the page. It’s that easy.

Screen Shot 2014-12-02 at 6.50.36 AM

Screen Shot 2014-12-02 at 6.53.42 AM

 

 

 

In this tutorial, I demonstrated the configurations and code needed to accept Facebook logins for your meteor application. Feel free to comment if you have any questions.

Using NetBeans IDE for ruby | rails development

If you are also a java programmer like me you are most probably familiar with the popular NetBeans IDE. However one thing you don’t know is you can actually use the same IDE for developing your ruby or ruby on rails applications. Here’s how you do it:

  1. Setup your ruby and rails development environment by following the steps from http://railsinstaller.org/
  2. Install NetBeans 7.0 (strictly this version) from http://download.netbeans.org/netbeans/7.0/final/bundles/netbeans-7.0-ml-javase-windows.exe
  3. Add Ruby on Rails plugin http://plugins.netbeans.org/plugin/38549/ruby-and-rails to your NetBeans IDE
  4. Voila, everything is set

The plugin allows you to code in ruby using the same java IDE, and besides you still have the code completion, 1 click run and other capabilities that come with the IDE.

As far as I know, the team that develops the plugin is still working on creating a new version, so if you install any version of NetBeans other than 7.0 you’re not going to be able to install the plugin. So make sure you install the version 7.0.

If you have any comments or questions please find my email in my resume from the home page, as I disabled the comments because of spams.

Thanks and let’s keep on coding

Copyright © 2014 Bulent Tastan

Theme by Anders NorenUp ↑