X
X

Login

Login if you already have an account

LOGIN

Register

Create a new account. join us!

REGISTER

Support

Need some help? Check out our forum.

FORUM

FYI – FatFractal improves authentication support with full OAuth 1.0 and OAuth 2.0 support


User authentication is an ages old problem for developers that has greatly improved recently thanks to the emergence of trusted providers such as Twitter and Facebook.

FatFractal has provided integrated authentication with Facebook and Twitter on the client-side for some time. We have just released a major upgrade to our backend support for full OAuth 2.0 as well as OAuth 1.0 using the Scribe library.

Implementing single-sign-on using a trusted provider like Facebook or Twitter makes a lot of sense. Now, implementing this has gotten a lot easier. The basic steps to using either as an authentication provider with FatFractal are:

  1. Register your application with the provider
  2. Add the keys from one or both to the Auth.js file that is created during application scaffolding
  3. Implement the auth life-cycle in your application

Full documentation for the FatFractal ScriptAuth process is found here

You can see working code for everything below (here).

First, you need to add the application keys for Twitter and/ or Facebook into the Auth.js file that is automatically created for you when you scaffold your application with FatFractal. The Auth.js code looks like this:

auth.setScribeApiClassName(TWITTER, "org.scribe.builder.api.TwitterApi");
auth.setScribeApiKey(TWITTER, "twitter_api_key");
auth.setScribeApiSecret(TWITTER, "twitter_api_secret");

auth.setScribeApiClassName(FACEBOOK, "org.scribe.builder.api.FacebookApi");
auth.setScribeApiKey(FACEBOOK, "facebook_app_id");
auth.setScribeApiSecret(FACEBOOK, "facebook_app_secret");

You need to replace the ApiKey and ApiSecret values with the corresponding values for Facebook and/ or Twitter. Then, the basic components needed for the sample app above are (in HTML/Javascript) are quite straightforward:

  1. Create a login for Facebook function
  2. Create a login for Twitter function
  3. Create a page that will handle process the callback from the provider and redirect back the application page with the user logged in

Next, we set up the callback URI that both will use (you could also create separate pages fors handling Facebook or Twitter if you prefer).

var callbackUri = ff.getBaseUrl() + "authorize.html";
sessionStorage.setItem("ff-callback-uri", callbackUri);
ff.setCallbackUriForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_FACEBOOK, callbackUri);
ff.setCallbackUriForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_TWITTER, callbackUri);
Note that we are saving the callback in sessionStorage as we will want to use that later from the authentication page.

Here is the code for launching the Facebook login process:

// Facebook login
function facebookLogin() {
ff.authUriForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_FACEBOOK,
function(authUri) {
sessionStorage.setItem("ff-auth-provider", "FACEBOOK");
window.location = authUri;
}, function(code, msg) {
console.error("facebookLogin() Error: " + code + " " + msg);
});
}

And, here is the code for launching the Twitter login process:

// Twitter login
function facebookLogin() {
ff.authUriForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_FACEBOOK, function(authUri) {
sessionStorage.setItem("ff-auth-provider", "FACEBOOK");
window.location = authUri;
}, function(code, msg) {
console.error("facebookLogin() Error: " + code + " " + msg);
});
}
Note that we are also saving the authentication provider in sessionStorage as well in order to have a single page to handle the response.

var callbackUri = sessionStorage.getItem("ff-callback-uri");
var provider = sessionStorage.getItem("ff-auth-provider");
var ff = new FatFractal();
if(provider == "FACEBOOK") {
ff.setCallbackUriForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_FACEBOOK, callbackUri);
ff.retrieveAccessTokenForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_FACEBOOK, location.href, function() {
ff.loginWithScriptAuthService(ff.SCRIPT_AUTH_SERVICE_FACEBOOK, function(user) {
var msg = "Success! Logged in as " + user.guid;
var el = document.getElementById('status');
el.innerHTML = "<br><div class = 'well'>Logged in with Facebook - message: " + msg + "</div>";
window.location = "index.html";
});
});
} else if(provider == "TWITTER") {
var requestToken = JSON.parse(sessionStorage.getItem("ff-tw-request-token"));
sessionStorage.removeItem("ff-tw-request-token");
ff.setCallbackUriForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_TWITTER, callbackUri);
ff.setRequestTokenForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_TWITTER, requestToken);
ff.retrieveAccessTokenForScriptAuthService(ff.SCRIPT_AUTH_SERVICE_TWITTER,
location.href, function() {
ff.loginWithScriptAuthService(ff.SCRIPT_AUTH_SERVICE_TWITTER, function(user) {
var msg = "Success! Logged in as " + user.guid;
var el = document.getElementById('status');
el.innerHTML = "<br><div class = 'well'>Logged in with Twitter - message: " + msg + "</div>";
window.location = "index.html";
});
});
} else console.error("Could not determine the OAuth provider");
When the callback is received, this page will complete the authentication process, create the logged in user and session and redirect back the original page logged in.

That’s it,

Kevin

Contact