Skip to content
This repository
Mark Dodwell November 14, 2013
file 111 lines (93 sloc) 3.664 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
require 'bundler/setup'
require 'sinatra/base'
require 'omniauth-facebook'

SCOPE = 'email,read_stream'

class App < Sinatra::Base
  # turn off sinatra default X-Frame-Options for FB canvas
  set :protection, :except => :frame_options

  # server-side flow
  get '/' do
    # NOTE: you would just hit this endpoint directly from the browser
    # in a real app. the redirect is just here to setup the root
    # path in this example sinatra app.
    redirect '/auth/facebook'
  end

  # client-side flow
  get '/client-side' do
    content_type 'text/html'
    # NOTE: when you enable cookie below in the FB.init call
    # the GET request in the FB.login callback will send
    # a signed request in a cookie back the OmniAuth callback
    # which will parse out the authorization code and obtain
    # the access_token. This will be the exact same access_token
    # returned to the client in response.authResponse.accessToken.
    <<-END
<html>
<head>
<title>Client-side Flow Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="fb-root"></div>

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '#{ENV['APP_ID']}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function(d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));

$(function() {
$('a').click(function(e) {
e.preventDefault();

FB.login(function(response) {
if (response.authResponse) {
$('#connect').html('Connected! Hitting OmniAuth callback (GET /auth/facebook/callback)...');

// since we have cookies enabled, this request will allow omniauth to parse
// out the auth code from the signed request in the fbsr_XXX cookie
$.getJSON('/auth/facebook/callback', function(json) {
$('#connect').html('Connected! Callback complete.');
$('#results').html(JSON.stringify(json));
});
}
}, { scope: '#{SCOPE}' });
});
});
</script>

<p id="connect">
<a href="#">Connect to FB</a>
</p>

<p id="results" />
</body>
</html>
END
  end

  # auth via FB canvas and signed request param
  post '/canvas/' do
    # we just redirect to /auth/facebook here which will parse the
    # signed_request FB sends us, asking for auth if the user has
    # not already granted access, or simply moving straight to the
    # callback where they have already granted access.
    redirect "/auth/facebook?signed_request=#{request.params['signed_request']}"
  end

  get '/auth/:provider/callback' do
    content_type 'application/json'
    MultiJson.encode(request.env)
  end

  get '/auth/failure' do
    content_type 'application/json'
    MultiJson.encode(request.env)
  end
end

use Rack::Session::Cookie

use OmniAuth::Builder do
  provider :facebook, ENV['APP_ID'], ENV['APP_SECRET'], :scope => SCOPE
end

run App.new
Something went wrong with that request. Please try again.