Archív

Příspěvek oštítkován ‘Přidat nový štítek’

Facebook Connect - připojte se, prosím

Podle statistik již téměř 2 miliony čechů má svůj účet na Facebooku. Je tedy logické, že se na Facebook soustředí pozornost více a více společností, které se snaží tohoto ohromného počtu uživatelů využít. Díky skvělému programovému rozhraní lze Facebook integrovat s firemními weby nebo e-shopy. Integrace s Facebookem vám umožní např. zobrazovat obsah Facebooku na vašich stránkách nebo naopak, publikovat na Facebooku váš obsah a přilákat tím vaše potenciální zákazníky. V ItPlace jsme integrovali e-shop www.cockovnik.cz s Facebookem a rádi se o své zkušenosti podělíme.

V tomto článku si ukážeme, jak umožnit vašim uživatelům přihlásit se do vaší webové aplikace pomocí Facebook Connect.

Cílem je vytvořit stránku na web serveru běžícím na vašem počítači, která bude obsahovat tlačítko pro přihlášení pomocí Facebooku. Po stisknutí tlačítka budete požádáni o přihlášení na Facebook (pokud zrovna nejste přihlášení) a po úspěšném přihlášení na stránce zobrazíme, kdo je přihlášen.

Vytvoření Facebook aplikace

Aby mohly vaše stránky komunikovat s Facebookem, musíte nejprve na stránkách Facebooku vytvořit Facebook aplikaci. K tomu si musíte do svého účtu nainstalovat aplikaci Vývojář, která slouží k administraci vašich Facebook aplikací.

Aplikaci vývojář nainstalujete klepnutím na tento odkaz: http://www.facebook.com/developers. Po přihlášení budete požádáni o povolení přístupu aplikace Vývojář k vašemu účtu. Klikněte na tlačítko „Povolit“.

Aplikace Vývojář vypadá takto:

Aplikace Vývojář

Aplikace Vývojář

Stránka obsahuje mimo jiné seznam vašich Facebook aplikací a tlačítko pro vytvoření nové aplikace. Nyní klikněte na „Vytvoření nové aplikace“.

Nová aplikace

Nová aplikace

Stačí zvolit vhodné jméno pro aplikaci, souhlasit s podmínkami a stisknout „Vytvoření aplikace“. Pokud vše proběhlo správně, jste nyní v administraci vaší Facebook aplikace. Zkopírujte si API klíč a API secret, pomocí těchto údajů se budou všechna volání Facebook API z vašich stránek identifikovat.

Příprava testovací stránky

Facebook API je založené na REST webových službách, nezáleží tedy na platformě ani použitém programovacím jazyce. Vytvoření dotazu na Facebook API a zpracování výsledku volání lze dělat manuálně, ale vývojáři Facebooku poskytují také velmi šikovné knihovny v několika jazycích. V tomto článku použijeme jazyk PHP a příslušnou knihovnu.

Zde: http://svn.facebook.com/…tform.tar.gz si stáhněte knihovnu pro práci s Facebook API v PHP. Z archívu rozbalte adresář php do adresáře <APPROOT>/facebook-client, kde <APPROOT> je kořenový adresář vaší testovací web aplikace.

V našem testu budeme používat Facebook javascript knihovnu, která komunikuje s Facebookem formou AJAX volání. Internetové prohlížeče zakazují komunikaci mezi různými doménami. Naštěstí existuje způsob, jak tento zákaz obejít. Vytvořte soubor <APPROOT>/xd_re­ceiver.htm s následujícím obsahem:

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

Facebook aplikace musí vědět, kde jsou vaše stránky umístěny. Toto nastavení najdete v administraci Facebook aplikace v záložce Připojit. Do políčka Connect URL vepište kořenovou adresu vašich stránek. Například:

Umístění stránek

Umístění stránek

V tomto případě je tedy soubor xd_receiver.htm přístupný na adrese: http//localhost/fb-test/xd_recei­ver.htm.

Vytvořte soubor <APPROOT>/login.php s následujícím obsahem:

<?php
$apiKey = .... vaše API key;
$apiSecret = .... vaše API secret;
?>
<!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" >
<head>
  <title>Login</title>
</head>
<body>
<script
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/cs_CZ" type="text/javascript"></script>
<script>
        function facebookUserLoggedIn() {
                alert('OK!');
        }
</script>

<p>
  <a href="#" onclick="FB.Connect.requireSession(facebookUserLoggedIn); return false;" >
     <img id="fb_login_image" src="http://wiki.developers.facebook.com/images/f/f5/Connect_white_large_long.gif" />
  </a>
</p>

<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function() {
        FB.Facebook.init("<?=$apiKey?>", "xd_receiver.htm");
});
</script>
</body>
</html>

V tomto kódu jsou tyto důležité části:

  1. konfigurace apiKey a apiSecret,
  2. načtení javascriptové knihovny,
  3. call-back funkce facebookUserLog­gedIn(), která se automaticky zavolá po úspěšném přihlášení na Facebook.
  4. Tlačítko pro přihlášení pomocí Facebooku. Všimněte si parametru volání funkce FB.Connect.re­quireSession(fa­cebookUserLog­gedIn). Ano, facebookUserLog­gedIn je reference na call-back funkci.
  5. Inicializace javascriptového Facebook klienta.

Struktura vaší aplikace je tedy:

<APPROOT>
   |- facebook-client
   |    |- json-wrapper
   |    |    |- .....
   |    |- facebook.php
   |    |- facebook_mobile.php
   |    |- facebookapi_php5_restlib.php
   |- xd_receiver.htm
   |- login.php

Nyní jsme připraveni na první test! V prohlížeči zadejte adresu: http://localhost/…st/login.php. Zobrazí se prázdná stránka s tradičním modrým tlačítkem „Facebook Connect“. Po stisknutí tlačítka se otevře pop-up okno s výzvou pro přihlášení do Facebooku. Po úspěšném přihlášení se zobrazí javascriptová hláška „OK!“.

Kdo tam?

Funguje to, ale jak zjistit, kdo se to vlastně přihlásil? K tomu nám poslouží PHP knihovna pro práci s Facebookem. Upravte soubor <APPROOT>/login.php tímto způsobem:

<?php
$apiKey = .... vaše API key;
$apiSecret = .... vaše API secret;

include_once "facebook_client/facebook.php";

$fb = new Facebook($apiKey, $apiSecret);
$fbUserId = $fb->user;

if($fbUserId != null) {
  echo "prihlaseny uzivatel: $fbUserId<br/>";
}
?>
...

Pokud není přihlášen žádný Facebook uživatel, má proměnná $fbUserId hodnotu null. Pokud je někdo přihlášen, je v proměnné $fbUserId identifikátor Facebook uživatele.

Toto ID lze použít pro spárování uživatele ve vaší databázi s Facebook uživatelem. Po přihlášení pomocí Facebook Connect se podíváme, zda v naší databázi existuje uživatel s tímto Facebook ID. Pokud ano, pak uživatele přihlásíme. Pokud ne, uživatele zaregistrujeme a přihlásíme.

Je také snadné změnit chování stránky login.php pro případ, že je uživatel již přihlášen. Například už nemusíme zobrazovat tlačítko pro přihlášení.

Ještě upravíme call-back funkci tak, aby se stránka automaticky po přihlášení aktualizovala:

...
<script>
        function facebookUserLoggedIn() {
                window.location='/fb-test/login.php';
        }
</script>
...

Závěr

Ukázali jsme si na jednoduchém příkladě, začít integrovat váš web s Facebookem a použít Facebook pro přihlašování uživatelů. O dalších možnostech Facebook API, jako jsou

  • zjištění informací o uživatelích,
  • poslání příspěvků na zeď uživatele,
  • vytvoření fotoalba a vložení fotografie a
  • použití komentářů,

se budete moci dočíst v dalších článcích na našem blogu.

Odkazy

Jan Šmuk Facebook , ,