spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 29.5.2011, článok je súčasťou seriálu Aplikácie pre Facebook
Hodnoť článok:
1 0

Aplikácie pre Facebook: Prihlásenie cez Facebook na váš web

Načo sa znova registrovať na váš web? Prečo je moderné používať prihlásenie pomocou overených údajov tretej strany (napr. prihlásenie cez Facebook či Google konto)? Pár pre a proti o tom a návod ako nastaviť Váš web, aby dokázal reagovať na prihlásenie užívateľov z Facebook-u...

Na prihlasovanie a zisťovanie užívateľov používa Facebook knižnicu oAuth, ktorá sa stala štandardom pre cross-server prenos dát. Ide viacmenej o dáta, ktoré sa posielajú formou AJAXových requestov, prípadne cez bežné GET či POST requesty. Výsledkom každého requestu je pritom výsledok v JSON-e, čím sa stáva vrátený objekt rýchlejšie rozprasovateľný.

Že hovorím španielčinou a začiatočník z predošlých riadkov nevie nič? Skúsme sa pozrieť na tento jednoduchý graf.

Facebook Connect na váš web - návod ako funguje

Aby sme však mohli poslať request na prihlásenie, musíme si určiť, či budeme aj na našom webe ukladať informácie o užívateľovi, ktorého chceme autorizovať, alebo mu iba sprístupníme možnosť zobrazenia, aké majú prihlásení používatelia. Predpokladajme však, že chceme mať evidenciu klienta, pričom budeme kontrolovať existenciu účtu na našom webe prostredníctvom e-mailovej adresy. To pre nás znamená, že budeme pri prihlasovaní požadovať povolenie prístupu k e-mailovej adrese (perms scoope). Jednoduchý JavaScriptový kód by potom mal vyzerať nasledovne:

 <div id="fb-root"></div>
 <script src="http://connect.facebook.net/sk_SK/all.js">
 </script>
 <script>
         FB.init({
            appId:'APP_ID_NASEJ_APLIKACIE', cookie:true,
            status:true, xfbml:true
         });
 </script>
 <fb:login-button perms="email">
         Prihlásiť sa cez Facebook
</fb:login-button>

Tento jednoduchý kód pridá do pozície, kde sme ho vložili, toto tlačítko, ktorého funkciou je, že po kliknutí otvorí POPUP okno, v ktorom si (len pre prvé prihlásenie, ak sme sa ešte neautorizovali pre danú aplikáciu) vyžiada práva pre prístup k informáciám.

Facebook Connect na váš web - používateľ musí povoliť/schváliť aplikáciu pri prvom spustení

Po povolení prístupu si Facebook zapíše do cookies informácie o autorizácii, ku ktorým už potom môžeme pristupovať pomocou naších PHP scriptov a na základe PHP SDK k Facebook-u. Tu je jednoduchý PHP kód, pomocou ktorého vyriešime zisťovanie prihlásenia a úspešnosti.

<?php

define('APP_ID', 'vaše ID aplikácie');
define('APP_SECRET', 'app secret nájdete v sekcii developerov v detaile aplikácie');

function get_facebook_cookie($app_id, $app_secret) {
  $args = array();
  parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
  ksort($args);
  $payload = '';
  foreach ($args as $key => $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
  }
  if (md5($payload . $app_secret) != $args['sig']) {
    return null;
  }
  return $args;
}

$cookie = get_facebook_cookie(APP_ID, APP_SECRET);

$user = json_decode(file_get_contents(
    'https://graph.facebook.com/me?access_token=' .
    $cookie['access_token']));

?>

A v pozícii, kde chceme mať informáciu o prihlásenom užívateľovi prípadne prihlasovacie meno, vložíme tento kód:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/sk_SK/all.js"></script>
<?php if ($cookie && $user->id != '') {
	if($user->gender == 'male') { echo 'Prihlásený'; } else { echo 'Prihlásená'; } ?>: <?php echo $user->name; ?>
    <?php } else { ?>
		  <fb:login-button perms="email">
	         Prihlásiť sa cez Facebook
	       </fb:login-button>
    <?php } ?>

<script>
      FB.init({appId: '<?php echo APP_ID; ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
</script>

Pýtate sa, kde teda overujeme, či prihlásený užívateľ existuje v našej databáze, prípadne, čo presne spraviť, aby sme ho vedeli identifikovať? Odpoveď je jednoduchá a pripraviť funkciu pre každého, kto to chce používať je asi zbytočné, pretože by sme museli vytvárať množstvo rôznych variácií, takže skúsim priblížiť iba proces, akým by sa mala kontrola riešiť.
Po prihlásení získame informácie o užívateľovi, ktoré obsahujú jeho základné údaje + informáciu, ktorú sme požadovali prostredníctvom práv prístupu. Tam sme si zvolili mať prístup k e-mailovej adrese, ktorú teda budeme kontrolovať.

V tomto prípade $user->email. Ak chcete vedieť, aké údaje sú poskytované, stačí si urobiť výpis premennej $user. Ide o pole, takže tých vecí je tam viac ako dosť. Pre príklad uvádzame id (identifikátor užívateľa), name (celé meno), first_name, last_name, link (url k profilu na facebook-u), gender (pohlavie), locale (aký jazyk používa užívateľ na facebook-u), languages (pole jazykov, ktoré užívateľ ovláda) a veľmi dôležitá premenná verified (boolean true/false).

To znamená, že pre naše overovanie si spravíte fukciu v PHP, ktorá bude kontrolovať všetkých užívateľov s e-mailovou adresou, ktorú máte v premennej $user->email.

Čo budete robiť v prípade, že užívateľ neexistuje, je iba na Vás. Či ho presmerujete na registráciu s predvyplnenými údajmi, alebo mu zobrazíte iba informáciu, že neexistuje a môže sa zaregistrovať, je skutočne na Vás. V tomto sa Vašej fantázii medze nekladú.

Ukážku použitia môžete nájsť tu: ukážka facebookového prihlásenia, kde pre Vás budeme postupne pripravovať STEP-BY-STEP tutoriál o tvorbe CMS systému založenému na Nette framework-u. O tom však viac v rubrike o Nette.

Nabudúce v seriáli Aplikácie pre Facebook:

Na čo sa tešiť v ďalšej časti seriálu Aplikácie pre Facebook? Povieme si, ako vytvoriť v našej aplikácii CANVAS PAGE a čo to tá CANVAS PAGE vlastne je.

* * *

FB developeri na Facebooku:

Pridajte sa a sledujte články rady, tipy. A neskôr si tam všetci budeme sharovať svoju tvorbu...

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
1 0

28 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Patrik Vaberer 19.8.2012 15:42:46
podla mna ziskavanie informacii cez php by bolo jednoduchsie cez fql, resp pouzit ich php SDK, ktora ma uz preddefinovane funkcie a vsetko ide lahko a prehladne.)
0 0 Filip Škultéty 15.2.2012 15:13:56
O php neviem vôbec nič. Dá sa to aplikovať aj na HTML web?
0 0 Peter 28.1.2012 10:48:45
Na webe, kde mi to ide mam php 5.3 a na webe, kde mi to nejde mam php 5.2. cital som na forach, ze to moze byt aj tou verziou resp. nastavenim.
Zatial diky.
1 0 Moďerný Občan 25.1.2012 02:56:51
Aku mas verziu php? Chyba bude asi len v nastaveniach samotneho php, ak to inde ide bez problemov.
0 0 Peter 24.1.2012 20:55:26
Diky, ale nefunguje mi to stale pise chybu protokolu HTTP 500.
Inac aj ked premenujem .htaccess a dam zobrazit subor /src/facebook.php
tak mi zase vyhodi:
Chyba 139 (net::ERR_TEMPORARILY_THROTTLED): Žiadosti na tento server boli dočasne pozastavené.

Zaujimave, ze na druhej domene, ktoru mam na php5.sk mi to ide bez problemov.
0 0 Moďerný Občan 24.1.2012 15:33:02
Skus tam capnut tuto podmienku a skus zobrazit ten facebook.php:

RewriteCond $1 !^(src\/(.*)\.php)
0 0 Peter 23.1.2012 19:32:23
Tu je subor facebook.php
http://www.kanekalon.sk/src/facebook.php

Tu je stranka so zdrojakom, ktory som napisla v prvom komente
http://www.kanekalon.sk/hramsa.php

.htaccess:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^kanekalon.sk
RewriteRule (.*) http://www.kanekalon.sk/$1 [R=301]
RewriteRule ^([^/\.]+)/?$ /index.php?page=$1
ErrorDocument 404 /index.php
0 0 Moďerný Občan 23.1.2012 00:33:58
Hod sem .htaccess
0 0 Peter 22.1.2012 20:09:12
Mam dva weby na jednom mi prihlasenie cez facebook konto funguje a na druhom nie. (na druhom pouzivam .htaccess)
Na druhom mam takyto problem:

TOTO SA NA STRANKE ZOBRAZI

require 'src/facebook.php';
$facebook = new Facebook(array(
'appId' => '152913168112423',
'secret' => 'cde632f6c4c96e567c307fa2728fb20e',
));

TOTO SA UZ NA STRANKE NEZOBRAZI

a obsas mi vyhodi chybu:
Chyba 139 (net::ERR_TEMPORARILY_THROTTLED)

ked otvorim cez prehliadac subor facebook.php
www.mojastranka.sk/src/facebook.php
tak mi vyhodi:
Chyba protokolu HTTP 500 (Internal Server Error)

0 0 Tomas Blaho 8.11.2011 23:38:36
ahoj, mam taky problem, snazim sa rozbehnut podla tohto fb login, pricom po lognuti zistim ci je email usera v db, ak nie tak registrujem (to ide pohode) ak ano tak vytiahnem z db username a heslo a odoslem neviditelny form na prihlasenie (prihlasenie bolo uz implementovane)... no len mam problem s tym, ze ked clovek klikne na login tak musim potom refreshnut stranku a az tak ma logne... a druha vec je ze ked sa vratim na tu stranku ze ma rovno prihlasi.. .ako vyriesim aby ma loglo, resp. aby sa odoslal ten form iba pri kliknuti na login a rovno sa refreshla stranka na ktorej prave som?? dakujem za rady
0 0 Moďerný Občan 23.9.2011 22:53:27
Predstav si situaciu, ze session na webe ti expiruje, ale ty si stale prihlaseny na facebooku. Ak to budes riesit cez fbml tak FB login button neuvidis. Jedine az ked sa odhlasis aj z facebooku.

Preto je lepsie pouzivat vlastny FB button (obycajny anchor). A idealne uz SDK 3.0 a v takom pripade si kazdy rozmyslajuci programator vystaci s tymto https://github.com/facebook/php-sdk/blob/master/examples/example.php a od toho sa uz vie dalej odvijat.
0 0 Belohorec Branislav (fb) 24.6.2011 00:00:00
ak mas FB PHP SDK 2.0 tak musis este upravit samotnu Facebook.php classu
0 0 Ten Kubo (fb) 6.6.2011 00:00:00
Robil som to niekoľko krát... require-ol som do toho aj FB PHP SDK a stále nič...
0 0 František Čaník (fb) 5.6.2011 00:00:00
Kubo: Potom vidím problém v niečom inom... :) skús prekontrolovať správnosť APP ID a APP SECRET-u
0 0 Ten Kubo (fb) 5.6.2011 00:00:00
file_get_contents mi funguje.... Ale nevygeneruje to ten access_token
0 0 František Čaník (fb) 5.6.2011 00:00:00
Kubo a Peter: file_get_contents je povacsinou blokovana cez PHP SAFE MODE, da sa to vsak "obist" pouzitim funkcie cURL
0 0 Peter Lauf (fb) 5.6.2011 00:00:00
Ten isty problem čo Ten kubo :(
0 0 Ten Kubo (fb) 4.6.2011 00:00:00
Mám malinký problém... Môžete mi poradiť?
Okopíroval som php kód aj s javascriptovým... A píše mi chybu "Warning: file_get_contents(https://graph.facebook.com/me?access_token) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request"
Stránka je http://labs.kubonm.eu/fb/
Ďakujem
0 0 František Čaník (fb) 30.5.2011 00:00:00
Michal: Určite súhlas. :) ibaže to je skôr na ten vyšší level a k tomu sa ešte "dopracujeme" ... dúfam.
0 0 Michal Maňák (fb) 30.5.2011 00:00:00
a když budu mít vypnutý JavaScript, asi se moc nepřihlásim že. Není lepší používat Facebook SDK? Mně osobně přijde logování čistě přes JavaScript trošku nepoužitelné. Laději to udělat čistě v core, přináší to více možností.
Zajtra.sk > Programovanie > FBML/Facebook > Aplikácie pre Facebook: Prihlásenie cez Facebook na váš web


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama