2013-12-12 02:48:03 -05:00
|
|
|
require 'sinatra'
|
|
|
|
require "sinatra/reloader"
|
|
|
|
require 'yaml'
|
|
|
|
|
|
|
|
# configure sinatra
|
|
|
|
set :run, false
|
|
|
|
set :raise_errors, true
|
|
|
|
|
2016-06-26 20:29:32 -04:00
|
|
|
# REQUEST STEP (server-side flow)
|
2013-12-12 02:48:03 -05:00
|
|
|
get '/server-side' do
|
2016-06-26 20:29:32 -04:00
|
|
|
# NOTE: You would just hit this endpoint directly from the browser in a real app. The redirect is
|
|
|
|
# just here to explicit declare this server-side flow.
|
2013-12-12 02:48:03 -05:00
|
|
|
redirect '/auth/facebook'
|
|
|
|
end
|
|
|
|
|
2016-06-26 20:29:32 -04:00
|
|
|
# REQUEST STEP (client-side flow)
|
2013-12-12 02:48:03 -05:00
|
|
|
get '/client-side' do
|
|
|
|
content_type 'text/html'
|
2016-06-26 20:29:32 -04:00
|
|
|
# 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 an access_token with it.
|
|
|
|
<<-HTML
|
2013-12-12 02:48:03 -05:00
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Client-side Flow Example</title>
|
2016-06-26 20:29:32 -04:00
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript"></script>
|
2013-12-12 02:48:03 -05:00
|
|
|
<script type="text/javascript">
|
|
|
|
window.fbAsyncInit = function() {
|
|
|
|
FB.init({
|
2016-06-26 20:29:32 -04:00
|
|
|
appId: '#{ENV['APP_ID']}',
|
2016-06-26 20:39:36 -04:00
|
|
|
version: 'v2.6',
|
2016-06-26 20:29:32 -04:00
|
|
|
cookie: true // IMPORTANT must enable cookies to allow the server to access the session
|
2013-12-12 02:48:03 -05:00
|
|
|
});
|
2016-06-26 20:29:32 -04:00
|
|
|
console.log("fb init");
|
2013-12-12 02:48:03 -05:00
|
|
|
};
|
|
|
|
|
2016-06-26 20:29:32 -04:00
|
|
|
(function(d, s, id){
|
|
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
|
|
|
if (d.getElementById(id)) {return;}
|
|
|
|
js = d.createElement(s); js.id = id;
|
|
|
|
js.src = "//connect.facebook.net/en_US/sdk.js";
|
|
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
|
|
}(document, 'script', 'facebook-jssdk'));
|
2013-12-12 02:48:03 -05:00
|
|
|
</script>
|
2016-06-26 20:29:32 -04:00
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="fb-root"></div>
|
2013-12-12 02:48:03 -05:00
|
|
|
|
|
|
|
<p id="connect">
|
|
|
|
<a href="#">Connect to FB!</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p id="results" />
|
2016-06-26 20:29:32 -04:00
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
$('a').click(function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
FB.login(function(response) {
|
|
|
|
console.log(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));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}); // if you want custom scopes, pass them as an extra, final argument to FB.login
|
|
|
|
});
|
|
|
|
</script>
|
2013-12-12 02:48:03 -05:00
|
|
|
</body>
|
|
|
|
</html>
|
2016-06-26 20:29:32 -04:00
|
|
|
HTML
|
2013-12-12 02:48:03 -05:00
|
|
|
end
|
|
|
|
|
2016-06-26 20:29:32 -04:00
|
|
|
# CALLBACK STEP
|
|
|
|
# - redirected here for server-side flow
|
|
|
|
# - ajax request made here for client-side flow
|
2013-12-12 02:48:03 -05:00
|
|
|
get '/auth/:provider/callback' do
|
|
|
|
content_type 'application/json'
|
|
|
|
MultiJson.encode(request.env)
|
|
|
|
end
|