Code Monkey home page Code Monkey logo

omniauth-facebook-example's Introduction

Quick Omniauth-Facebook Demo

Omniauth is an easy way to add authentication to your Rails app if you don't need username/password. In this example I demo how to add Facebook authentication to your app.

This tutorial refers to the example code I used to give my CA lightning talk on omniauth-facebook. If you want a more in-depth tutorial then I highly recommend the following resources.

  1. Railscasts - http://railscasts.com/episodes/241-simple-omniauth

  2. RailsApps Omniauth-Mongoid Tutorial - http://railsapps.github.com/tutorial-rails-mongoid-omniauth.html (just ignore the Mongoid and testing part if you want to focus on omniauth)

  3. The gem homepage of course! - https://github.com/mkdynamic/omniauth-facebook

Getting Started

  1. At the command prompt, create a new Rails application: rails new my_app

  2. Change directory to myapp and start the web server: cd my_app

  3. Add gem omniauth-facebook to your gemfile.

  4. Run bundle install

You should now have omniauth-facebook ready to go.

Generate a User Model

  1. In this case we will generate a User model with 4 attributes. Provider will be whichever strategy we are going to use (in this case Facebook), uid is the id we get back from that provider. We select name and email as the other attributes to fulfill the minimum requirements to get our app working.

rails g model User provider:string uid:string name:string email:string

Then run rake db:migrate

Set up Authentication

  1. Create a new file called omniauth.rb in the config/initializers directory

  2. Copy this code into your omniauth.rb file:

     Rails.application.config.middleware.use OmniAuth::Builder do
       provider :facebook, ENV['FACEBOOK_KEY'], ENV['FACEBOOK_SECRET'],
                :scope => 'email,user_birthday,read_stream', :display => 'popup'
     end
    
  3. Create a new app at http://developers.facebook.com/ (remember to enter http://localhost:3000) as your site URL

* You may want to remove the 'ENV' portion along with the [] around your Facebook key and secret.\n * You will need to define scope if you want to access additional permissions from Facebook\n * You will also need the to pass in :display => 'popup' as an additional parameter if you want to create a popup on signin. However, note you will have to write the additional javascript to make this happen!

Generate a Sessions Controller

  1. We are going to want to use sessions to store information about when a user is logged in and signed out. Therefore we need to:

     rails g controller sessions
    
  2. Within the sessions controller we can create a create action like so:

     def create
       raise request.env["omniauth.auth"].to_yaml
     end
    

* This will output in YAML format the hash we get back from Facebook.

Create Some Routes

  1. Add these routes to config/routes.rb

     match '/auth/:provider/callback' => 'sessions#create'
    
     match '/signout' => 'sessions#destroy', :as => :signout
    
     match '/signin' => 'sessions#new', :as => :signin
    

The first route defined above will direct the callback from Facebook to the sessions#create action. If you think about it in terms of hash being returned from Facebook then you can see how we will set up the create action to take in that hash and check if a user exists or create a new user using that information.

OK time to give it a test run...

  1. Hit rails s and fire up your browser to http://localhost:3000

  2. Enter in the URL http://localhost:3000/auth/facebook

This should try to login with Facebook, and upon acceptance as a user, you should see a hash of information about the user displayed on your screen.

Store User Data in User Object

  1. Add this code to your User.rb file

     def self.create_with_omniauth(auth)
       create! do |user|
         user.provider = auth['provider']
         user.uid = auth['uid']
         if auth['info']
           user.name = auth['info']['name'] || ""
           user.email = auth['info']['email'] || ""
         end
       end
     end
    

* When called this method will try and create a new user using the values of the keys in the auth hash which we will define in the sessions controller next.

Modify Sessions Controller

  1. Replace the existing create action with the code below:

     def create
       auth = request.env["omniauth.auth"]
       user = User.where(:provider => auth['provider'], 
                         :uid => auth['uid']).first || User.create_with_omniauth(auth)
       session[:user_id] = user.id
       redirect_to root_url, :notice => "Signed in!"
     end
    

This assigns the hash from Facebook into an auth variable. It then checks if a user exists and if not, it calls the create_with_omniauth(auth) method we defined in the User model. Lastly, it sets the session[:user_id] to the users id and redirects back to the homepage with a notice of "Signed in!".

  1. Add a new action to your sessions controller:

     def new
       redirect_to '/auth/facebook'
     end
    

Remember in the routes we defined a named routed called signin which was linked to the 'sessions#new' action? Now we can use that named routes e.g. signin_path which will invoke the new action and redirect to /auth/facebook to begin the authentication process.

  1. Add a destroy action to your sessions controller:

     def destroy
       reset_session
       redirect_to root_url, notice => 'Signed out'
     end
    

While we are not going to use this action in this example, this will enable you to signout users. Similar to above when you create a link using the signout_path it will invoke this action which will wipe all the information out of the session and redirect to the homepage, thus signing the user out.

Last Step - Showing it off

Create a homepage, and show the flash message as proof we are signed in.

  1. Remove old homepage

     rm public/index.html.erb
    
  2. Create home controller with index action

     rails g controller home index
    
  3. Configure routes

     root :to => 'home#index'
    
  4. Edit 'index.html.erb'

     <h1>Homepage</h1>
    
     <ul>
     <% flash.each do |key, msg| %>
       <%= content_tag :li, msg, id: key %>
     <% end %>
     </ul>
    
     <p><%= link_to 'Sign in with Facebook', signin_path %></p>
    
  5. Hit rails s and check it works!

  6. You can also enter rails c at the command line and then User.last to see if a user object was stored in your database table.

Done!

Hope you found this useful. As mentioned before I recommend checking out the official tutorials, particularly the Rails Apps tutorial which goes into much more depth.

If you have any questions just shoot me an email at wintle.ralph [at] gmail.com

omniauth-facebook-example's People

Contributors

ralphos avatar

Stargazers

Steven avatar Mozzan avatar Edwin avatar Ijoe Wahjoedi avatar Rafael Guerreiro avatar Matus Dubrava avatar Omar Khedr avatar Thomas Salmon avatar  avatar Geoff MacDonald avatar Sashi avatar ilhwan avatar Keoki Zee avatar Natalia Stanko avatar Artur Trzop avatar  avatar  avatar Vincent Williams avatar

Watchers

 avatar James Cloos avatar

omniauth-facebook-example's Issues

Mardown is broken

See #1

From 98ec6149b79a0d76e45d9099f0e02f190b46646f Mon Sep 17 00:00:00 2001
From: Mateusz Konieczny <[email protected]>
Date: Fri, 27 May 2016 13:12:03 +0200
Subject: [PATCH] fix markdown

---
 README.markdown | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.markdown b/README.markdown
index a9df487..4e46f14 100644
--- a/README.markdown
+++ b/README.markdown
@@ -47,9 +47,9 @@ Then run ```rake db:migrate```
 
 3. Create a new app at http://developers.facebook.com/ (remember to enter http://localhost:3000) as your site URL
   
-\* You may want to remove the 'ENV' portion along with the [] around your Facebook key and secret.\n
-\* You will need to define scope if you want to access additional permissions from Facebook\n
-\* You will also need the to pass in ```:display => 'popup'``` as an additional parameter if you want to create a popup on signin. However, note you will have to write the additional javascript to make this happen!
+* You may want to remove the 'ENV' portion along with the [] around your Facebook key and secret.
+* You will need to define scope if you want to access additional permissions from Facebook
+* You will also need the to pass in ```:display => 'popup'``` as an additional parameter if you want to create a popup on signin. However, note you will have to write the additional javascript to make this happen!
 
 ## Generate a Sessions Controller
 
@@ -63,7 +63,7 @@ Then run ```rake db:migrate```
           raise request.env["omniauth.auth"].to_yaml
         end
   
-\* This will output in YAML format the hash we get back from Facebook. 
+* This will output in YAML format the hash we get back from Facebook. 
 
 ## Create Some Routes
 
@@ -101,7 +101,7 @@ This should try to login with Facebook, and upon acceptance as a user, you shoul
           end
         end
   
-\* When called this method will try and create a new user using the values of the keys in the ```auth``` hash which we will define in the sessions controller next.
+* When called this method will try and create a new user using the values of the keys in the ```auth``` hash which we will define in the sessions controller next.
 
 ## Modify Sessions Controller
 

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.