post_ico4

Integracja serwisu z Facebookiem

Ostatnio musiałem zintegrować budowany przeze mnie serwis z Facebookiem (logowanie, komentarze itp.). No i na „dzień dobry” niemiłe zaskoczenie – taki gigant jak Facebook nie ma jasnej i przejrzystej dokumentacji. Owszem są opisy metod w bibliotece i nawet przykłady aplikacji, ale opisu krok po kroku nie znalazłem…

Aktualizacja (08.02.2016): napisałem nowy wpis dostosowany do najnowszej wersji API. Zachęcam do lektury http://lukasz-socha.pl/php/integracja-serwisu-z-facebookiem-po-raz-kolejny/

Aktualizacja (09.09.2015): Facebook co jakiś czas wprowadza zmiany w API. W tym komentarzu Łukasz pokazuje jak pobrać adres email z aktualną wersją biblioteki.

Aktualizacja (12.05.2014): Zaktualizowałem wpis, tak by był aktualny z najnowszą wersją platformy Facebook Developers.

W polskiej sieci też niewiele informacji (jak coś już znalazłem było przestarzałe). Musiałem wesprzeć się anglojęzycznymi forami. W związku z tym postanowiłem opisać integrację serwisu z FB krok po kroku w prosty i przejrzysty sposób (tak wiem, wstęp na to nie wskazuje ;)).

No to zaczynamy

Na wstępie musimy utworzyć naszą aplikację na Facebooku. Żeby to zrobić nasze konto musi być zweryfikowane. Jak już potwierdzimy, ze my to naprawdę my ;) przechodzimy na stronę deweloperską i klikamy Create new App. Wyskoczy nam standardowe okienko, gdzie podajemy nazwę naszej aplikacji. Następnie przechodzimy do bardziej szczegółowej edycji.

facebook-developers

Identyfikator aplikacji oraz App Secret będziemy musieli podać przy konfigurowaniu biblioteki, dane te nie powinny wpaść w niepowołane ręce – aplikacja nasza będzie gromadziła w końcu dane osobowe.

Z zakładek znajdujących się z lewej strony wybieramy Ustawienia i klikamy + Dodaj platformę. Z okienka wybieramy „Strona internetowa”. Następnie wpisujemy adres URL do naszego skryptu, w którym przeprowadzimy logowanie z Facebookiem. Istnieje możliwość logowania się z różnych podstron serwisu. W tym celu musimy podać listę domen w polu App domains.

facebook-developers-ustawienia

Integrowanie z naszym serwisem

Dla potrzeb stron www Facebook udostępnia JavaScript SDK oraz PHP SDK. Ja omówię wykorzystanie PHP SDK, który można pobrać stąd. Po ściągnięciu biblioteki stwórzmy plik index.php i przeprowadźmy konfigurację:

<?php
require_once 'php-sdk/src/facebook.php';

$config = array();
$config['appId'] = '412791612102295'; // tu wpisz ID twojej aplikacji
$config['secret'] = '4d21a055bcfef58ad427474595d5b204'; // tu wpisz secret twojej aplikacji

$fb = new Facebook($config);

Nasza strona jest już „połączona” z Facebookiem, pora teraz zalogować użytkownika:

$params = array(
    'scope' => 'email',
    'redirect_uri' => 'http://lukasz-socha.pl/facebook'
);
echo '<a href="' . $fb->getLoginUrl($params) . '">Zaloguj się przez Facebook</a>';

Element scope zawiera listę uprawnień (oddzielonych przecinkiem) o jakie prosimy użytkownika. Z kolei redirect_uri informuje FB, gdzie aplikacja ma powrócić po poprawnym zalogowaniu. Możemy teraz dowolnie korzystać z danych użytkownika:

$user = $fb->api('me');
echo 'Witaj, Jesteś zalogowany jako '.$user['name'];

Metoda api(‚me’) zwraca tablicę z danymi użytkownika. Możemy teraz dowolnie je wykorzystać w naszym serwisie.

Na koniec dodajmy opcję wylogowania:

echo '<a href="' . $fb->getLogoutUrl() . '">Wyloguj się przez Facebook</a>';

Tak wygląda w pełni działający plik index.php:

<?php
require_once 'php-sdk/src/facebook.php';

$config = array();
$config['appId'] = '412791612102295';
$config['secret'] = '4d21a055bcfef58ad427474595d5b204';

$fb = new Facebook($config);
?>
<!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>
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
        <title>Nasz serwis</title>
    </head>
    <body> 
        <?php
        if ($fb->getUser()) { // sprawdza czy zalogowany
            $user = $fb->api('me');
            echo 'Witaj, Jesteś zalogowany jako '.$user['name'].' <a href="' . $fb->getLogoutUrl() . '">Wyloguj się przez Facebook</a>';
        } else {
            $params = array(
                'scope' => 'email',
                'redirect_uri' => 'http://lukasz-socha.pl/facebook/'
            );
            echo 'Brak dostępu do danych. <a href="' . $fb->getLoginUrl($params) . '">Zaloguj się przez Facebook</a>';
        }
        ?>
    </body>
</html>

Jak widać integracja z Facebookiem nie jest zbyt skomplikowana. Mi osobiście najwięcej problemów sprawiało stworzenie aplikacji na stronie deweloperskiej – nie ma tam informacji, że musimy podać dokładny adres do skryptu logowania (podawałem tylko ogólny domeny).

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (7 głosów, średnia ocen: 3,29 z 5)
Loading...
  • „App ID oraz App Secret będziemy musieli podać przy konfigurowaniu biblioteki, dane te nie powinny wpaść w niepowołane ręce – aplikacja nasza będzie gromadziła w końcu dane osobowe.”

    Raz, to że ID aplikacji idzie wyczytać z adresu URL aplikacji.
    Dwa, że piszesz o tym, ze dane te nie powinny wpaść w niepowołane ręce, a sam je podajesz w listingach w tym artykule. Gratuluję sprytu : ]

  • Co do App ID to faktycznie można odczytać z adresu.U mnie jest jawne, bo aplikacja była tworzona tylko na potrzeby tego wpisu :)

  • Olo

    To wylogowanie coś mi nie działa – link jest niby prawidłowy – tzn. kieruje do jakiejś podstrony/skryptu Facebooka, ale po kliknięciu i przeładowaniu, w sesji nadal pozostaje nazwa użytkownika i nadal jest on zalogowany („if ($fb -> getUser())”).

    http://pastebin.com/1yCxqGa4

  • Łukasz Socha

    Ja bym dopisał skrypt, który usuwałby dane sesyjne na serwerze. W metodzie getLogoutUrl() można dodać adres, gdzie ma potem skrypt powrócić. https://developers.facebook.com/docs/reference/php/facebook-getLogoutUrl/

  • Poległem przy pierwszym kroku czyli przy tworzeniu aplikacji. Czy Facebook ma jakieś problemy aktualnie? Orientujesz się może?

    • Nie zauważyłem ostatnio żadnych problemów. Masz na pewno zweryfikowane konto?

  • robby

    męcze się i męcze i nigdzie nie mam „utwórz aplikacje”, „create application” ani „set up new application”. wertując google wiem, że nie jestem jedyny.. czy ktoś mi powie jak mam sprawdzić swoje IP secret jak mam już swój fan page?

    • B.I.G

      App Secret ID masz na myśli.. też mam właśnie z tym problem.. ktoś zna odpowiedź na nurtujące nas zagadnienie?

  • freestylerz

    To bardzo ciekawe, ale nie zmienia to faktu, że na http://freestylerz.pl ściągam filmy za darmo

  • jacek.swedrowski

    dobra robota, jasno i zrozumiale :)

  • U mnie to wygląda zupełnie inaczej niż Twój screen pokazuje. Oszaleje! :(

    • Ten wpis ma już prawie 2 lata i nie jest do końca aktualny (ale kod powinien zadziałać). Facebook jakiś czas temu zmienił interfejs strony dla deweloperów.

  • Ad, Ryba

    Wszystko krok po kroku zrobione bo wytłumaczone dość jasno. Jedynie musiałem się domyślić że w pliku index.php należy podać własne id i sekret aplikacji ;) Nie wiem też czym jest „konfiguracja biblioteki” dlatego jeśli jest ona jakimś innym a koniecznym krokiem to go pominęłem. Oczywiste wydaje mi się to że plik index.php należy umiescić w folderze „facebook”, a ten folder w głównym katalogu wordpresa (w moim przypadku jest to „public_html”).

    • Pisząc „konfiguracja biblioteki” miałem na myśli kroki zawarte we wpisie, nic poza tym :). Doprecyzowałem w kodzie o jaki ID i sectet chodzi.

  • Witam,
    Integruje system z Facebookiem. Tak się zastanawiam, np ktoś się rejestruje się za pomocą fb (pierwszy raz) i wpisuje hasło do naszego systemu… tak jak na tej stronie… Ale zastanawia mnie jedno – jak potem np. na stronie jest „zaloguj się przez Facebook” i wtedy jak się autoryzuje takiego użytkownika, tylko przez adres email ?

    • W bazie danych powinno być przechowywane ID z Facebooka. Korzystając z biblioteki udostępnianej przez Facebook pobiera się ID zalogowanego użytkownika na Facebook’u. Jeżeli ID z biblioteki zgadza się z ID zapisanym w bazie danych logujemy użytkownika do naszego serwisu :)

  • Miszczu

    Niby wszystko działa, ale po zalogowanie przez fb wraca do index’u i wciąż wyświetla się „Brak dostępu do danych. Zaloguj się przez Facebook”

    • A wpisałeś w App domains swoją domenę?

      • Miszczu 2

        Mam ten sam problem. Wpisałem swoją domenę.

        • Identyfikator aplikacji i App Secret na 100% są poprawne?

          • Miszczu 2

            tak

          • W takim razie potrzebuję kodu aplikacji i zrzutu z Facebook Developers. Bez tego ciężko stwierdzić co jest przyczyną.

          • Miszczu 2

            Nasz serwis

            getUser()) { // sprawdza czy zalogowany
            $user = $fb->api(‚me’);
            echo ‚Witaj, Jesteś zalogowany jako ‚.$user[‚name’].’ getLogoutUrl() . ‚”>Wyloguj się przez Facebook‚;
            } else {
            $params = array(
            ‚scope’ => ’email’,
            ‚redirect_uri’ => ‚http://adres strony/facebook/’
            );
            echo ‚Brak dostępu do danych. getLoginUrl($params) . ‚”>Zaloguj się przez Facebook‚;
            }
            ?>

          • Miszczu 2

            ucięło u góry

          • Miszczu 2

            index.php

          • Miszczu 2

            facebook

  • piotrbb

    W
    tworzonym serwisie mam dwie grupy użytkowników – z każda powiązane są nieco
    inne funkcjonalności. Chcę umożliwić rejestrację i logowanie przez FB, ale
    muszę rozróżniać grupy użytkowników od razu przy rejestracji a potem
    odpowiednio przy logowaniu ich przypisywać. Po „rejestruj profil”
    użytkownik wybiera typ konta – A lub B i zarejestruj przez FB. Ktoś ma pomysł
    jak nie utracić w trakcie procesu rejestracji przez FB informacji o wybranym przez użytkownika typie konta?

    • Zapisz w cookie typ konta i pobierz z cookie jaki typ wybrał przy zapisie użytkownika do bazy danych.

  • Paweł

    Witam, mam taki problem, że po zalogowaniu nie da się wylogować.

    • Paweł

      W sumie to wylogowuje mnie z facebook’a, ale na stronie nic się nie zmienia. Tak ma być?

      • Paweł

        I przy okazji skrypt na hostingerze nie działa. Zna ktoś jakiś darmowy hosting na którym działa?

        • Metoda

          getLogoutUrl() wylogowuje tylko z Facebooka. Jeżeli chcesz wylogować użytkownika na swojej stronie musisz sam o to zadbać (np niszcząc sesję).

          Skrypt powinien działać i na darmowym hostingu. Jeżeli nadal nie działa napisz do mnie maila. Postaram się pomóc.

  • olo

    Fatal error: Uncaught CurlException: 7: couldn’t connect to host thrown in /home/u365202739/public_html/php-sdk/src/base_facebook.php on line 1012

  • Czyli całość przebiega bez łączenia się z bazą danych mojego serwisu?

    • Tak, łączenie z bazą danych nie jest konieczne. Czy baza danych zostanie wykorzystana zależy od projektu i programisty :)

      • W takim razie do samego połączenia lepiej i szybciej skorzystać z sdk JS. Wystarczy wkleić kod i gotowe. A mógłbyś może po krótce wytłumaczyć jak powinno to wyglądać aby użytkownik zalogowany przez FB mial takie same uprawnienia jak zalogowany użytkownik w serwisie? Przykładowo mam w bazie danych – tabele USER > ID, PASSWORD.

        • Dodaj w bazie jeszcze kolumnę ID_FACEBOOK – będzie tu zapisywane ID konta z Facebooka. Teraz za pomocą Facebook SDK pobierz id konta użytkownika. Jeżeli masz w bazie danych użytkownika o takim samym ID_FACEBOOK logujesz go, jeżeli nie ma możesz mu założyć konto i potem zalogować. Po zalogowaniu traktujesz go tak samo jak zalogowanego „tradycyjnie”.

  • Cobra

    Krótko, zwięźle i na temat. Działa bez zarzutu i daje świetny początek pracy dla bardziej zaawansowanych skryptów i implementacji. Dzięki!

  • Kuba

    Jak wyciągnąć jeszcze np. id użytkownika, aby wyświetlić zdjęcie profilowe. Głowię się, aby połączyć coś ze znalezisk i mam trochę problemów, aby na pewno przydałoby się to. Panie Łukaszu możnaby dodać coś odnośnie tego jak pobierać dane, które chcemy wyciągnąć od użytkownika np. wykształcenie itp.

    • W sumie dobry pomysł. Leci na listę z nowymi wpisami. Jednak najwcześniej wpis pojawi się na jesieni, teraz niestety brak czasu…

  • Kuba

    $user = $fb->api(‚/me’,’GET’);

    echo ‚Witaj, Jesteś zalogowany jako ‚.$user[‚name’].’getLogoutUrl() . ‚”>Wyloguj się przez Facebook‚;

    • Dokładnie tak :)

      • Kuba

        Panie Łukaszu liczę na pomoc ws. „A jak jest z wyciągnięciem maila? $user[’email’] nie działa…” :) Nie mogę sobie poradzić…

  • Kuba

    A jak jest z wyciągnięciem maila? $user[’email’] nie działa…

    • Sprawdź co zwraca var_dump($user);
      Może aplikacja nie ma uprawnień do pobrania adresu email?

      • Kuba

        array(2) { [„name”]=> string(18) „Weronika XXX” [„id”]=> string(16) „16249974444444444444444” } nie ma emaila. Aplikacja informuje po zalogowaniu o tym, ze pobierze e-mail za co odpowiada rozumiem ‚scope’ => ’email’, jednak dalej nie pobiera emaila. Rozważyłem również możliwość taką, że mam w profilu na FB ukryty e-mail ale zmiana również nie daje efektów. Tym bardziej przy rejestracji na pierwszym lepszym portalu przez facebook widzę, że pobierają prawidłowy adres email bez problemu. CO o tym sądzisz?

        • Powinno działać. Może coś w ustawieniach aplikacji blokuje pobieranie emaila? Najlepiej to wyślij mi na maila twój kod.

        • Łukasz

          Drugi dzień siedzę przy tym g..nie, bo mam dokładnie taki sam problem, a pół roku temu robilem to samo na starszym api i działało, facebook coś zmieniał albo coś rozwalił?

          • Dłuższy czas nie robiłem żadnej aplikacji pod FB, więc pewności nie mam czy coś zmieniali. W czasie gdy powstawał ten wpis na 100% powyższy kod działał.

          • Lukasz

            Ten działał pól roku temu na pewno bo sam z niego korzystałem :)

          • Jak ktoś znajdzie rozwiązanie niech się podzieli nim. Zaktualizuję wtedy wpis dla potomnych :)

          • Łukasz

            Znalazłem w necie rozwiązanie. Z kilka godzin podam pełny działający (bynajmniej u mnie) kod.

            Podpowiem tylko od razu że pomocne może być to:
            https://developers.facebook.com/tools/explorer/?method=GET&path=me%3Ffields%3Did%2Cname%2Cemail

          • Łukasz

            Pod adresem https://github.com/facebook/facebook-php-sdk-v4/archive/5.0-dev.zip

            pobrałem facebook sdk php w wersji 5, jest tam folder src i Facebook, reszta to mało przydatne rzeczy
            do katalogu z naszą stroną wrzucamy folder Facebook (tam też jest mnóstwo niepotrzebnych rzeczy ale niech każdy usuwa wedle swego uznania)
            i teraz na stronie z logowaniem piszemy taki kod:

            ‚tu wpisz klucz do aplikacji’,

            ‚app_secret’ => ‚tu wpisz tajny klucz aplikacji’,

            ]);

            $helper = $fb->getRedirectLoginHelper();

            $permissions = [’email’, ‚public_profile’]; // opcjonalnie wpisujemy to co chcemy uzyskać od użytkownika

            $facebookLogin = $helper->getLoginUrl(‚tu wpisz adres do aplikacji gdzie ma przekierować po zalogowaniu przez facebooka’, $permissions);

            ?>

            <a href="” >Zaloguj przez Facebooka

            a na stronie do której zostaniemy przekierowani piszemy:

            ‚tu wpisz klucz do aplikacji’,

            ‚app_secret’ => ‚tu wpisz tajny klucz aplikacji’,

            ]);

            $helper = $fb->getRedirectLoginHelper();

            try {

            $accessToken = $helper->getAccessToken();

            } catch(FacebookExceptionsFacebookResponseException $e) {

            echo ‚Graph returned an error: ‚ . $e->getMessage();

            // exit;

            } catch(FacebookExceptionsFacebookSDKException $e) {

            echo ‚Facebook SDK returned an error: ‚ . $e->getMessage();

            // exit;

            }

            $userLogedByFacebook = 0;

            if (isset($accessToken)) {

            $userLogedByFacebook = 1;

            // użytkownik zalogowany

            $_SESSION[‚facebook_access_token’] = (string) $accessToken;

            // Now you can redirect to another page and use the

            // access token from $_SESSION[‚facebook_access_token’]

            $fb->setDefaultAccessToken($accessToken);

            try {

            $res = $fb->get(‚/me?fields=id,name,email’);

            $node = $res->getGraphObject();

            } catch(FacebookExceptionsFacebookResponseException $e) {

            echo ‚Graph returned an error: ‚ . $e->getMessage();

            // exit;

            } catch(FacebookExceptionsFacebookSDKException $e) {

            echo ‚Facebook SDK returned an error: ‚ . $e->getMessage();

            // exit;

            }

            $plainOldArray = $res->getDecodedBody();

            // tablica z danymi:

            var_dump($plainOldArray);

            } else {

            echo „niezalogowany”;

            }

            Żegnam, tradycyjnymi słowami każdego programisty – „u mnie działało” :)

          • Łukasz

            urżneło kilka rzeczy – wrzucę screeny kodu lepiej to będzie wszystko widać

            http://s10.postimg.org/820f473ix/111.png

            http://s12.postimg.org/kqeb8t30t/222.png

          • Dzięki za wyjaśnienie. Przyda się mi i innym czytającym bloga. W wolnej chwili zaktualizuję wpis na blogu.

          • Łukasz

            A – dodam jeszcze że próbowałem na „starym sdk php” i na najnowszym i sytuacja wygląda tak samo. W odpowiedzi dostaje tylko id użytkownika i „name” gdzie wartością jest imie połączone spacją z nazwiskiem .

  • Kamil

    To nie działa

    • Niestety Facebook wprowadza dość często zmiany w mechanizmie integracji… W dniu pisania wpisu wszystko działało bez problemu.