Autentificare via Facebook in ASP.NET

Publicat de Grigore Ciprian
în C# · Tehnic
— 11 Aug, 2010 at 9:09 am

2 Flares 2 Flares ×

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.

Etichete: asp.net autentificare facebook autentificare facebook asp.net C++Facebook facebook authentification api

— Grigore Ciprian a scris 1 articol

Fondator Area72, ma numesc Grigore Ciprian (pe internet Kyprulez) si sunt pasionat de programare, design si tot ce inseamna domeniul IT. Imi place sa invat lucruri noi si sa ii ajut pe altii prin cunostintele pe care le detin. Mai multe despre mine aici.

3 Comentarii

AlexXxuTzZu spune:

august 11, 2010 la 5:44 pm

multumesc pentru articol, ai explicat destul de bine. keep itup the good work. cheers

Răspunde
Grigore Ciprian spune:

august 12, 2010 la 12:12 am

Mersi pentru apreciere. Cheers

Răspunde
dragoste spune:

iulie 29, 2013 la 6:03 pm

super acest lucru este minunat am gasit ceva la fel aici la WZY imi place

Răspunde