Autentificare via Facebook in ASP.NET
3
Nota editorului : Articolul a fost publicat initial in limba engleza pe Area72 si tradus de autorul acestuia.
Recent am intampinat mici obstacole in incercarea de a construi un sistem de autentificare prin Facebook. In acest articol va voi explica fiecare aspect ce trebuie sa il stiti in legatura cu acest subiect.
1. Inregistrarea aplicatiei
Accesati developers.facebook.com si alegeti-va numele site-ului(poate fi orice) si URL-ul acestuia(daca testati local, introduceti „http://localhost/”). Dupa ce ati terminat, apasati pe „Create application”.
Imediat va vor fi afisate setarile aplicatiei. Tot ce va trebuie pentru moment este ID-ul aplicatiei (appID).In cazul meu „125512450828469”.
2. HTML-ul
2.1.Namespace-ul Facebook
Adaugati urmatorul namespace documentului HTML -> xmlns:fb=”http://www.facebook.com/2008/fbml” xml:lang=”en”
Asadar, eticheta html trebuie sa arate in felul urmator
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
2.2. Script-urile Facebook
Adaugati urmatoarele linii la sfarsitul paginii:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'ID-ul aplicatiei aici', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('auth.sessionChange', function (response) {
if (response.session) {
// Utilizatorul s-a autentificat, un nou cookie a fost creat
} else {
// User-ul a iesit, cookie-ul a fost sters
}
});
</script>
Introduceti ID-ul aplicatiei in dreptul proprietatii „appId”.
2.3. Butonul de autentificare Facebook
Ultimul pas in ceea ce priveste HTML-ul este adaugarea butonului de atentificare Facebook. Acesta poate fi plasat oriunde in pagina si are urmatoarea forma:
<fb:login-button>Textul dorit pe buton</fb:login-button>
Puteti introduce orice text doriti sa apara pe buton in interiorul etichetei. Pentru a avea acces la e-mail-ul (ceea ce ne intereseaza pentru a face uz de el in aplicatia noastra) utilizatorului, adaugati atributul „perms” cu valoarea „email”. Versiunea finala:
<fb:login-button perms="email">Autentifica-te via Facebook!</fb:login-button>
3. Codul si cum lucreaza
private string FacebookLogin()
{
string appId = "ID-ul aplicatiei aici";
string cookieValue, accessToken, uid, url, userInformation, email = null;
Regex getValues;
Match infoMatch;
MatchCollection valuesCollection;
WebClient client;
try
{
// Ia cookie-ul
cookieValue = Request.Cookies["fbs_" + appId].Value;
// Ia valorile
getValues = new Regex(@"(?<==)[^&]+");
valuesCollection = getValues.Matches(cookieValue);
/* access_token-ul si uid-ul sunt primii, respectiv ultimii
parametri din cookie */
accessToken = valuesCollection[0].ToString();
uid = valuesCollection[5].ToString().Replace(@"""", "");
// Construim URL-ul si in descarcam
url = "https://graph.facebook.com/" + uid +
"?access_token=" + accessToken;
client = new WebClient();
userInformation = client.DownloadString(url);
// Luam adresa de e-mail
getValues = new Regex("(?<=\"email\":\")(.+?)(?=\")");
infoMatch = getValues.Match(userInformation);
email = infoMatch.Value;
}
catch (Exception) { }
return email;
}
Inlocuiti „appID” cu al vostru. Apasati pe buton si autentificati-va cu un cont valid Facebook. In acest moment a fost creat un nou cookie sub numele „fbs_” + appID ce detine informatiile necesare.
Asa arata in cazul meu:
„access_token=125512450828469%7C2.qi_hzJprQ7qGp7NJfFQwLw__.3600.1281441600-
100000714527321%7CXqRVpjBgLyZ0MQ4r7_GZmY4CpOw.&expires=1281441600&secret=T2bCRUnZrziKQxGAFAkQTg__&session_key=2.qi_hzJprQ7qGp7NJfFQwLw__.3600.1281441600-100000714527321&sig=0cd8f3dd46fc23d9f1e66b57a9debea6&uid=100000714527321”
Practic, ne trebuie 2 valori: access token-ul si uid-ul, deoarece acestea sunt necesare pentru accesarea informatiilor utilizatorului in Graph-ul Facebook:
„https://graph.facebook.com/” + uid + „?access_token=” + access token;
Pentru a le extrage am folosit intai un mic Regex ((?<==)[^&]+) pentru a le extrage pe toate.
Dupa ce aveti toate valorile, extrageti doar access token-ul (prima valoare din colectie) si uid-ul (ultima valoare din colectie).
Acum ca le avem, construim URL-ul dupa modelul de mai sus. Daca sunteti curiosi sa accesati adresa, veti vedea datele returnate sub forma JSON, organizate ca: „parametru”: „valoare”.
Utilizand ultimul Regex, (?<=\”email\”:\”)(.+?)(?=\”) obtineti valoarea e-mail-ului exact pe care veti opera. Acum depinde de ceea ce vreti sa faceti cu adresa de e-mail a utilizatorului. Spre exemplu puteti vedea daca e-mail-ul este inregistrat in baza de date si sa il autentificati, sau daca nu exista sa-l redirectionati spre inregistrare.
Spre ca ati avut ce invata din acest articol.
Daca acest articol contine o greseala, selecteaza cuvintele sau fraza gresita si tasteaza combinatia de taste Shift + Enter sau apasa click aici pentru a o raporta. Multumim!
multumesc pentru articol, ai explicat destul de bine. keep itup the good work. cheers
Mersi pentru apreciere. 🙂 Cheers
super acest lucru este minunat am gasit ceva la fel aici la WZY 🙂 imi place