Working with Facebook using Devise, Omniauth, Koala and Rails 5
The feature that possibly every developer had to implement at some point in their career is user authentication. In some cases, you might want to make use of Facebook accounts to facilitate the login/authentication process. That’s why I will guide you through a simple Rails 5 application that works with Facebook using devise, OmniAuth Facebook and Koala. So let’s begin!
Facebook App
First of all, we need to setup our Facebook app. There’s not much to add on this, simply create a new Facebook app if needed. When your app is created, make sure to add the proper app domain. In this case, the app domain will be localhost to allow us to test it locally, but it should be changed to work properly on your staging or production environment. Also, make sure to add a platform according to what kind of application you’re working on. Here I selected a website and the site URL should match the app domain.
Setting up the Rails app
As I mentioned, we will be using devise, OmniAuth Facebook and Koala. So after creating the new Rails 5 app, the next step should be adding these gems to our gemfile:
gem 'devise'
gem 'omniauth-facebook'
gem 'koala'Next, we will need the User model. We will add uid and token for Facebook and we will not add email as devise will do that for us.
After creating the User model, don’t forget to setup devise:
rake db:migrate
rails generate devise:install
rails generate devise UserNext, we will add our Facebook app keys in config/initializers/devise.rb:
config.omniauth :facebook,
ENV["FB_APP_ID"],
ENV["FB_APP_SECRET"],
scope: 'email,user_likes'In this case, I set up a .env file with the Facebook keys using the gem dotenv. I also added the scope of our app. In this example, this will ask permission to allow our app to access the user’s email and likes. Since we are only interested in using devise with omniauth, this is what we should add to user.rb to setup devise:
devise :omniauthable, :omniauth_providers => [:facebook]We also need a callbacks_controller to process the Facebook authentication callback. I added mine in a controllers/auth folder, but you can add it anywhere you want as long as you describe it in your routes file:
devise_for :users, controllers: { omniauth_callbacks: 'auth/callbacks' }At this point, we are ready to start our application.
Building the App
The application we will be building will allow the user to login using a Facebook account. Then we will be using the user’s access token to get the list of books and movies that the user likes.
For starters, I created a homepage with a login button that leads us to a Facebook dialog. This Facebook dialog will then ask the user permission to access his information through our app.
To link the login button to Facebook, omniauth provides a route called user_facebook_omniauth_authorize. After the user gives consents to our app’s permissions, we will need to handle the response using our callbacks_controller.
Let’s take a look at the code:
As you can see, the callbacks_controller has two actions: facebook and failure. These names should be self-explanatory and our focus will be on the facebook action. In here we can access the user’s account information with request.env["omniauth.auth"] and we will use it to create a user if needed.
At this stage, the user can successfully login in our application. The information we have access to through the Facebook app allows us to create a new user and proceed with the authentication. Note that I added some simple styling and templates to the application, though I won’t be addressing those in this post. You can take a look at the end result if you want.
Now that we have the authentication working, we will work on getting the books and movies list. Remember that we kept the user’s Facebook token? This is where it is needed since the token is required to work with Facebook Graph API.
We will now be working with Koala, and for this I like to have a separate class to handle the Facebook requests. In this example, we only need the get_object method, but Koala provides a lot more methods that we could use, I recommend you check it out.
Let’s take another look at the code:
Next, we will be using the Facebook service to fetch the data we need. In this example, we will be fetching books and movies, but we could be doing a lot more. I recommend taking some time to look at the Graph API documentation or playing around with Graph API Explorer. These are great to have a sense of what the Graph API has to offer.
In this case, the list is showing name, picture, and author/studio. In order to do that, we need to specify the fields we want in the request.
So that pretty much sums it! This is a simple example of how to work with Facebook, from authentication to fetching data. I hope this will help you to get started and work on awesome stuff!
Recommended links
Summary of recommended links throughout the article and some more:
If you have any comments, questions or suggestions, I’d love to hear them. Let me know if you found this article useful, or if you have any tips on working with Facebook or any of these gems.
I am currently working at Runtime Revolution. We are a team of developers that work from sunny Lisbon to everywhere. We focus on delivering and maintaining the best possible products to our clients, while having fun, learning and helping each other.
