Domů > Facebook > Facebook Connect - připojte se, prosím

Facebook Connect - připojte se, prosím

24.01.2010
Přejít na komentáře Zanechte komentář

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 , ,

  1. Pavel
    09.08.2010 na 18:55 | #1
    Odpověd | Citovat

    Ohledně níže uvedeného citátu z Vašeho článku bych se rád, zeptal, jak tuto část provést. Mám script na testovací seznamku, kde bych rád umožnil přihlášení přes facebook, ale nevím jak mu umožnit tuto funkcionalitu.

    „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.“

  2. Ivan
    14.09.2010 na 16:57 | #2
    Odpověd | Citovat

    Dobrý den,
    děkuji Vám za povedený článek. Díval jsem se na danou aplikaci i na Vašem cockovnik.cz, jen mne prosím překvapilo, že mohou posílat příspěvky i lidé, kteří facebook nemají. To je nějaká Vaše speciální uprava nebo i toto je ve scriptu facebooku nadefinovatelné.

    Děkuji za odpoved,

    Midalic

  3. Jan Šmuk
    15.10.2010 na 08:15 | #3
    Odpověd | Citovat

    @Pavel
    Výsledkem úspěšného přihlášení přes FB Connect je ID přihlášeného FB uživatele. V naší databázi si ke každému uživateli uchováváme toto ID. Pokud náš přihlášený uživatel poprvé použije FB Connect jeho FB ID si zaznamenáme a při dalším přihlášení už víme, kdo to je ;)

  4. Jan Šmuk
    15.10.2010 na 08:17 | #4
    Odpověd | Citovat

    @Ivan
    Nene, toto je vlastnost FB komentářů – umožňují vkládat komentáře i nepřihlášeným uživatelům. Ti ale musí vyplnit jméno a CAPTCHA kód.

  5. Leoš
    16.12.2010 na 12:13 | #5
    Odpověd | Citovat

    Zdravím,
    na čočkovníku používáte komentáře facebooku. Narazil jsem tam na problém, který mám taktéž někde jinde. Nelze tam přidávat příspěvky jako nepřihlášený uživatel. Vždy to skončí hláškou „Na tuto zeď nelze napsat tuto zprávu.“ Zajímavé je, že ve formuláři není zobrazena captcha (u mě také ne – FF/Safari na OSX, na iPad s iOS captcha zobrazena je, nicméně vkládání také nefunguje). Zajímá mě, jestli o té chybě víte, nebo je platformě závislá – tedy v IE a FF na Windows vše funguje korektně? Díky za info.

  6. vtitl
    01.02.2011 na 20:22 | #6
    Odpověd | Citovat

    Dobrý den,

    díky za článek. Přesně jsem zkopíroval kód a v ie i ff mi to jede. Ale v Chrome se to nechce načíst. Přitom na Vašem webu (myslím ten eshop s očními čočkami) to funguje v pořádku. Jde o web: http://www.mojeveci.cz/login2.php

    Díky za rady.

  7. michail
    23.02.2011 na 00:46 | #7
    Odpověd | Citovat

    Zdravím,
    po chvilce hledání jsem našel tenhle návod. Díky za něj!

    Jen přemýšlím nad tím, jak udělat databázi. Je mi jasné, že někam je třeba uložit facebookID. Ale jak řešíte tuto situaci?

    Na webu už je nějaký uživatel registrován – klasicky.
    Pak přijde na web znovu (je odhlášený) a klikne na přihlášení přes FB a vytvoříte dalšího uživatele → vzniknou Vám tak dva stejní uživatelé, ne?

    Moc jsem nepochopil toto z komentáře #4

    „Pokud náš přihlášený uživatel poprvé použije FB Connect jeho FB ID si zaznamenáme a při dalším přihlášení už víme, kdo to je ;)“

    Tzn. máte tedy na webu v případě přihlášeného uživatele bez FB odkaz „spárování účtu s facebookem“ nebo tak nějak?

    Ještě prosím jak je to s těmi komentářemi u produktů na zmíněném webu (kde máte FB integrován), ty se ukládají do databáze Facebooku nebo do Vaší?

    Díky moc za rady..

  8. Jan Šmuk
    23.02.2011 na 08:23 | #8
    Odpověd | Citovat

    Dekuji za otázku. Je to přesně, jak říkáte. Pokud je uživatel klasicky zaregistrován, nabídneme mu spárovat jeho účet se svým FB účtem. Co se komentářů týče, ukládají se na Facebook. Lze ale zavěsit na událost přidání komentáře vlastní logiku, která např. uloží komentář ve vaší databázi.

  9. Vlastimil Vávrů
    23.02.2011 na 09:33 | #9
    Odpověd | Citovat

    @michail Ano je tam proces spárování FB účtu s klasickým účtem. Spárování je buď automatické pomocí emailu nebo pomocí přihlášení uživatele na klasický účet.

  10. michail
    24.02.2011 na 02:52 | #10
    Odpověd | Citovat

    Já děkuji za tak rychlou odpověď, ještě bych prosil o upřesnění. Buď jste omylem vynechali to pro mě důležité nebo jsem se špatně zeptal, zkusím ještě znovu a snad lépe :-)

    Jedná se mi o tuto situaci:

    Budu mít web, kde se budou uživatelé klasicky registrovat a chtěl bych jim také nabídnout FB přihlášení, za pomoci tohoto článku to nebude problém (ještě jednou díky za něj).

    Ale co v případě, že uživatel se již klasicky na webu registroval (bez FB) – tj. máme o něm záznam v db.
    Po pár dnech přijde na web znovu a najednou ho napadne přihlášení přes Facebook (dříve si toho třeba nevšiml/nenapadlo ho/neměl FB). V tuhle chvíli ale nejde žádným způsobem zjistit, jestli už ho v db máme nebo ne, protože FB mi nenabídne jeho e-mail – jen po vyžádání, což musí potvrdit a ne každý může být ochoten to přijmout. Identifikátorem je tedy pouze jeho FB_ID.

    Tzn. že bych po jeho pokusu přihlášení přes FB vytvořil dalšího, ale bohužel již duplicitního, uživatele – byl by v systému dvakrát, což není zrovna žádoucí. A například při takovém e-shopu bych tedy získal dva totožné uživatele. Pak by se třeba mohl divit, kde má všechny ty objednávky, když se přihlásí klasickým způsobem – a on je bude mít svázané s tím účtem, co se vytvořil při přihlašování Facebookem.

    Nebo Vás také napadá jak na to?

    Děkuji

  11. Vlastimil Vávrů
    24.02.2011 na 09:43 | #11
    Odpověd | Citovat

    Po prihlaseni pres FB pozadate uzivatele o povoleni k pristupu k jeho emailu…pokud povoli pristup vezmete jeho email z FB a prohledate svoji databazi…pokud najdete uzivatele nabidnete mu ho a on musi jeste v jednom kroku potvrdit – ano to jsem ja…spojit ucty.

    A nebo nepotvrdi pristup k emailu…nebo tam ucet nema…tak napisete „Mate zde ucet? Prihlaste se“…no a zobrazite mu normalni prihlasovaci formular…tim dojde k propojeni FB uctu s tim stavajicim.

    Uz je to jasnejsi?

  12. michail
    24.02.2011 na 11:34 | #12
    Odpověd | Citovat

    Super, díky, už mi to je jasné…

  13. Monika
    24.02.2011 na 17:56 | #13
    Odpověd | Citovat

    je to skvěle vymyšlené, poučila jsem se z rad výše uvedených a funguji…díky

  14. sifik
    31.07.2011 na 14:17 | #14
    Odpověd | Citovat

    Dobrý den, chtěl bych se zeptat, jak můžu z fb účtu vyzvednout další údaje o uživateli, jako např. mail, jméno a příjmení. Lze to udělat pomocí skriptů, které jsou popsané v článku? Popřípadě, jak? Předem díky za odpověď.

  1. Žádné zpětné odkazy
Musíte být přihlášen k poslání komentáře.