ASP.NET - Login con Facebook

Oggi è molto comodo demandare a provider di autenticazione esterni l'autenticazione (o login).
Il provider più diffuso, nonché quello che contiene il maggior numero di utenti già registrati è Facebook.
Vediamo come integrare in un sito web l'autenticazione di Facebook.

Cosa fare su Facebook

Registrare su Facebook una nuova applicazione, collegandosi al link https://developers.facebook.com/apps/

Selezionare il bottone "Aggiungi una nuova applicazione", e quindi selezionare l'opzione SITO WEB
Dare un nome univoco all'applicazione (suggerisco di chiamarla come il sito per il quale si sta configurando il servizio)
Compilate le informazioni richieste allo step successivo che sono: la vostra email e una categoria per l'applicazione
Una volta inserite queste info potete selezionare lo SKIP QUICK START e andare direttamente alla pagina delle impostazioni
Prendere nota di: ID APPLICAZIONE (Application ID), e CHIAVE SEGRETA (Secret key)
Nel campo DOMINI APPLICAZIONE inserite il dominio del vostro sito (ad esempio www.polipone.com)
Selezionate il pulsante AGGIUNGI PIATTAFORMA e scegliete SITO WEB
Nel campo URL DEL SITO inserite l'url completo del vostro sito, seguito da "&#39" (ad esempio http://www.polipone.com/&#39)

Cosa fare su Visual Studio

Inserire nel web.config due nuovi app setting, che contengo rispettivamente l'ID APPLICAZIONE e la CHIAVE SEGRETA, ottenuti registrando l'applicazione su Facebook

  
      <appsettings>
        <add key="FacebookAppId" value="xxxxxxxxxxxx" />
        <add key="FacebookAppSecret" value="xxxxxxxxxxxxxxxxxxxxxxxxxx" />
      </appsettings>

Creare la seguente classe CFacebook nel progetto

using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Script.Serialization;

/// <summary>
/// Summary description for CFacebook
/// </summary>
public class CFacebook
{
    public class User
    {
        public string id { get; set; }
        public string first_name { get; set; }
        public string last_name { get; set; }
        public string link { get; set; }
        public string username { get; set; }
        public string gender { get; set; }
        public string locale { get; set; }
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="code"></param>
    /// <param name="redirPage">The page that will use the data. Absolute url starting from root. Example: /account/user.aspx</param>
    /// <returns></returns>
    public static List<CFacebook.User> GetUserData(string code, string redirPage)
    {
        // Exchange the code for an access token
        Uri targetUri = new Uri("https://graph.facebook.com/oauth/access_token?client_id=" + 
            ConfigurationManager.AppSettings["FacebookAppId"] + "&client_secret=" + 
            ConfigurationManager.AppSettings["FacebookAppSecret"] + "&redirect_uri=http://" + 
            HttpContext.Current.Request.ServerVariables["SERVER_NAME"] + ":" + 
            HttpContext.Current.Request.ServerVariables["SERVER_PORT"] + 
            redirPage +"&code=" + code);
        HttpWebRequest at = (HttpWebRequest)HttpWebRequest.Create(targetUri);

        System.IO.StreamReader str = new System.IO.StreamReader(at.GetResponse().GetResponseStream());
        string token = str.ReadToEnd().ToString().Replace("access_token=", "");

        // Split the access token and expiration from the single string
        string[] combined = token.Split('&');
        string accessToken = combined[0];

        // Exchange the code for an extended access token
        Uri eatTargetUri = new Uri("https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id=" + ConfigurationManager.AppSettings["FacebookAppId"] + "&client_secret=" + ConfigurationManager.AppSettings["FacebookAppSecret"] + "&fb_exchange_token=" + accessToken);
        HttpWebRequest eat = (HttpWebRequest)HttpWebRequest.Create(eatTargetUri);

        StreamReader eatStr = new StreamReader(eat.GetResponse().GetResponseStream());
        string eatToken = eatStr.ReadToEnd().ToString().Replace("access_token=", "");

        // Split the access token and expiration from the single string
        string[] eatWords = eatToken.Split('&');
        string extendedAccessToken = eatWords[0];

        // Request the Facebook user information
        Uri targetUserUri = new Uri("https://graph.facebook.com/me?fields=first_name,last_name,gender,locale,link&access_token=" + accessToken);
        HttpWebRequest user = (HttpWebRequest)HttpWebRequest.Create(targetUserUri);

        // Read the returned JSON object response
        StreamReader userInfo = new StreamReader(user.GetResponse().GetResponseStream());
        string jsonResponse = string.Empty;
        jsonResponse = userInfo.ReadToEnd();

        // Deserialize and convert the JSON object to the Facebook.User object type
        JavaScriptSerializer sr = new JavaScriptSerializer();
        string jsondata = jsonResponse;
        CFacebook.User converted = sr.Deserialize<CFacebook.User>(jsondata);

        // Write the user data to a List
        List<CFacebook.User> currentUser = new List<CFacebook.User>();
        currentUser.Add(converted);

        // Return the current Facebook user
        return currentUser;
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="redirPage">The page that will use the data. Absolute url starting from root. Example: /account/user.aspx</param>
    /// <returns></returns>
    public static string getUrlLogin(string redirPage)
    {
        string myRes = "https://www.facebook.com/v2.4/dialog/oauth/?client_id=" + 
            ConfigurationManager.AppSettings["FacebookAppId"] + "&redirect_uri=http://" + 
            HttpContext.Current.Request.ServerVariables["SERVER_NAME"] + ":" + 
            HttpContext.Current.Request.ServerVariables["SERVER_PORT"] + 
            redirPage + "&response_type=code&state=1";

        return myRes;
    }

}

Scegliete ora la pagina in cui volete inserire il link che chiamerete, ad esempio, LOGIN CON FACEBOOK
Nel code behind di questa pagina, all'evento Page_Load, valorizzare l'url col metodo getUrlLogin della classe CFacebook.

         hlFacebookLogin.NavigateUrl = CFacebook.getUrlLogin("/pages/loginFacebook.aspx");

Il metodo precedente ha un parametro che deve essere valorizzato col il path assoluto della pagina che poi verrà richiamata da Facebook dopo il login, e alla quale Facebook passerà i dati dell'utente, che serviranno a noi per gestire la nostra logica applicativa.
A questo punto abbiamo una pagina che contiene il link "LOGIN CON FACEBOOK".

Quando l'utente lo seleziona viene reindirizzato a Facebook.
Se è la prima volta che accede dal nostro sito, Facebook chiederà il permesso all'utente di usare la nostra applicazione di Facebook.
Quindi, dopo che l'utente avrà accettato, Facebook reindirizzerà il browser alla pagina che abbiamo specificato prima (nel nostro esempio loginFacebook.aspx)

Pagina loginFacebook.aspx

Questa pagina avrà il seguente codice nell'evento Page_Load:

if (Request.QueryString["code"] != "") { List<cfacebook.user> myUser = CFacebook.GetUserData(Request.QueryString["code"], "/pages/loginFacebook.aspx"); //CREO LA SESSIONE CON I DATI PRESENTI IN myUser[0], che sono //myUser[0].id - identificativo univoco dell'utente, valido come chiave //myUser[0].first_name - Nome //myUser[0].last_name - Cognome //myUser[0].link - link alla pagina facebook dell'utente //myUser[0].gender - sesso //myUser[0].locale - lingua dell'utente }

Un grazie particolare va a Nick Pinheiro

Attenzione

Accedi con Google

ASP.NET - Login con Facebook

Cosa fare su Facebook

Cosa fare su Visual Studio

Notifiche