Hey just thought I could share something on this. I bet there will be growing demand for how to integrate facebook due the popularity of fb social worlds. This talk is on TIGHTER integration with facebook(e.g. getting your friends portraits and their score inside your game for instance, not just running your app in iframe on facebook).
In the past the biggest problem for me was to get my head around the CONCEPT of integrating everything rather than the api commands. I'm not a *professional* programmer, even I'm quite smart so it was even harder for me. My solution is at times not even close to being elegant. On the fb forums sometimes people aren't very helpful. Like "use google", yeah thanks for the advice, that's what I've been doing for 2 weeks-not that you shouldn't use it for minor stuff, but this is quite a large concept problem. The snippets that are mentioned on this thread are correct. I don't know if my methods are best, but they work, it's self-taught.
1) Learn smartfox client API first, then some smartfox server side API(namely about customizing login).
2) Be sure to know how to use a database, in my case I'm using mysql which you can configure via smartfox config.xml file. You must get a "mysql connector" first and copy it to one of the smartfox directories - I think it's "jre\lib\ext\". Connector is a mysql API, you need it so that smartfox knows how to talk with mysql.
3) Get facebook PHP api. PHP = server side, remember.
4) Get amfPHP gateway (maybe you don't have to...?anyway I'm using it) - It's just few php files. What it does it it takes "commands" you send from the Flash client and "hands them over" to the php "gateway"(don't worry, gateway is just a fancy name for one php file). Even better, after php gateway does something(interact with facebook for instance) it can return a result BACK TO YOUR FLASH FILE. Maybe you are starting to get the concept now.
5) get "swfobject.js"(google it).
First thing everyone will probably integrate is the "automatic login over facebook". There's also "Facebook Connect" for sort of this stuff, maybe it might suit you better, look at it. Anyway, I did it like this:
When user comes from facebook to your application(which happens everytime if he comes through apps.facebook.com/yourapp), facebook glues certain headers to the php file that carries your flash app. Say your flash game resides in index.php(this is where you pointed your finger during application setup in facebook). So index.php carries stuff like your facebook uid, facebook session key etc.
What you do is, you grab those essential variables inside your index.php and hand them over to your flash file, using this swfobject. So those variables literally "fall through" from facebook through index.php to your flash file. To get this work you need to set your application type to "iframe" on facebook, by the way!
This is the content of my index.php. Warning: It's still work code and it doesn't catch all possible "what might go wrong", so it's not my fault if it doesn't behave 100% right. Anyway, works for me.
Code: Select all
<?php
require_once 'facebook-platform/php/facebook.php';
$appapikey = '#######put in your api key#################';
$appsecret = '#######put in your fb secret#################';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
if (!$facebook->api_client->users_isAppUser()) {
//if not, redirect him to add it
$facebook->redirect($facebook->get_add_url());
}
// here we get the important variables from facebook
$fb_sig_api_key = "\"" . $_GET['fb_sig_api_key'] . "\"";
$fb_sig_session_key = "\"" . $_GET['fb_sig_session_key'] . "\"";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>YourApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html,body {
background-color:#ffffff;
margin:0;
padding:0;
overflow:hidden;
}
/*]]>*/
</style>
<script type="text/javascript" src="http://www.yourdomain.com/swfobject.js"></script>
<script type="text/javascript">
// here we pass the fb variables further down to flash !
var flashvars = {fb_sig_session_key:<?php echo $fb_sig_session_key ?>,
fb_sig_user:<?php echo $user_id ?>};
var params = {menu:"false", quality:"best", allowFullScreen:"false", AllowScriptAccess:"always"};
var attributes = {id:"id"};
swfobject.embedSWF("http://www.yourdomain.com/yourflashfile.swf", "swfContent", "100%", "600", "10.0.0", false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="core">
<div id="swfContent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</div>
</body>
</html>
One more thing, for testing I recommend you to go to dyndns.com and create a "virtual domain". What it means is you can create a domain like "mysupergame.game-host.org" for your home computer. That way,
www.yourdomain.com in the file above can point to your own computer(in case you've got apache server etc. configured) and after you make change in your LOCAL php server file, save, refresh facebook you can instantly see the effects(instead of uploading everything to your real server through ftp first). I've even setup 2 applications on facebook, one for local testing, one "official".
The next step after you grab those variables in Flash...well, basically I'm first connecting to smartfox server as you normally would and in the onConnect I'm checking if there are the facebook variables passed or not:
Code: Select all
public function onSFSConnection(evt:SFSEvent):void {
if (evt.params.success) {
...
trace ("Connection successfull:", evt.params.success);
//** If we are in facebook, get fb friends and then login using fb session
if (_loaderInfo.parameters.hasOwnProperty("fb_sig_session_key")) {
//** Something is passing facebook session to me!
myService = new NetConnection();
myService.client = this;
myService.connect("http://www.yourdomain.com/amfphp/gateway.php");
var responder = new Responder(amfGetData, onFault);
myService.call("MyService.fbLogin", responder, String(_loaderInfo.parameters.fb_sig_user), String(_loaderInfo.parameters.fb_sig_session_key));
} else {
...
}
} else {
....
trace("Can't connect.");
}
}
What I did was simple, if I sniff around the special facebook parameters(in _loaderInfo) I'm using AS3's NetConnection to tell my amfphp gateway: "hey, execute your fbLogin method(I'll get to it in a while), here are 2 parameters to it as well, facebook user id and session key". Obviously you need to import NetConnection first to your AS3 file or it will throw errors.
So now we are getting to the gateway part. The gateway catches whatever function calls and dispatches them to the correct "services". Service is again, a fancy name for php file. In gateway you register the services, you can even test them(read a bit of docs) and then you can send commands to them from Flash. So, the gateway executes command of php file named MyService.php, if it's well defined. And here you finally can play with facebook!
This stage is quite fuzzy even for me, so shortly on how I'm logging in: first I check if the given facebook user is "real"...I still didn't find out how to properly get it! There just isn't a method like returning true, false on good/bad login, or I didn't find it yet. What I found instead is a workaround which I'm still using, but I'm afraid how long it will work yet. It's something regarding notification tables...if someone knows better or can explain to me please let me know:
Code: Select all
function fbLogin($fbUid, $fb_session) {
$newUser = 0;
$facebook = new Facebook("####your app api key#########", "####your app secret ########");
$facebook->set_user($fbUid, $fb_session);
//** This is the "trick" to authenticate user...
$foul=0;
try { $res=$facebook->api_client->fql_query("SELECT recipient_id FROM notification WHERE recipient_id=$fbUid"); }
catch(Exception $e) { $foul=1; }
if ($foul) return "bad auth";
...
}
Just very shortly now since I'm getting tired
Inside this method, if no "faul" is thrown(e.g. I ensure the user is legitimate fb user and he's logged in) I'll write fb_session id in the database in the user row, if the user exists(so I'm doing UPDATE SQL command). If not, I'll create a new user with facebook id and this session(so I'm doing INSERT INTO SQL command).
Then I'll get whatever I need from facebook through their api(calling $facebook->blabla methods), like friends list with portraits, their uids etc. and traverse the database for matches based on your friends uids (are there any facebook friends playing this game?). Then I'm returning those filtered out friends with some other stuff I've got from database attached(like xp points!). AMFphp gets those back to Flash, and in Flash you can later display the portraits, xp points etc.
So now you are connected to smartfox, confirmed being in facebook as well, your session key is saved from amfphp to the database, you even got some facebook friends from amfphp to Flash. The last step is to LOGIN to smartfox. Of course, you'll have to use custom login on smartfox server side because we are operating with a database. I'm calling login from flash after I get the amfphp data(in an event onAmfGetData). I'm logging in with facebook user id instead of nickname and facebook session key instead of password. So it goes like this:
Code: Select all
smartFox.login(smartFox.defaultZone, String(_loaderInfo.parameters.fb_sig_user), String(_loaderInfo.parameters.fb_sig_session_key));
On smartfox it's really easy now, I just look in the database in my custom login method and see if given user and session key match. If they do I'll login the user in smartfox. Ahh..and you can't imagine the joy when I first did it and saw portraits of my facebook friends inside my flash game
After the user exits from smartfox I set his facebook session key to null to be sure.
Wow I'm confused even now when I'm writing this
I wish there was an easier method and someone explains it to me! I've got known tendencies to overcomplicate and overthink so probably there is someone who made a much simpler approach. But this one works too and I couldn't find at least a small "guide" how to integrate smartfox with facebook.
Troubles I recalled now:
Like crayzero mentions, you can encounter a problem with not being able to connect to smartfox(and as you discover even not being able to load external files). This has to do with domains and security of flash...fun is I solved it but now I can't recall how, my brain is too empty now, lol. I hope I or someone else will recall soon. Anyway, one of the symptoms was that your app can't even read smartfox XML config file which might be the cause. A quick workaround I remember was using absolute url, eg. instead of reading config/sfsConfig.xml I was reading
http://www.mydomain.com/config/sfsConfig.xml. If it works after this, that's your problem. With the solution I found later though I could keep all my paths relative.
Tip for optimizing this approach:
What I'm doing is pretty complicated. I suppose smartfox extensions can't talk with facebook api that's why I'm using database as middle man(inserting the session key from php so that later smartfox checks it). Further, to talk to facebook I'm starting at the client, then talking to my distant server with amfphp, which then calls facebook php lib...I'm using smartfox actionScript server-side. Better way would be probably to use Java on server side and talk to facebook libs more directly from your extension, if that is possible. The servlet thing someone here mentions maybe? I saw Java just from a train so I'm not sure about this. I would welcome more info on this from Lapo if possible, because facebook is really popular now and it would be cool to officialy "tutorialize" acessing facebook api somehow from smartfox so we don't have to spend weeks(like me) to learn that by trial and error and by my not too elegant workarounds. Thanks!
I was hoping to save time by using this server. Ah well, maybe when this product is able, i'll purchase.
