Authentication of Rails App using Devise through FACEBOOK Login

In my previous blog I have explained in detail, how to provide a simple authentication using Devise gem 

Now lets start in step by step guide on how to integrate Facebook login using devise. 

INSTALL THE DEVISE , OMNIAUTH AND OMNIAUTH-FACEBOOK GEM.

Open up your Gemfile and  include these gems.mentioned below gems in your gem file Devise gem is used here to provide authentication, omniauth is a gem used for connecting to social websites facebook, google, and twitter,  omni-auth facebook gem is used here to communicate with the facebook API's here we need to all these three gems for to obtain authentication through Facebook login credentials 

gem 'devise'  
gem 'omniauth'
gem 'omniauth-facebook'

Then in your terminal run the bundle install command to install the gem.


$ bundle install

RUN SOME DEVISE GENERATORS TO SET UP THE INITIAL CONFIGURATIONS.

Run this command from your terminal:

$ rails generate devise:install

This generator installs the initializer that configures all of Devise's available settings.

GENERATE YOUR USER MODEL.

Next we need to generate our User model. I'm going to name it User but you can name it whatever you like, just replace User with Whatever.

$ rails generate devise User
$ rake  db:migrate

Go the user model and add the following line

devise :omniauthable

We need two more coloums to check the Provider whether Google or facebook and its respective UID so add the migration

$ rails g migration AddProviderToUser provider:string uid:string

Now run rake db:migrate 

We should create facebook APP-ID and SECRET at developers facebook account, lets start through step by step, how to to create..

Step 1:-  Login to your Facebook account. with your username/email and password.

Step 2:- Login to Facebook developer’s website with your Facebook credentials. Then Create an application by clicking on Apps >Create a New App

Note:-  If you are creating a Facebook App for the first time, you will need to enter your phone number and verify it through SMS.

Step 3:- Enter a Name for your App (I recommend you to enter the name of your blog/website). Choose a category and then click on Create App button

Step 4:- Click on App platform button on the App dashboard.

Step 5:- Click on Website icon.

Step 6:- Enter the correct URL of your website. If you don’t enter correct URL, Facebook Publish wont work 

 And here you have your APP ID and SECRET KEY. Secret key is usually hidden and you have to click on showbutton to reveal it.

Now you need to use those APP ID and Secret into your application at config/initializers/devise.rb

require 'omniauth-facebook'
config.omniauth :facebook, "APP ID", "APP SECRET"

Now goto layout file and add the following snippet

<% if user_signed_in? %>
  <p>Welcome <%= current_user.email %></p>
  <%= link_to 'Logged In [click to logout]', destroy_user_session_path, :method => :delete %>
<% else %>
  <p>You are not signed in.</p>
  <%= link_to 'Login', new_user_session_path %>
  <%= link_to 'SignUp', new_user_registration_path %>
  <%= link_to 'Login with Facebook', user_omniauth_authorize_path(:facebook) %>
<% end %>

Create a new controller named as"omniauth_callbacks_controller.rb".

$ rails g controller omniauth_callbacks

change the routes with the following code

devise_for :users, :controllers =>{ : omniauth_callbacks => "omniauth_callbacks" }

Add the following method under omniauth_callbacks_controller.rb

class OmniauthCallbacksController < Devise::OmniauthCallbacksController   
def facebook     
     @user = User.find_for_facebook_oauth(request.env["omniauth.auth"], current_user)      
     if @user.persisted?       
      sign_in_and_redirect @user, :event => :authentication #this will throw if @user is not activated
      set_flash_message(:notice, :success, :kind => "Facebook") if is_navigational_format?
    else
      session["devise.facebook_data"] = request.env["omniauth.auth"]
      redirect_to new_user_registration_url
    end
  end
end

And finally add the following block under user.rb model

 def self.find_for_facebook_oauth(auth, signed_in_resource=nil)
    user = User.where(:provider => auth.provider, :uid => auth.uid).first
      if user
       return user
       else
       registered_user = User.where(:email => auth.info.email).first
        if registered_user
         return registered_user
         else
         user = User.create(
                            provider:auth.provider,
                            uid:auth.uid,
                            email:auth.info.email,
                            password:Devise.friendly_token[0,20],
                          )
        end    
     end
 end

Its finally finished, now you  run the server and can easily login through facebook into your web app

 

The above snap explains how the devise+omniauth+facebook login works