Share
Cele mai multe rețele sociale au instrumente API care permit aproape orice site web să autentifice utilizatorii prin intermediul sistemului lor. În tutorialul de astăzi, vom învăța cum să folosiți aceste instrumente. Utilizând un model de comentariu simplu, utilizatorii vor învăța cum să lase un comentariu în profilurile lor Facebook sau Google.
Pe scurt, voi trece peste aplicația demo. Am o pagină HTML foarte simplă, statică, care arată o fotografie și permite utilizatorului să comenteze. Într-o aplicație reală, probabil că veți salva comentariile într-o bază de date, dar din motive de demonstrație le salvez doar într-un fișier text, fiecare rând reprezentând un comentariu nou. Acest cod nu este deosebit de important până când nu ajungeți la formularul de comentariu.
# index.php ......Adauga un comentariu
Aici vedeți că avem un formular de bază cu patru câmpuri: nume, adresă URL, imagine și comentariu. Am ales să ascund câmpurile url și imagine, deoarece acestea sunt date pe care le vom obține de pe Facebook și Google Friend Connect. Formularul este trimis la un fișier PHP, savecomment.php, pe care nu o voi trece, dar este inclusă în descărcare. În esență, toate datele postate și stochează într-un fișier de date de comentarii existente cu țeavă, "|", caractere care separă fiecare câmp. Din nou, nu o tehnică practică, dar suficientă pentru scopurile noastre. Un pic peste formular vom lista toate comentariile din acest fișier prin includerea unui alt script PHP, readcomments.php.
# index.php ......Comentarii
O ultimă bucată de cod pe care trebuie să ne uităm este JavaScript-ul inclus. Toată autentificarea noastră se face pe partea clientului, așa că am creat application.js să dețin codul responsabil pentru asta și să mă salvez de la scrierea prea multă JavaScript am inclus jQuery (prin Google).
# index.php --- ...
După crearea acestui lucru, putem trece la application.js fișierul menționat anterior. Am hotărât că ar fi mai bine să creezi o funcție pentru fiecare serviciu care a înfășurat toată logica necesară autentificării. Apoi, după ce le-am creat pentru ambele servicii, am extras cod comun pentru a păstra codul concis. După crearea fișierului declarați o funcție numită update_userbox ()
Accentsconagua
# application.js --- // Actualizări generice #userbox cu informații preluate // din funcția de servicii update_userbox (nume, imagine, url, logout) // populează datele în #userbox și arată $ ('# userbox') .html (""+" Această funcție este generică și poate fi utilizată fie cu serviciul, fie cu mai multă primăvară, care poate fi folosită și în altele. Scopul acestui lucru este de a insera HTML într-un div div numit #userbox astfel încât utilizatorul are o înțelegere vizuală că au accesat un serviciu. Aceasta se face prin ascunderea căsuței cu numele și prin afișarea unei imagini de profil de la serviciul la distanță împreună cu numele acestora și printr-o legătură de logout pentru a vă deconecta de la serviciu. De asemenea, în spatele scenei vom completa numele, url și intrările de imagini astfel încât acestea să fie trimise la server împreună cu comentariul pentru salvarea în fișierul bazei noastre de date. Puteți vedea că acest lucru se face prin trecerea în patru variabile:
Toate acestea sunt destul de simple, cu excepția variabilei de ieșire. Acest lucru poate fi explicat atunci când vă uitați la API-urile oferite de FB și GFC. Fiecare are funcția care va notifica serviciul pe care utilizatorul dorește să i-l deconecteze, așa am ales să treacă acel apel în funcția de logout.
Vom începe cu Facebook Connect. Primul lucru pe care trebuie să-l facem este să creați o aplicație pe site-ul dezvoltatorilor Facebook. Pare un pic ciudat la inceput ca trebuie sa cream o aplicatie Facebook pentru acest lucru, dar din punctul meu de vedere, este doar sa primesc cheia API si sa-ti inregistrez URL-urile cu programul lor de dezvoltare.
După ce ați creat aplicația, trebuie să editați câteva setări, în partea stângă a ecranului veți vedea file, faceți clic pe Conectare. Aici trebuie să introduceți Conectați adresa URL care este adresa URL unde există rădăcina site-ului dvs. De asemenea, am ales să încărc o imagine și recomand tuturor site-urilor să facă acest lucru, deoarece vă oferă o anumită marcă vizuală.
Acum puteți salva aceste modificări și vă va duce la pagina cu rezumatul aplicației. Aici găsim cheia API a aplicației, deci mergeți mai departe și copiați-o în clipboard.
Facebook a proiectat API-ul de conectare pentru a lucra în întregime pe partea clientului. Acest tutorial nu va necesita cod de parte server pentru a autentifica utilizatorii. Acest lucru se face prin intermediul unor tehnici complicate AJAX, în care Facebook transmite date înapoi și înapoi prin iframe pentru a eluda aceeași politică de origine implementată de majoritatea browserelor. O parte a acestui proces presupune plasarea pe serverul nostru a unui fișier pe care Facebook îl poate interacționa pentru a ne confirma identitatea. Deci, la cel mai înalt nivel al domeniului dvs. creați un fișier numit xd_receiver.html și introduceți acest cod.
# xd_receiver.html ---
Facebook ne obligă să trecem prin câteva cercuri pentru a obține totul de lucru, mai întâi de care trebuie să includeți un fișier JS de pe site-ul Facebook și să rulați funcția init () în index.php fișier în partea de jos, chiar deasupra închiderii
# index.php ---
Există câteva lucruri la care trebuie să ne uităm în această funcție. În primul rând, asigurați-vă că le înlocuiți FB_API_KEY cu cheia API. Apoi avem un șir reprezentând calea către fișierul nostru de receptor încrucișat, care ar trebui să fie la baza directorului de aplicații. În cele din urmă, putem trece un șir de opțiuni. Vrem să menținem starea de conectare a utilizatorilor, astfel încât să îi spunem lui Facebook să ruleze o funcție auth_using_fb (vom crea acest lucru în câteva momente) dacă utilizatorul este deja conectat la site-ul nostru. Acest lucru înseamnă că, dacă utilizatorul reîncarcă pagina, acesta va afișa în continuare ca fiind conectat, astfel încât să nu fie nevoit să se reînscrie pe fiecare pagină.
Apoi trebuie să creați butonul de conectare real, acest lucru necesită utilizarea XFBML, Facebook Markup Language, care este o extensie a HTML. X indică un cod care este introdus pe site-uri terțe părți și nu pe site-ul Facebook. Undeva pe pagină trebuie să introducem eticheta Fb: buton de conectare și câteva opțiuni.
Am ales să o pun pe lângă numele casetei de text, astfel încât utilizatorul să poată vedea cu ușurință atunci când merge pentru a adăuga un comentariu. Observați că avem două atribute lungime și onlogin. Lungime ne permite să specificăm textul de pe buton și are două opțiuni: scurtă (implicită) și lungă. Scurt spune Conectați și spune lung Conecteaza-te cu Facebook. Onlogin funcționează foarte mult onclick sau onMouseOver și ne permite să executați JS atunci când utilizatorul se autentifică cu succes prin intermediul site-ului nostru prin Facebook. Noi numim aceeași funcție pe care am menționat-o mai devreme, auth_using_fb (), dar înainte de a putea crea ceea ce trebuie să facem încă o schimbare. În partea de sus a paginii în eticheta HTML trebuie să-i spunem browser-ului că folosim mai mult de un limbaj de markup.
# index.php ---
Atributul xmlns specifică spațiul de nume xml pentru document. Primul este standardul xhtml, iar al doilea este noul limbaj de marcare facebook, ceea ce face ca documentul nostru W3C să fie compatibil.
Acum ne vom întoarce application.js și scrieți auth_using_fb () funcţie.
# application.js --- // Funcția Facebook Connect auth_using_fb () // obține datele utilizatorilor din FB var viewer = FB.Facebook.apiClient.fql_query ('SELECT nume, pic_square_with_logo, profile_url FROM user WHERE uid =' + FB .Facebook.apiClient.get_session (). Uid, funcția (rezultate) update_userbox (rezultate [0] .name, rezultate [0] .pic_square_with_logo, results [0] .profile_url, "FB.Connect.logoutAndRedirect .php "; return false; ')); Aceasta este funcția pe care o folosim pentru a interfața cu datele din Facebook și pentru a recupera datele utilizatorilor. Butonul de conectare pe care l-am creat mai devreme are de fapt funcționalitatea pentru semnarea utilizatorului în Facebook, dar dacă doriți să luați informațiile despre utilizator, trebuie să îl solicitați separat. Prima linie de cod în funcție este un apel la metoda API Facebook, fql_query (). Această funcție ne permite să folosim limbajul de interogări SQL ca Facebook pentru a prelua datele utilizatorului. Avem nevoie doar de cele trei coloane pe care le-am discutat mai devreme: nume, imagine și url. Wiki-ul Facebook Developer are o pagină care conține toate tabelele pe care le puteți căuta informații. Este important să adăugați UNDE care limitează la utilizatorul conectat în prezent. Al doilea parametru al lui fql_query este o funcție de apel invers care este trecut printr-o serie de rezultate. Trebuie doar să luăm primul rezultat în matrice și să trimitem fiecare proprietate către noi update_userbox () funcția împreună cu apelul JS de deconectare. Este important să includeți "return false"; după apelul logoutAndRedirect (), deoarece altfel determină reîncărcarea paginii înainte ca API să poată deconecta utilizatorul.
Și, uimitor, este tot ce trebuie să facem pentru Facebook Connect pentru a lucra, continuați și încercați!
La fel ca Facebook Connect, Google Friend Connect ne cere să ne înscriem pentru o cheie API. Acest lucru este mult mai rapid decât Facebook Connect, deoarece acestea au un expert ușor de utilizat care vă umblă prin toate. Mai întâi trebuie să furnizați numele aplicației și URL-ul la fel ca în Facebook Connect.
În continuare, vă instruiește să încărcați câteva fișiere pe serverul dvs. pentru asistență AJAX pe mai multe domenii, din nou la fel ca Facebook Connect. Văzând o tendință aici?
Ultimul pas va verifica dacă totul este configurat corect. Google cheamă cheia API ID-ul site-ului, dar acționează exact aceeași chei API Facebook.
Apoi trebuie să includeți fișierele JS corecte în partea de jos a paginii noastre după fișierele Facebook. De asemenea, trebuie să implementăm metoda initOpenSocialApi () a API-ului Friend Connect Google. Acest lucru necesită un parametru sub forma unui set de opțiuni. Singura opțiune necesară este teren care este ID-ul site-ului pe care l-am colectat mai devreme.
# index.php ---
De asemenea, trebuie să afișăm o pagină într-o funcție de apel inversă pentru a fi executată atunci când utilizatorul este autentificat cu Google Friend Connect. În plus, trebuie să apelăm o funcție care face butonul pentru semn, aceasta este foarte asemănătoare cu marcajul XFBML pe care l-am folosit mai devreme, cu excepția faptului că Google a hotărât să rămână cu HTML simplu. Această funcție presupune transmiterea unui ID DOM al elementului în care se dorește crearea butonului de conectare, am făcut un div imediat sub butonul de autentificare FB cu un id de google-logare. De asemenea, trecem în stil: „lung“ astfel încât să fie similar cu butonul Facebook.
