Facebook Connect, del 2 – implementera login » API

Facebook Connect, del 2 – implementera login

11 Maj
2009

av Andreas Krohn

Tweet
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>
        
	<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.
Taggar:
facebook facebook connect inloggning logga in xbml
Relaterade inlägg
- 23 Jan
  2012
  API Måndag – Pingalytics, Kundo och Facebook Open Graph Läs mer
- 09 Jan
  2012
  API Måndag – API till din bil, Google Social Data Hub och Facebook Läs mer
- 03 Okt
  2011
  API Måndag – Trafikverket, SJ, Bredbandskollen och E-delegationen Läs mer
- 26 Sep
  2011
  API Måndag – Facebook, Google Hangouts, Eniro, Qubulus Läs mer
Om Andreas Krohn

Driver mashup.se och jobbar på Dopter AB med rådgivning, analys, utveckling och användandet av öppna APIer. Gillar att experimentera med nya teknologier och att bygga egna lösningar. Driver bla Twittoppen och APIHQ. Kontakta mig på @andreaskrohn, andreas@dopter.se eller 0709-780794 om ni vill ha hjälp med ett API eller om ni vill diskutera affärs- och marknadsföringspotentialen med öppna APIer.
- Magnusson
  
  Hej,
  
  vill bara tacka och säga att du har sparat mig grymt mkt tid. Bra inlägg och kanon med exempelkod! Skulle du snabbt förklara vad de olika filerna har för uppgifter? Tex .DS_Store, facebook.php, facebook_desktop.php, jsonwrapper.php mfl. Ser fram emot del 3! När kommer den?
- Magnusson
  
  2 saker som ‘buggar’ lite är (använder FF 3.0.10)
  
  1. När man loggar in så visas inte texten ‘Inloggad användare: X’ med en gång utan man måste trycka på reload för att den ska dyka upp.
  
  2. När man trycker på ‘Logga ut’-knappen så loggas man ut men texten ‘Inloggad användare: X’ syns fortfarande. Försvinner vid reload.
  
  Om det hjälper till så får jag felmeddelandena
  
  ‘this.docShell is null’
  ‘Permission denied to get property Object.loadType’
- http://www.mashup.se Andreas
  
  @Magnusson kul att man kan hjälpa till :)
  
  .DS_Store filen kan du ignorera, det är en OSX fil som råkat hänga med i min .zip fil. Facebook.php, facebook_desktop.php och jasonwrapper.php är alla från Facebooks PHP bibliotek, läs mer om exakt vad de gör i Facebooks egen dokumentation.
  
  Exemplet i mitt inlägg är väldigt enkelt och jag har inte lagt till kod för att garantera reload etc. Enklaste sättet är att använda en callback javascript metod som laddar om innehållet och använda denna från fb:login-button’s “onlogin” (se http://wiki.developers.facebook.com/index.php/Fb:login-button).
  
  Del 3 kommer så snart jag har tid att plita ihop den :)
- Magnusson
  
  Tack för svaret! Det jag ska göra är att förutom den koden du gav här, även koppla på reload, möjlighet för användarna att skriva kommentarer samt att informationen id, namn och bild ska sparas i en databas som då måste spolas 1 gång/dag via en php-fil som körs via ett cronjob. Hur mkt skulle du vilja ha för att fixa det? :) Antar att du kommer åt min mailadress via kommentarsfältet? (om det inte är för dyrt så är det bättre att du som har koll på det gör det än att jag sitter och svettas)
- http://Mashup.se Andreas
  
  Generellt sätt så behöver du inte spara användarnas bilder, namn etc i din databas. Istället så sparar du bara det användarid du får från Facebook i databasen och sedan så använder du Facebooks taggar för att hämta bild och namn etc när du behöver det i din sajt.
- Rolle
  
  Bra artikel, tack! Längtar efter del 3! =)
- http://www.mashup.se Andreas
  
  @rolle del 3 kommer snart…. jag lovar!
- http://www.joakimekberg.se Joakim Ekberg
  
  Om man vill använda Rails så jobbar jag på ett plugin till Authlogic som gör det möjligt att enkelt använda Facebook connect för sin site.
  
  Spana in http://github.com/kalasjocke/authlogic_facebook_connect om ni är intresserade!
- Test
  
  test
- http://www.facebook.com/people/Gabriel-Pereira/557845164 Gabriel Pereira
  
  Verkligen intressant…
- josub
  
  Hej! är guiden fortfarande aktuell?
- http://www.digitalistic.com Andreas Krohn
  
  Jag tror att det mesta i guiden bör funka, men jag har inte uppdaterat mitt inlägg på ett tag så jag kan inte garantera att allt funkar klockrent (sorry).

Senaste inläggen
Mina senaste #apise tweets
- andreaskrohn: Twillio Interview – Developing a Community and API for Developers http://t.co/oFrdutHB #apise 3/2 19:41
- andreaskrohn: Marknadsföring och försäljning med hjälp av APIer, bra sammanfattning av heldag på #Bisnode om APIer av @annika http://t.co/Hbft3RnG #apise 3/2 14:21
Follow @andreaskrohn
Senaste kommentarerna

Powered by Disqus

Facebook Connect, del 2 – implementera login

Om Andreas Krohn

Senaste inläggen

Mina senaste #apise tweets

Senaste kommentarerna

Länkar

Senaste APIer från Opendata

Kategorier

Om mashup.se

Facebook Connect, del 2 – implementera login

Relaterade inlägg

Om Andreas Krohn

Senaste inläggen

Mina senaste #apise tweets

Senaste kommentarerna

Länkar

Senaste APIer från Opendata

Kategorier

Om mashup.se