Jak opravit nefunkční Facebook přihlašování?

Martin Pešout   4. 10. 2011


Facebook patří v současnosti mezi nejrozšířenější sociální síť světa. Spousta moderních eshopů a webových stránek využívá právě jeho služby, aby usnadnila všem návštěvníkům registraci a následné přihlašování. Od 1. října 2011 však dochází k zásadní změně. Facebook se snaží udělat celý proces více bezpečnější. Proto se rozhodl, že od tohoto data bude pro autentizaci uživatelů využívat pouze protokol OAuth verze 2.0. Máte-li problém se stávajícím přihlašováním nebo se teprv chystáte o jeho integraci do systému, pak je tento článek určen přímo pro Vás.

Protokol OAuth 2.0

Cílem protokolu OAuth je usnadnit uživatelům samotné přihlašování. Jak jsem již zmínil v mém článku o OpenID, tak i zde to můžu zopakovat: Pokud požadujete registraci, je trendem poslední doby celý tento proces maximálně zjednodušovat. V dnešní době si nechceme pamatovat desítky hesel. Provozovatelům služby, která OAuth identity poskytuje, dává OAuth možnost sdílet uživatelská data a identity, aniž by uživatelé museli prozrazovat své heslo komukoliv dalšímu.

Starý způsob přihlašování

Pokud stále využíváte starý způsob, je nutné provést změnu v kódu a nově využívat protokolu OAuth 2.0. Starý způsob poznáte např. podle následující ukázky kódu v jazyce PHP.

$url="http://www.facebook.com/login.php?api_key=[YOUR_API_KEY]    
  &connect_display=popup&v=1.0&next=[YOUR_URI]
  &cancel_url=http://www.facebook.com/connect/login_failure.html
  &fbconnect=true&session_key_only=true";

header("location:" . $url);

Pokud přímo odkazujete v aplikaci na knihovnu JavaScript SDK, tak dojde k této změně automaticky a nemusíte se o nic starat v kódu aplikace. Pokud např. využíváte starší verzi knihovny PHP SDK, tak je nutné provést její aktualizaci na novější verzi (od 1. července 2011 tato knihovna podporuje protokol OAuth 2.0).

Jak správně implementovat Facebook přihlašování?

Facebook podporuje 2 odlišné způsoby použití OAuth 2.0. Jedná se o tyto:

  • autentizace na straně serveru - použito při zpracování a generování obsahu na straně serveru
  • autentizace na straně klienta - použitou pouze v situacích, když potřebujeme zavolat služby Graph API na straně klienta (prohlížeče), jako při volání JavaScriptu nebo z nativních mobilních či desktopových aplikací.

Nebudu se zde zabývat druhým způsobem, ale pokud by to někoho z Vás zajímalo detailněji, tak popis tohoto procesu autentizace spolu s několika ukázkami naleznete zde.

Autentizace uživatelů nebo autorizace aplikací jsou obsluhovány stejným způsobem a to pomocí přesměrování na tzv. sérii po sobě jdoucích akcí nazvaných OAuth Dialog. V odkazu musíme předat ID aplikace (client_id parametr), které je vygenerováno při vytváření samotné aplikace pro přihlašování v Developer App. Dále uvedeme URL, na které přesměrujeme zpět po dokončení celého procesu (redirect_uri parametr). Samotné redirect_uri musí obsahovat stejnou doménu jako ta, která byla definována při vytváření aplikace v zmíněném Developer App.

Takže prvně přesměrujeme na podobnou adresu:

https://www.facebook.com/dialog/oauth?
  client_id=YOUR_APP_ID&redirect_uri=YOUR_URL

Pokud je uživatel již přihlášený, budou pouze ověřeny jeho údaje uložené v cookies. Pokud ještě přihlášený není, bude vyzván, aby tuto akci dokončil.

Ukázka Facebook přihlašování

Pokud došlo k úspěšné autentizaci, OAuth Dialog vyzve uživatele, aby autorizoval aplikaci stojící za celým přihlašováním. Tento krok nastane pouze v případě, kdy toto nebylo provedeno už někdy v minulosti.

Povolení Facebook aplikace

Tímto ale získáme pouze přístup k základním informacím, které se týkají vašeho Facebook účtu. Pokud budeme chtít zjišťovat více - např. emailovou adresu, kterou používá váš Facebook účet - je nutné to specifikovat pomocí tzv. scope parametrů. Ty doplníme jako parametry do URL, kterou voláme v rámci našeho OAuth Dialogu. Následující příklad ukazuje, jak získat také přístup k emailové adrese a možnostem číst přízpěvky na zdi uživatele:

https://www.facebook.com/dialog/oauth?
     client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream

Úplný seznam údajů, které je možné číst z profilu uživatele, naleznete zde.

Když uživatel zamítne povolení číst jakékoliv informace z jeho profilu, nedojde k potřebné autorizaci. Samotný OAuth Dialog přesměruje (přes HTTP 302) uživatele na URL uvedenou v redirect_uri parametru a přidá následující chybovou informaci:

http://YOUR_URL?error_reason=user_denied&
     error=access_denied&error_description=The+user+denied+your+request.

Pokud však uživatel povolí číst požadované informace z jeho profilu, bude aplikace autorizována. OAuth Dialog přesměruje (přes HTTP 302) uživatele na URL uvedenou v redirect_uri a přidá nový parametr s autorizačním kódem:

http://YOUR_URL?code=A_CODE_GENERATED_BY_SERVER 

S tímto kódem je možné provést následující krok, autentizaci aplikace a získat tak přístupový token (access token) pro čtení potřebných informací z profilu uživatele.

Aby bylo možné dokončit autentizaci aplikace, musíme předat získaný kód a tajný klíč aplikace do rozhraní Facebook Graph API - https://graph.facebook.com/oauth/access_token. Tajný klíč aplikace získáme z Developer App. Tento údaj by měl by zůstat utajen pro nepověřené lidi. Tzn. že by neměl být předávaný přes URL apod.

https://graph.facebook.com/oauth/access_token?
     client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&
     client_secret=YOUR_APP_SECRET&code=THE_CODE_FROM_ABOVE

Pokud vše proběhne v pořádku, získáme od autorizačního serveru přístupový token pro čtení potřebných informací z profilu uživatele.

Získaný přístupový token

Vrácená informace obsahuje navíc ještě jeden parametr a to číslo v sekundách představující dobu, za kterou dojde k expiraci získaného tokenu (parametr expires viditelný i na předchozím obrázku). Jakmile dojde k expiraci, musíte znovu projít všechny kroky a vygenerovat nový kód a přístupový token. Pokud požadujete, aby doba expirace byla nastavena na nekonečno, je nutné požádat o takzvaný offline přístup (offline_access) k vašemu profilu pomocí zmíněného scope omezení.

Příklad v jazyku PHP

Následující ukázka demonstruje Facebook autentizaci na straně serveru s CSRF ochranou. Ukázkový kód je z jazyka PHP:

$app_id = "YOUR_APP_ID";
$app_secret = "YOUR_APP_SECRET";
$my_url = "YOUR_URL";

session_start();
$code = $_REQUEST["code"];

if(empty($code)) {
  $_SESSION["state"] = md5(uniqid(rand(), TRUE)); //CSRF protection
  $dialog_url = "http://www.facebook.com/dialog/oauth?client_id=" 
    . $app_id . "&redirect_uri=" . urlencode($my_url) . "&state="
    . $_SESSION["state"];
   echo(" top.location.href='" . $dialog_url . "'");
}

if($_REQUEST["state"] == $_SESSION["state"]) {
  $token_url = "https://graph.facebook.com/oauth/access_token?"
    . "client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url)
    . "&client_secret=" . $app_secret . "&code=" . $code;
  $response = file_get_contents($token_url);
  $params = null;
  parse_str($response, $params);

  $graph_url = "https://graph.facebook.com/me?access_token=" 
    . $params["access_token"];

  $user = json_decode(file_get_contents($graph_url));
  echo("Hello " . $user->name);
}
else {
  echo("The state does not match. You may be a victim of CSRF.");
}

Jak implementovat odhlášení?

Pokud se chcete odhlásit z Facebooku je to možné provést přesměrováním na následující URL:

https://www.facebook.com/logout.php?next=YOUR_URL&access_token=ACCESS_TOKEN

Samotné YOUR_URL musí obsahovat stejnou doménu jako ta, která byla definována při vytváření aplikace v zmíněném Developer App.

Zdroje

Zařazeno v Vývoj

Jsem brněnský UI vývojář pěkného frontendu. Od malička si potrpím na detail, ale přitom kladu důraz na jednoduchost a přehlednost. Zastávám názor, že jednodušší weby jsou ty nejkrásnější.


27 komentáře

  1. Libor

    dobrý den mám takový malý problém ze stránkou facebook..pokaždé když se chci přihlásit tak měto napíše server přetížen,nevíte co stím mám dělat..?děkuji Ulbrich

    1. Autor Martin Pešout

      Ahoj Libore, rád bych ti poradil, jak v této situaci pokračovat. Nicméně s podobným chováním jsem se zatím při implementaci FB přihlašování nesetkal. Nezbývá než zkusit asi googlit.

      S pozdravem,
      Martin P.

  2. Lukáš

    Zdravim mam problem s FB že ked sa prihlasim tak mi neukazuje žiadne obrazky ani fotky a nejde mi ani chat všetko je biele a možem si pisat s ludmi len cez správy neviete kde može byt problem?
    Robi to len mojmu učtu.…. spravil som si aj novy vsetko bolo v pohode a o 3 tyzdne zase to iste sa stalo

    1. Autor Martin Pešout

      Ahoj Lukáši,

      to co popisuješ, tak to bych spíš přisuzoval problému s prohlížečem. V jiných prohlížečích to také zlobí? Pokud to je problém pouze jednoho prohlížeče, tak bych doporučil smazat prvně cache.

      M.

  3. Leoš

    Dobrý den,

    potřeboval bych poradit s přihlášením na fcb. Trvá to hrozně dlouho a většinou se to ani nepřipojí. Zkoušel jsem jak na Chrome tak na Mozzile…

    1. Autor Martin Pešout

      Těch důvodů může být mnoho. Musel bych vědět, v kterém kroku se to zadrhne a případně jestli je zobrazeno nějaké chybové hlášení.

      Pokud se jedná o nějaký specifický problém, tak bych spíš doporučoval zkusit „googlit“. Facebook přihlašování je velmi používané. Takže je dost velká pravděpodobnost, že na podobnou chybu už někdo někdy narazil a že bude k dispozici i návod, jak situaci vyřešit.

  4. Láda

    Dobrý den,manželka má účet na FB a po 14 dnech funkce nelze okomentovat došlé příspěvky přátel a správce FB píše,že je tato funkce blokována.Dále pak píše,že do 30 dnů dojde k odblokování což se nestalo a blokace stále trvá.Předem děkuji za odpověd.

    1. Autor Martin Pešout

      Dobrý den,

      obávám se, že s tímto problémem nedokážu poradit, protože nejde o problém s nastavením samotných komentářů. Zkusil bych hledat v nápovědě Facebooku a nebo případně využít některý kontaktní formulář, který naleznete zde http://www.facebook.com/help/

      Martin P.

  5. jan B.

    dobry den, mam dotaz, vcera sem si na FB zmenil heslo, vse probehlo v poradku az do ty doby nez sem se odhlasil, pote znova se mi uz prihlasit nepodarilo, zadal sem tam nove heslo a psalo mi to ze heslo je stare a ze aktualizace hesla probehla v ten den co sem ho menil, tak sem skusil zadat heslo predchozi a to mi psalo ze heslo neni spravne, a kdyz sem pozadal o obnoveni hesla tak mi prisla smska s kodem a po zadani mi psalo ze sem zadal prilis kodu a ze to mam skusit zachvili.dekuji za odpoved. Honza

    1. Autor Martin Pešout

      Ahoj Honzo,

      v tvém případě bych zkusil za chvilku znovu obnovit heslo. Je dost možné, že Facebook má technické potíže. Zrušit svůj profil tak rychle nejde … celý proces chvilku trvá. Pokud obnova nepomůže, tak nezbude nic jiného, než se obrátit na technickou podporu http://www.facebook.com/help/

      S pozdravem,
      Martin P.

  6. Emilie

    Dobrý den měla by k Vám posbu včera večér se mi pokazil FB všechno mám na pravé straně a v čínském jazyku nebo včem nevím .Já nevím co stím nemůžu nic na FB udělat jenom po spaměti když si myslím ‚žeto je správně vždy mně vše dělal manžel ‚ale mrtvý a já si nevím rady na FB nemůžu nic udělat děkuji za radu Valoušková.

  7. Lenka

    Dobrý chcela by som sa opýtať či náhodou neviete ako dám fb do pôvodného stavu, lebo keď naťukám stránku facebook nie je taký modrý ale je to písanie štýlom v ľavom ramčeku pod sebou všetko úplne všetko! a neviem ako sa toho mám zbaviť

    1. Autor Martin Pešout

      Zdravím,

      bohužel zde se snažím pořadit spíš s problémy týkající se integrace Facebook komentářů. Ale pokud jsem to dobře pochopil, to co popisujete, to se týká podle mě toho, že FB změnil svůj vzhled. Oni čas od času přistupují k těmto úpravám. Bohužel toto bývají úpravy nevratné a nijak tomu nelze zabránit.

      Martin P.

    2. Autor Martin Pešout

      Ještě mě napadlo, jestli jste zkoušel vymazat cache a cookies v prohlížeči a celou stránku zobrazit zvnovu? Případně vyzkoušet, zda vám toto dělá i v jiném prohlížeči?

      P.M.

    3. Autor Martin Pešout

      Zdravím,

      asi jsem přišel na důvod, proč vám to vypisuje jinak. Problém bude podle mě v zastaralé verzi knihovny Facebook SDK pro PHP. O pár komentářů níže jsem umístil odkaz na nejnovější verzi PHP Facebook SDK

      P.M.

  8. Lenka

    Nejaký taký štýl to má všetko pod sebou nie je to en pravý fb
    Facebook logo
    E-mail alebo telefón Heslo

    Zapamätať prihlásenie
    Zabudli ste svoje heslo?
    RECENT LOGINS

    Facebook vám pomáha spojiť sa a zdieľať život so svojimi priateľmi.

    Registrácia

    Je to bezplatné a vždy bude.

    Dátum narodenia

    Prečo musím uviesť môj dátum narodenia?
    Žena
    Muž
    By clicking Sign Up, you agree to our Podmienky používania and that you have read our Zásady využívania údajov, including our Cookie Use.

    Registrácia
    Bezpečnostné overenie

    Táto položka je povinná.
    Zadajte obe slová oddelené medzerou.
    Nemôžete prečítať dole uvedené slová? Skúste iné slová alebo zvuková verzia overovacieho kódu.
    Načítava sa…
    Text v rámčeku:

    Čo je to?
    Bezpečnostné overenie
    Toto je štandardný bezpečnostný test, ktorý používame na ochranu pred vytváraním falošných účtov a spamovaním.

    Späť
    Registrácia
    Vyskytla sa chyba. Skúste to znova.
    Vytvoriť stránku pre osobnosť, skupinu alebo firmu.
    Slovenčina
    English (US)
    Español
    Português (Brasil)
    Français (France)
    Deutsch
    Italiano
    العربية
    हिन्दी
    中文(简体)

    Mobil Nájsť priateľov Vizitky Ľudia Stránky Miesta Aplikácie Hry Hudba
    O Facebooku Vytvoriť reklamu Vytvoriť stránku Vývojári Kariéra Ochrana súkromia Súbory cookie Podmienky používania Pomoc
    Facebook © 2013 · Slovenčina

  9. Marek Šulc

    Dobrý den..Potřeboval bych poradit..Při návštěvě stránky facebook se mi tato stránka zobrazí pouze v levém rohu a při přihlášení se mi nezobrazují fotky,vide prostě nic..Děkuji předem za info..S pozdravem Marek

  10. Autor Martin Pešout

    Dobrý den,

    těžko říct, v tomto případě se budete muset obrátit spíše na podporu Facebooku. Ale než to uděláte doporučoval bych nejprve vymazat cache a cookies v prohlížeči a zkusit ještě jednou zobrazit stránku Facebooku

    Martin P.

  11. Barbora

    Dobrý den,někdo na fb si dal stejné čislo do údajů,a od té doby se nemohu přihlásit,poraďte Prosím…zkoušela jsem aby mi poslali na email potvrzovací kód ke změně hesla ale nic mi nepřišlo. ..zkoušela jsem to tak 10×…

    1. Martin Pešout

      Ahoj Báro,

      bohužel v článku se věnuju spíš problému, který nastává, když programátor se snaží do své aplikace přidat Facebook přihlašování. V tvém případě se budeš muset nejspíš obrátit na Centrum Pomoci, které má Facebook pro takovéto případy https://www.facebook.com/help/ měla bys tam najít možnost je i přímo kontaktovat. 

      Měj se pěkně,
      Martin

  12. Jaroslava Kühnelová

    Nemohu trvale zrušit svou přihlášku na Facebook. každý den dostávám zprávy, že počet žádostí přátel je 1. Odkaz na zrušení je nefunkční. Už jsem z toho zoufalá.
    Můžete provést mé odhlášení, aby mému trápení byl konec?

  13. Miriam

    Dobrý vecer prajem. Pri prihlasovaní na Fb mi stale ukazalo rychle prihlasenie, t.j. ze sa mi ukazali fotky ludi, ktorí sa cez moj notebook prihasovali na fb a stacilo kliknut uz len na fotku a zadat heslo. Teraz mi to zmizlo a uz mi tie fotky nenaskakuju. Viete mi poradit, ako ich tam dostanem spat? dakujem


Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Odesláním formuláře souhlasíte se zpracováním osobních údajů.