Přejít k navigační liště

Zdroják » PHP » Aplikace pro Facebook od základů – díl I.

Aplikace pro Facebook od základů – díl I.

V tomto seriálu si představíme celý ekosystém vývoje aplikací pro Facebook. V prvním díle se budeme věnovat převážně teorii – vysvětlíme co Facebook aplikace vůbec je a představíme dostupné prostředky pro její vývoj. Nakoukneme do praxe a vytvoříme společně vaši první „hello world“ aplikaci.

V dalších dílech popíšeme autorizaci uživatele v aplikaci a rozebereme si nejčastější problémy při vývoji. Nezapomeneme se zmínit o existujících nástrojích pro ladění a testování. Na základě připomínek vás, čtenářů, pak budeme volit témata dalších dílů. Nuže, pusťme se do práce.

Co je Facebook aplikace?

Aplikace na Facebooku není nic jiného, než webová stránka, která prostřednictvím API komunikuje s Facebookem a integruje nebo rozšiřuje jeho funkce. V současné době se můžeme setkat s několika druhy Facebook aplikací:

  • Aplikace běžící v prostředí Facebooku (aplikace je poté dostupná na apps.facebook.com)
  • Aplikace běžící v rámci Facebook stránky (aplikace v záložce)
  • Webové stránky propojené s Facebookem
  • Mobilní aplikace

V našem seriálu se budeme věnovat prvním třem zmiňovaným, mobilní aplikace tedy ponecháme stranou. Později zjistíme, že můžeme napsat aplikaci, která zároveň poběží v prostředí Facebooku, na FB stránce a bude fungovat i jako samostatná webová služba. V současnosti jsou webové stránky (aplikace) do Facebooku integrovány pomocí IFRAMu. To reálně znamená, že veškerý kód, obrázky, databáze apod. jsou u vás na serveru. Pro úplnost je vhodné dodat, že v minulosti Facebook podporoval ještě alternativní metodu, nejčastěji nazývanou FBML Canvas, která dnes již není podporovaná. V minulosti byla jako FBML Canvas označována alternativní metoda zobrazení aplikace k IFRAME. Dnes je jako Canvas (bez FBML) označováno „kreslící plátno“ aplikace zobrazené pomocí IFRAMu. 

Dostupné API a knihovny

Pro obousměrnou komunikaci s Facebookem (např. získání seznamu přátel anebo odeslání streamu na zeď uživatele) se v současné době využívá Graph API. Funguje tak, že navštívíte (např. pomocí PHP funkce file_get_conten­ts()) URL, která vrátí požadovaná data ve formátu JSON. Samotná komunikace s Graph API je tedy nezávislá na použité technologii.

Graph API doplňuje FQL (Facebook Query Language), který umožňuje dotazovat se na data, poskytovaná Graph API, „SQL-like“ syntaxí. FQL ovšem není jen alternativou, umožňuje lepší a v pozitivním smyslu složitější selekci poskytovaných dat (už jen klauzule WHERE je něco, co v Graph API těžko nasimulujete).

Facebook vám samozřejmě nevydá všechna svá data jen tak a pro získání neveřejných dat a pro další úkony jako např. posílání tzv. wallpostů potřebujete svoji aplikaci u uživatele autorizovat, případně si od něj vyžádat speciální práva (v dokumentaci naleznete pod Extended_permis­sions). Autorizační proces je poměrně komplikovaný, problémový a ze strany Facebooku neexistuje jasně narýsovaná a zdokumentovaná cesta. Věnovat se mu tedy budeme podrobně v některém z dalších dílů. V současné době nám stačí vědět, že úspěšnou autorizací získáme tzv. access_token, řetězec, který připojíme k dotazům na Graph API, pokud chceme získat data veřejně nedostupná.

Nadstavbou nad API jsou Software development Kits (SDK) poskytované oficiálně Facebookem, které nám usnadňují zmiňovanou autorizaci a práci s API, jejich použití ale není nutné. V současné době Facebook oficiálně poskytuje SDK pro JavaScript, PHP, iOS a Android. První dva budeme hojně používat později v seriálu v našich příkladech. Na internetu však lze dohledat SDK i pro další jazyky (např. pro Python). S hledáním doporučujeme začít na https://github­.com/facebook/.

Hello world aplikace na Facebooku

Registrace aplikace na Facebooku

Nyní máme základní představu o tom, jak Facebook aplikace fungují a jaké nástroje pro jejich vytváření potřebujeme. Pojďme si nyní vytvořit na Facebooku vývojářský účet a zaregistrovat první Facebook aplikaci, bez toho se do samotného vývoje těžko pustíme.

Navštivte https://facebo­ok.com/develo­pers.

Pokud spustíte Facebook Developer aplikaci prvně, budete vyzváni k ověření svého účtu pomocí mobilního telefonu. Po aktivaci přejděte na https://develo­pers.facebook­.com/apps a zvolte „Vytvořit novou aplikaci“ (viz obrázek).

Vyplňte libovolný název a jazykovou variantu aplikace. Zvolený jazyk bude poté automaticky použit pro veškeré dialogy, chybové hlášky apod.

Nyní byste měli vidět všechny rozšířené volby v aplikaci. Mnohé teď přeskočíme a až bude potřeba cokoliv změnit, vrátíme se na tuto obrazovku později. Pro základní funkcionalitu aplikace je potřeba vyplnit App Namespace (aplikace bude dostupná na http://apps.fa­cebook.com/app-namespace) a po rozkliknutí „App on Facebook“ také Canvas URL. Canvas URL je adresa aplikace na vašem serveru (může být i localhost), v našem případě tedy vyplníme http://localhos­t/zdrojak-hello-world.

Nyní přejděte v levém menu na sekci „Advanced“. V App Type by měla být ve výchozím stavu aktivovaná volba Web, doporučujeme také aktivovat Sandbox mode – aplikace bude poté dostupná pouze pro vývojáře, které zvolíte.

Sekci Migrations ponechte vyplněnou od Facebooku.

Poslední za zmínku stojí sekce Canvas settings – Zde doporučujeme ponechat výchozí hodnoty, tzn. šířku aplikace 760px (pozor, aplikace běžící v záložce má pouze 520px) a výšku automaticky podle výšky obsahu, tedy „Fluid“.

Hello world a napojení aplikace na PHP knihovnu

Pokud nyní do prohlížeče zadáte adresu http://apps.fa­cebook.com/app-namespace zobrazí se obsah vaší Canvas URL. V příslušném adresáři na svém serveru vytvořte index.php s jednoduchým „echo“ pro ověření, že vše funguje, jak má.

Nyní z Githubu stáhněte tři soubory Facebook knihovny. Jedná se o:

  • base_facebook.php, facebook.php – soubory knihovny
  • fb_ca_chain_bun­dle.crt – certifikát pro podepisování požadavků API

Není pořádné Facebook aplikace bez alespoň jednoduché komunikace s Facebookem. Upravme index.php do následující podoby (vysvětlení přímo v kódu):

<?php
// Údaje z https://www.facebook.com/developers/
define('APP_ID', 'xxx');
define('API_KEY', 'xxx');
define('APP_SECRET', 'xxx');
define('CANVAS_PAGE', 'http://apps.facebook.com/app-namespace/');
define('CANVAS_URL', 'http://localhost/zdrojak-hello-world/');

// Facebook knihovna z Github.com
require_once 'libs/facebook.php';

// Vytvoříme instanci Facebook knihovny
$facebook = new Facebook( array('appId' => APP_ID, 'secret' => APP_SECRET, ));

// Získáme ID přihlášeného uživatele
$user = $facebook->getUser();

// Je uživatel přihlášený na Facebooku? resp. máme session?
if(isset($user)) {
    try {
        // Zkusíme získat jeho profilová data (na uživatelova data nepotřebujeme extended_permission)
        $user_profile = $facebook->api('/me');
    } catch (FacebookApiException $e) {
        // Vypíšeme text Exception
        echo "<strong>" . $e->getMessage() . "</strong>";
        $user = NULL;
    }
}

// Uživatel se odhlásil, odstranil aplikaci...
if(!is_null($user)) {
    // Získáme logout url
    $logoutUrl = $facebook->getLogoutUrl();
} else {
    // Získáme přihlašovací url
    $loginUrl = $facebook->getLoginUrl();
}
?>

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Zdroják.cz - Hello world aplikace</title>
</head>

<body>
  <p>
    Ahoj
    <strong><?php if(!is_null($user)) echo $user_profile["name"]; ?></strong>, jak je? :-)
  </p>

  <h2>Přihlásit / odhlásit?</h2>
  <p>
    <?php if ($user): ?>
    <a href="<?php echo $logoutUrl;?>">Odhlásit se z Facebooku!</a>
    <?php else:?>
    <a href="<?php echo $loginUrl;?>">Přihlásit se na Facebook!</a>
    <?php endif?>
  </p>
</body>
</html>

Zdrojový kód ke stažení z Pastebin

Závěr

Gratulujeme k vaší první aplikaci na Facebooku. Dnes jsme vytvořili nejjednodušší možnou variantu kódu s jednoduchým ověřením, zda je či není uživatel přihlášený na Facebooku. Další články věnující se specifickým problémům při vývoji Facebook aplikací naleznete na našem webu aplikace-facebook.cz. Dotazy a problémy netýkající se přímo tohoto článku pak můžeme řešit na přidruženém fóru.

V dalších dílech se podíváme podrobněji na práci s Graph API a na autorizaci aplikace.

Komentáře

Subscribe
Upozornit na
guest
26 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
dc

Zaujimavy clanok ale priznam sa mna skor trapi otazka bezpecnosti. Ja, ako uzivatel, apriory mam dost negativny postoj k roznym aplikacima na FB prave preto ze bezia na strane tvorcu app (cez spominany iframe). Nejak hlbsie som zatial nestudoval spominane API ani sposob komunikacie medzi FB a tvorcami aplikacie (mam na mysli skor tu ludsku nez aplikacnu/stro­jovu). Je mozne ze aplikacia cez API zneuzije moje data v mojom profile (myslene do akej miery dokazem ja ako uzivatel obmedzit pristup aplikacie k mojim datam) ? A tiez by ma zaujimalo ci FB ma nejaky schvalovaci proces alebo proste kto si co vytvori tak to je hned na app.FB ?

Radek Hulán

FB aplikace se nijak neověřuje (Facebookem), vývojář během pár sekund zaregistruje novou app a ta hned funguje.

Nicméně app může číst či měnit jen to, o co si požádá a co jí uživatel *schválí*. Když je to app, co slouží jen k přihlášení a kromě základních (veřejných) údajů si žádá třeba jen email navíc, je to košer, ale pokud chce i zapisovat na zeď a číst statusy, což zjevně nepotřebuje, buď je to pomatený vývojář co někde zkopíroval zbytečně moc permissions do skriptu, anebo vyčůraný vývojář. Ani jedno není dobré…

Ale to je problém všude a na všech OS – viděl jsem aplikace na Androidu, které zobrazují hodiny na homepage (a nic jiného) a žádají si přístup k internetu, SMS, emailům, kontaktům, jejich změně, atd.

To není problém FB, ale „vývojářů“.

Čelo

Jak to vypadá s tím povinným zavedením HTTPS pro aplikace? Zahlédl jsem něco o prvním říjnu. Změnilo se něco?

Čelo

Dík za odpověď. Nechám se překvapit, jak to dopadne.

Láďa

Bude to povinné pro všechny aplikace. Tzv. migrations Facebook vždy závádí globálně bez výjimek.
Otázka ja jak to bude se stále funkčními FBML aplikacemi, kde SSL z principu nedává žádný smysl.

Petr

Může mi někdo vysvětlit, proč je v ukázkovém skriptu potřeba definovat API_KEY, CANVAS_PAGE a CANVAS_URL? Skript ani knihovny nic z toho nepoužívají … Díky.

Václav Dohnal

CANVAS PAGE a URL využijeme v dalších dílech pro přesměrovávání uživatele po autorizaci aplikace. API_KEY máme v ukázce pravda nadbytečně, v současné době již není potřeba.

Vorel

Ahoj,
zkusil jsem si udělat tento příklad.

Jedu proti localhostu. Když tu moji aplikaci nemám autentikovanou, získám si url přes facebook->getLoginUrl().Ta je v takovémto tvaru (https://www.facebook.com/dialog/oauth?client_id=…). Když na to v iframe kliknu, tak mě to přesměruje nejdříve na nějakou stránku, kde je banner facebooku s linkem (https://www.facebook.com/dialog/permissions.request?app_id=…). Na ten když kliknu, dostanu se do formulářem s potvrzením aplikace.

Pokud to zkusím přímo na localhostu, tak se mi ta mezistránka nezobrazuje. V obou případech sem po celou dobu přihlášený na facebooku.

Jak se mám té mezistránky přes iframe zbavit?

Díky moc.

Sin

jak často budou vycházet další díli? měl bych chut si prečíst další ale žádný není :(

Václav Dohnal

Poslední týden v září bychom měli mít dokončený druhý díl :-)

Jan Prachař

Mám vlastní zkušenost, že po každé když dělám aplikaci pro Facebook, tak je něco jinak. Začalo to tím, že zavedli Graph API, několikrát se výrazně změnilo webové rozhraní pro nastavení aplikace, zavedli OAuth, zrušili FMBL Canvas. Zkrátka spíš než spoléhat se na návody je nejjistější jít přímo na http://developers.facebook.com/ .

Václav Dohnal

Bohužel tvrdá realita… největší fail je, že se pak v komerční sféře nedá nic garantovat. Doufám, že se teď dění okolo FB API na chvíli uklidní. Migrace na OAuth2 už je u konce a nové JS SDK už běží víceméně stabilně.

rada

ahoj, aplikaci vytvorenou mam, jak ale ji mam pridat na stranku na facebooku s odkazem pres listu?

Václav Dohnal

Ahoj, možná nerozumím dobře dotazu, ale předpokládám, že chceš přidat FB APP do záložky na FB PAGE?

1) Jdi na profilovou stránku aplikace (http://www.facebook.com/apps/application.php?id=TVOJE_APP_ID)
2) Vpravo dole u možností klikni na „Přidat na mou stránku“
3) Na stránku se přidá nová záložka s aplikací

Václav Dohnal
Richard

Ahoj, díky za článek, moc pomohl.

Jde nějak jednoduše ošetřit, aby se aplikace dala spouštět pouze přímo v IFRAME?
Potřeboval bych totiž zobrazovat vygenerovaný obsah jenom v panelu stránky, pro kterou je aplikace přidaná, a znemožnit zobrazení přímo z URL, kde aplikace běží.

Václav Dohnal

Pokud nezískáš signed_request, znamená to, že aplikace není spuštěná na FB –> redirect.

sem7ex

Ahoj, začali jsme dělat vlastní aplikaci podle tohoto návodu, ale máme problém s tím, že se nám v pravo v aktivitách v té „bublině“ zobrazuje pořád „zdroják – hello world aplikace“ viz. http://cl.ly/060r0g3w020X3w2F3H0Y zkoušeli jsme přepsat úplně všechno i založit nový soubor, kde myslíte, že je problém?

sem7ex

Prošel sem to úplně všecko.. jedině blbne opengraph.. ale když ho celej smažu a nastavim znova tak se to ukazuje stejně..

Terrax

No,jsem sice začátečník co se týče FB APPS ale nevím si rady.
Aplikace na serveru se nepřihlásí ani neodhlásí,rsp.Neaktualizuje stav.
Pořád zobrazuje stav uživatele i když jej fb dávno odhlásil!
Na adrese https://apps.facebook.com/app-namespace/sandbox_apps hází chybu ve smyslu:
Je nám líto. Aplikace, kterou jste právě použili, je špatně nastavena. Zkuste to prosím později.

Nevím kde je chyba.Poradíte prosím? děkuji.

poznámka.Způsob integrace jsem vybral přihlášení pomocí FB

ftime

Dobrý den, chci se zeptat na příhlášení. Kde seberu APP_ID je mi jasný a stejně tak APP_SECRET, ale nikde se mi nedaří najít API_KEY. Piše mi to: An active access token must be used to query information about the current user.

Prosím, poradíte co dělám špatně a případně kde mohu doplňující dílek najít? Děkuji

Václav Dohnal

API_KEY se přejmenoval na APP_ID, princip přihlašování ale zůstává pořád stejný. Rád pomůžu s tou chybou, ale je potřeba dodat více informací (jestli se přihlašuješ pomocí JS nebo PHP a zda máš FB aplikaci nebo web s FB Connectem) plus ideálně kód.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.