Facebook Connect, del 2 – implementera login

2009-05-11 av Andreas Krohn

Med Facebook Connect så är det lätt att låta användare på din sajt logga in med sitt Facebook användarnamn (

se mitt tidigare inlägg för mer om Facebooks fördelar och nackdelar). Det krävs att man har en Facebook API nyckel, laddar en javascript fil och några andra smådetaljer. När användaren väl är inloggad så kan man göra en massa andra saker med Facebook APIet, men det låter jag vänta till del 3 i denna serie inlägg om Facebook Connect.

För att använda Facebook Connect för inloggning så följ dessa 5 steg…

Steg 1 – skapa en FB applikation

Det krävs att man har skapare en applikation på Facebook för varje sajt där man vill använda Facebook Connect. Det är gratis att skapa en sådan applikation, men det krävs att man har Facebook Developer application installerad på sitt Facebookkonto. Väl i Facebook Developer applikationen så behöver man skapa en ny applikation, namnge den enligt din sajt. I “anslut” (eller “Connect” om man har FB på engelska) tabben i den nya applikationen så måste du sätta “Länk URL”/”Connect URL” till din sajts URL (om du utvecklar din sajt lokalt så funkar http://localhost/... URLer bra här). Det finns en massa andra inställningar att leka med, men de är inte ett måste just nu.

På första sidan på din nya applikation så hittar du applikationens API-nyckel, det är den du måste använda senare. Den hemliga nyckeln behövs inte för att implementera login via Facebook Connect, bara om du vill använda Facebooks API för mer avancerade saker.

Steg 2 – skapa en Cross Domain Receiver fil

För att Facebook Connects AJAX anrop ska fungera så krävs det att du har en fil med namnet xd_receiver.htm tillgänglig från roten av din webbsajt (alltså på www.dindomän.se/xd_receiver.htm). Denna fil ska innehålla följande kod:

<!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" >
<body>
	<script src="http://static.ak.connect.facebook.com/
         js/api_lib/v0.4/XdCommReceiver.js"
         type="text/javascript"></script>
</body>
</html>

Utan denna fil så kan inte Facebooks javascript på din sajt kommunicera med Facebooks servrar eftersom endast endast anrop till sajtens egna domän är tillåtna. Läs mer här om xd_receiver.htm och cross scripting.

Steg 3 – förbered din webbsajt

Dags att förbereda din sajt för Facebook Connect, det inkluderar att ladda Facebooks utökning av HTML (XFBML) så att du kan använda Facebooks egna taggar direkt i din HTML. Dessutom så måste du ladda en speciell javascriptfil och initiera Facebooks javascript bibliotek med din API-nyckel. Detta är den enklast möjliga sida som kan använda Facebook Connect:

<!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" xmlns:fb=
"http://www.facebook.com/2008/fbml">
<body>
        <script type="text/javascript"
         src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/
         FeatureLoader.js.php">
        </script>
        <!-- Lägg till din egen kod, inkl Facebook taggar, här -->
	<script type="text/javascript"> FB.init("DIN_API_NYCKEL",
         "xd_receiver.htm"); </script>
</body>
</html>

Steg 4 – lägg till en loginknapp

Äntligen så kan du nu lägga till en Facebook Connect loginknapp! För att göra detta så använd XFBML taggen login-button i din HTML (ovanför FB.init script taggen):

<fb:login-button></fb:login-button>

Om allt är rätt uppsatt så genererar denna tag en loginknapp som ser ut så här:

Det finns fler varianter på inloggningsknappen, se Facebook Connect Login Buttons för några exempel. Det går också att ange en javascript callback funktion som kallas när användaren har loggat in, se Facebooks dokumenation för vad mer man kan göra med loginknappen.

Om du redan är inloggad på Facebook och klickar på din nya loginknapp så frågar Facebook Connect dig om du vill ansluta dig till din sajt. Godkänner du detta så är du också inloggad på din egen sajt via Facebook Connect. Vid framtida besök så måste du bara ange email och lösenord om du inte redan är inloggad på Facebook.

Eftersom alla Facebook Connect sajter är Facebook applikationer så kan du se alla de Facebook Connect sajter som du har använt listade som godkända applikationer inom Facebook.

Steg 5 – hantera användarna

När en användare väl är inloggad så kan man via XFBML skriva ut användarens namn eller visa användarens avatar. För att ta reda på om en användare är inloggad eller inte samt vem användaren är så krävs att man använder Facebooks API, det gör man enklast via Facebooks Javascript bibliotek (redan laddat via scriptet FeatureLoader.js från steg 3 ovan), Facebooks PHP bibliotek eller bibliotek i något annat programmeringsspråk – tex Ruby on Rails, Python eller Java.

Med PHP biblioteket så kan man få fram fbuid (alltså varje Facebook användares unika idnummer) på den inloggade användaren och sedan skriva ut namnet på användaren med följande kod:

<?php
	$api_key = XXXX;
	$secret_key = YYYY;
	$facebook = new Facebook($api_key, $secret_key);
	$fbuid = $facebook->get_loggedin_user();
	if ($fbuid){ ?>
		<fb:name uid="<?=$fbuid?>" />
<?php } ?>

För att kunna hålla reda på vilka Facebook användare som använder din sajt, och koppla dessa användare till annan data, så bör man givetvis lagra fbuid i sin databas. Enligt Facebooks API policy så får man dock inte lagra data om sina användare, tex namn och ålder, i mer än 24 timmar. Istället ska man hämta det från Facebook varje gång. Förutom Facebooks vanliga API policy så finns det lite extra saker att tänka på när man använder Facebook Connect, tex att man måste ha en logout knapp alltid synlig. Inget av detta är inte tekniskt svårt, men det är något man måste tänka på när man designar sin applikation.

Filer

Här är alla filer som behövs för att implementera Facebook Connect login med PHP. Detta inkluderar Facebooks PHP bibliotek, cross-domain scripting filen xd_receiver.htm och en enkel index.php fil som låter en användare logga in och sedan skriver ut användarens namn. Det enda du behöver att göra för att få allt att fungera är att skapa en Facebook applikation och ange din API nyckelt och hemliga nyckel i index.php.

Nu är det bara att sätta igång med att integrera din sajt med Facebook!

Mer information

Det finns mycket mer information om Facebook Connect, bla:

Snart kommer också en tredje del på denna Facebook Connect följetång, där vi tittar i lite mer detalj på några av de mest funktionsrika XFBML taggarna, bla hur man hanterar kommentarer via Facebook Connect.