Question

I am currently developing a SSO website-network.

It has a few websites wich are unfortunately all separate domains like:

• domain.de
• domain-specials.de
• domain-otherthings.de
• somethingelse.de

I have managed to create a SSO using JSONP / Ajax, so when you login to any of the sites you are signed on into the others as well.

Now i need to implement a “login with facebook” feature that works with the current SSO.

The problem here is that a facebook app can only have one root domain to work with so if you try to use the Facebook-App on another website you mostly get security errors.

I tried the Facebook Client-Side Authentication which of course doesn’t work on any other site than the one I created the Facebook-App for:

API Error Code: 191
API Error Description: The specified URL is not owned by the application

I also tried using a channel file in the FB.init which is currently used on all websites:

FB.init({
    appId      : '1234567890', // app id
    channelUrl : 'http://www.domain.de/channel.html', // fqd-path to channel file
    status     : true, // check login status
    cookie     : true, // allow the server to access the session
    xfbml      : true, // parse XFBML
    oauth      : true // ?
});

Now I am currently experimenting with the Server-Side Authentication but I am still unsure if there isn’t a better way to solve this problem since it forces me to redirect to the domain I used in the Facebook-App.
The main problem here being the user flow.

The client flow is quite nice

1. Click login with Facebook
2. Facebook popup
3. Click yes or no
4. Done!

While the server flow is not so fluid

1. Click login with Facebook
2. Redirect to Facebook
3. Click yes or no
4. Redirect to root domain
5. Somehow redirect to originating domain
6. Done!

I have also thought about creating an app for every single site; but that is just stupid.

So, if anyone knows a better solution to this problem or if anything needs more clarification, please let me know.

Regards

Answer 1

In the end I had to create a little workaround. By using a designated landing script for all logins I was able to redirect the users back to the refering page.

This Facebook link redirects to http://mydomain.de/fb_connect/1/

https://www.facebook.com/dialog/oauth?client_id=[your_app_id]&redirect_uri=http%3A%2F%2F[your_domain]`%2Ffb_connect%2F[domain_id]%2F&state=[some_hash]&scope=email

[your_app_id] = Facebook App Id
[your_domain] = http://www.domain.com or whatever your domain is
[domain_id] = I used this to know from where the user came
[some_hash] = used by Facebook to prevent xsrf

Then I had a little PHP-Script prepared to process the incoming data using apaches mod_rewrite

.htaccess in the fb_connect folder on my server

RewriteEngine On
RewriteRule . index.php [L]

And in the index.php I used something like this

<?php

/* App-Id / Secret */
$sAppId     = '1234567890';
$sAppSecret = 'sdafuh347890oqtgfuasd';

/* Domains and IDs */
$aDomains = array(
    'www.domain.de' => 1,
    'www.domain-name.de' => 2,
     ...
);

/* Save a flipped copy */
$aFlip = array_flip($aDomains);

/* Save the request uri */
$sUri = $_SERVER['REQUEST_URI'];

/* Explode the uri; facebook adds everything after the '?' */
$aParts = explode('?', $sUri);

/* Save the first part */
$sUri = $aParts[0];

/* Explode using slash */
$aParts = explode('/', $sUri);

/* This position should be the domain-id */
$iDomainId = $aParts[2];

/* get the domain name */
$sDomain = $aFlip[$iDomainId];

/* If the user authorizes the app this parameter is set */
if (!empty($_GET['code'])) {

    /*
     * The redirect uri is needed as a security parameter and needs to be EXACTLY
     * like in the refereing URI above
     */
    $sRedirectUri = 'http://www.domain.de/fb_connect/' . $iDomainId . '/';

    /* Get the access token url for the user */
    $sTokenUrl = 'https://graph.facebook.com/oauth/access_token?'
       . 'client_id=' . $sAppId
       . '&client_secret=' . $sAppSecret
       . '&redirect_uri=' . urlencode($sRedirectUri)
       . '&code=' . $_GET['code'];

    /* Use CURL because file_get_contents() can't handle the length of the uri */
    $ch = curl_init();

    /* Url */
    curl_setopt($ch, CURLOPT_URL, $sTokenUrl);

    /* Header */
    curl_setopt($ch, CURLOPT_HEADER, 0);

    /* Return the response instead of echoing it */
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    /* Exec the request */
    $sResponse = curl_exec($ch);

    /* close CURL */
    curl_close($ch);

    /* Initialize the Array for the returned data */
    $aParams = array();

    /* From the Facebook tutorial ;D */
    parse_str($sResponse, $aParams);

    /* Build the URI to query the opengraph with a user token */
    $sGraphUrl =
       'https://graph.facebook.com/me?access_token=' . $aParams['access_token'];

    /* get, decode and save the returned values */
    $aUser = (array)json_decode(file_get_contents($sGraphUrl));

    // You should now have the requested userdata and use it to create an account
    // or whatever ;D

    /* Redirect the user to the refering domain */
    header('Location: http://' . $sDomain);
    die;
}

/*
 * If the user doesn't authorize the app, this parameter is set.
 * Do whatever is needed here (logging, crying...) and redirect the user somewhere ;D
 */
if (!empty($_GET['error'])) {
    header('Location: http://' . $sDomain);
    die;
}

/*
 * If the user deletes the app using the control panel in facebook, your script will
 * recieve a ping containging this parameter. This is pretty much the same as if 
 * your app would run inside the facebook canvas.
 */
if (!empty($_POST['signed_request'])) {
    // Decode the signed request using the facebook tutorial methods, and delete
    // the user from your system :D
}

?>

This pretty much does the trick for me. If you have any questions feel free to ask.

Regards