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

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

Tutoriál: Prihlásenie cez Facebook step by step 2. časť

Vytvorili sme si aplikáciu, stiahli sme si SDK pre PHP, no poďme sa trošku zorientovať v tom, ako všetko prepojiť do jednotného celku, pomocou ktorého umožníme naším návštevníkom prihlásenie na web s účtom na Facebook-u.

Možno by som sa mal v úvode ospravedlniť za časový posun, ale tak snažil som sa to stihnúť ešte v roku 2011. Snáď sa podarilo :).

Keď sme končili prvú časť, hovorili sme si o tom, že si musíme vytvoriť PHP scripty, ktoré budú obsluhovať celý systém prihlasovania a odhlasovaina. Aby sme to mali komfortnejšie, použijeme tzv. killer combo v podobe Javascript SDK a PHP SDK. Predsa len, všetci máme radi jQuery a yablkové tuts, tak prečo sa vyhnúť podpore FB v jQuery? Ale ok, nie o tom. Nebudem Vám hovoriť o tom, že Facebook prináša sociálne pluginy vo forme HTML5, XFBML a IFRAME verziách. To všetci vieme (snáď) a ak nie, tak už to aj tak viete. My však nebudeme používať klasické buttoníky od Facebook-u, ale vytvoríme si vlastné. Tak či onak nikto nemá rád ten branding tlačítka Prihlásiť sa. Čo potrebujeme k tomu, aby sme vôbec mohli pracovať s Facebook-om? Potrebujeme mať pri sebe naše APPID a APP_SECRET hodnoty. Ak ich máme, tak do nášho HTML najlepšie hneď za body tag dáme nasledovný kód.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'MIESTO_PRE_APPID', // App ID
      channelUrl : '//URL_KU_CHANNEL_SUBERU/channel.php', // Súbor kanálu
      status     : true, // kontrolovať status prihlásenia???
      cookie     : true, // zapnúť cookies pre umožnenie práce so sessions
      xfbml      : true  // parsovať XFBML tagy na stránke
    });

  // Načítať celý FB asynchrónne
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/sk_SK/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

Pomocou tohto kódu si sprístupníte FB tagy ako je fb-login a podoné srandičky. Samotným pridaním tlačítka sa však nič nestane, len si Facebook zapíše, že užívateľ povolil aplikácii získať základné údaje. My však počítame s tým, že chceme tých údajov viac, pretože ak užívateľ neexistuje, automaticky ho vytvoríme a prihlásime ho. Vytvoríme si teda funkciu, ktorá nám zavolá funkciu vo Facebook-u na inicializáciu prihlásenia (popup okno). Ide o funkciu FB.login, ktorá obsahuje 2 parametre - callback a options.

function initFBlogin() {
 FB.login(function(response) {
   if (response.authResponse) {
     // ak získame odpoveď (access token a pod.) vieme, že je užívateľ sto pro prihlásený
     console.log('Vitajte, získavam údaje.... ');
     FB.api('/me', function(response) {
       // nakoľko máme access token a ďalšie srandy, vieme pristupovať k údajom, ktoré sme požadovali cez nastavenie extended permisions (dolu v nastaveniac - options - položka scope
       console.log('Super, že si sa prihlásil ' + response.name + '.');

     });
   } else {
     console.log('Užívateľ zrušil prihlasovanie.');
   }
 }, {scope: 'email,user_about_me,user_birthday,user_hometown,user_location,publish_stream,read_friendlists'});
// scope: nastavuje parametre extended permisions
// v nasom pripade: email, narodeniny, domovske mesto, aktualne miesto, moznost publikovat pod menom uzivatela a ziskanie pristupu k zoznamu priatelov

}

Takže ak na nejaký element typu a dáme javascript:initFBlogin() otvorí sa nám popup okno s prihlásením + so žiadosťou o rozšírené práva pre našu aplikáciu. Aby však Vaše stránky vedeli čo robiť, musíme ešte upraviť funkciu tak, aby nám zavolala nejaký script, ktorý skontroluje užívateľa, jeho existenciu a zapísanie session, čím umožníme využívať naše stránky v plnom rozsahu. Dajme tomu, že používame jQuery a teda vieme pekne využiť aj funkciu $.ajax.

Náš kód a funkcia na vyvolanie prihlásenia by potom mohla vyzerať nejako takto:

function initFBlogin() {
 FB.login(function(response) {
   if (response.authResponse) {
     // prihlásenie prebehlo úspešne
     FB.api('/me', function(response) {
       // po prihlásení potrebujeme údaje pre overenie užívateľa
       $.ajax({
          url: 'check-user.php',
          data: response,
          type: 'post',
          dataType: 'json',
          success: function(res) {
             // do res si posielame json data pre lepšiu prácu so systémom.
             if(res.action == 'refresh') {
               // v pripade, ze staci obnovit aktualnu stranku
               top.location.reload();
             }
             if(res.action == 'redirect') {
               // v pripade, ze by sme chceli uzivatela presmerovat na nejaky doplnujuci form
               top.location.replace(res.redirto);
             }
             if(res.action == 'false') {
               // v pripade, ze by nieco prdne {connect na db a pod}
               alert(res.message);
             }
           });

     });
   } else {
     console.log('Užívateľ zrušil prihlasovanie.');
   }
 }, {scope: 'email,user_about_me,user_birthday,user_hometown,user_location,publish_stream,read_friendlists'}); 

}

Ako ste sa dovtípili (lebo ste ešte toho veľa nepopili), budeme potrebovať php súbor, ktorý spracuje dáta, overí užívateľa a vráti niektorý z možných statusov. Ten by mal vyzerať ... Aj keď... Ten by si mal napísať každý sám, predsa len, milión štruktúr a tak. V každom prípade, pre ukážku:

<?php

if($_POST['authResponse']['accessToken']) {
   // includneme facebook sdk
   require_once('facebook.php');
   $facebook = new Facebook(array(
	'appId'=>'', // sem pride appID
	'secret'=>'', // sem app secret
	'cookie'=>'true'
  ));

   // vytvorime connect na databazu
   // ja najcastejsie vyuzivam dibi layer - http://dibiphp.com/cs/
  dibi::connect(array(
    'driver'   => 'mysql',
    'host'     => 'localhost',
    'username' => 'root',
    'password' => '***',
    'database' => 'test',
    'charset'  => 'utf8',
  ));

  $fbuser = $facebook->api('/me');

  $check = dibi::query("SELECT Username FROM users WHERE UserEmail = %s || FBUID = %s",$fbuser['email'],$fbuser['id']);
  if(count($check)==0) {
     // neexistuje ziaden uzivatel s uvedenou adresou, pripadne s uz priradenym identifikatorom FB.
     // musime urobit registraciu
    // vytvorime si pole na insert
    $toInsert = array(
       'UserFullName'=>$fbuser['name'],
       'UserEmail'=>$fbuser['email'],
       'FBUID'=>$fbuser['id'],
       'UserCity'=>$fbuser['hometown']['name'],
       'UserAbout'=>$fbuser['bio'],
       'UserGender'=>$fbuser['gender'],
       'UserBirthdays'=>strtotime($fbuser['birthday']),
    );

    // vytvorime uzivatelovi jeho prve heslo.
    $fbpass = sha1($fbuser['gender'].'|'.$fbuser['id']);
    $toInsert['UserPassword'] = $fbpass;

    $insert = dibi::query("INSERT INTO users",$toInsert);
    if(dibi::affectedRows()==1) {
      $return = array('action'=>'redirect','redirto'=>'/user/profile/change-pass');
      $_SESSION['logged'] = true;
      $_SESSION['user'] = $fbuser;
    } else {
      $return = array('action'=>'false','message'=>'Nepodarilo sa vytvoriť užívateľa.');
    }

  } else {
      $_SESSION['loged'] = true;
      $_SESSION['user'] = $check->fetch();
      unset($_SESSION['user']['UserPassword']);
      $return = array('action'=>'refresh');
  }

} else {
   $return = array('action'=>'false','message'=>'Pravdepodobne neboli odoslané kompletné dáta zo stránok Facebook.com.');
}
echo json_encode($return);
?>

Prosím, nezabúdajme ani na to, že by sme mali kontrolovať to, či nám užívateľ stále ponúka všetky údaje, ktoré potrebujeme. Zároveň treba myslieť aj na to, že by sme mali kontrolovať, či je užívateľ stále prihlásený aj na stránkach Facebook-u. Aby sme toto mohli kontrolovať, musíme si ešte pridať niečo do prvého scriptu. Ide o kontrolu statusu prihlásenia a vyzerá to nasledovne:

FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
	    // užívateľ je stále prihlásený
	    var uid = response.authResponse.userID;
	    var accessToken = response.authResponse.accessToken;	    

	  } else if (response.status === 'not_authorized') {
	    // užívateľ zrušil autorizáciu našej aplikácii, tým pádom by sme ho asi mali kopnúť do zadnice, či?
	  } else {
	    // užívateľ vôbec nie je prihlásený... čo s ním?
	  }
	 });

Želám Vám do nového roku veľmi veľa úspechov a samozrejme čo možno najviac tutoriálov, ktoré budú "na čas" a hlavne... Aby boli kvalitatívne na úrovni, z ktorej sa budete vedieť "vysomáriť".

Záhadný CHANNEL.php fajl

<?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/sk_SK/all.js"></script>
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:
0 0

4 komentáre 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 František Čaník 3.5.2012 22:51:16
Rado: max v .js ;)
0 0 Rado Head 3.5.2012 14:57:25
Mate tam chyby resp chybju zlozene zatvorky nieje spravny pocet otvaracich a zatvaracich a dokonca az v dvoch scriptoch... je to mozne ? alebo halucinujem
0 0 František Čaník 5.2.2012 21:14:10
Jan: Preto je tam este ta javascriptova kontrola, ktora to zistuje, ci uz je status connected ... connected znamena, ze je pripojeny a teda presiel procesom prihlasenia.
0 0 Jan Galek 5.2.2012 02:04:14
Dobrý den, mám menší problém, jak zjistím jestli uživatel aktivoval "aplikaci" a klikl na Přihlášení FB ?

zde v návodu máte if($_POST['authResponse']['accessToken']), ale mě to nefunguje :(, zkoušel jsem i REQUEST, ale také nepomohlo
Zajtra.sk > Programovanie > Seriály > Tutoriál: Prihlásenie cez Facebook step by step 2. časť


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