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.

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.

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