// Rodolfo Fadino

A integração com as redes sociais é sem dúvida nenhuma um excelente recurso para trazer usuários, divulgar a aplicação e transformar nossas aplicações em uma extensão das redes sociais.

O Facebook é uma destas redes, ele possui diversas funcionalidades em suas APIs, elas são expostas através de Rest, ou seja, com simples WebRequest’s é possivel acessar e fazer uso de toda a api.

Entretanto exitem diversos SDK’s que faciliam o uso da api, no caso da API do Facebook um dos pincipais projetos de SDK está no Codeplex, o Facebook C# SDK possui diversas funções e recursos para facilitar a integração.

Principais recursos:

• NuGet Packages
• Compatibilidade com toda a API REST e Graph do Facebook
• Suporta os métodos de autenticação do Facebook
• Compatível com o SDK JavaScript oficial do Facebook

Começando:
Para começar a testar o SDK vou criar um projeto em ASP.NET MVC 3.0

Selecionei um projeto com o Template de Internet Aplication, utilizando Razor como View engine:

Instalando:

Eu poderia baixar a DLL do projeto do codeplex, mais eu optei por instalar o SDK via Nuget, para isso abii o Package Manager Console, e digitei o segunte comando:

Install-Package FacebookWebMVC

 

 

Apos isso, já podemos observar algumas bibliotecas referenciadas no projeto:

• Facebook
• Facebook.Web
• Facebook.Web.Mvc

Programando

Vou criar uma aplicação no Facebook (http://developers.facebook.com/)

 

 

Nos utilizaremos esta aplicação para integrar e consultar os dados dos usuários via API. para isso precisaremos configurar a url do WebSite de nossa aplicação no Facebook, inicialmente eu configurei com o valor: http://localhost:2723/

 

O próximo passo será configurar os valores do web.config de nossa aplicação, que após a intalação do packge apresentou uma seção da seguinte maneira:

 

 

Essa seção conta com duas propriedades principais que devem ser preenchidas. a AppID e a AppSecret do Facebook, que eu preenchi com os valores do Aplicativo que eu criei no Facebook:

 

 

Já podemos começar a desenvolver a lógica da nossa aplicação.

No Home Controller, irei deixa-lo com 3 Actions Result:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult MensagemPost(string message)
    {
        return RedirectToAction("Index", new { success = true });
    }

    public ActionResult LogOn(string returnUrl)
    {
        return View();
    }

}

Vamos utilizar um dos recursos desse SDK, a possibilidade de decorar uma Action com o FacebookAuthorize, para isso criei uma propriedade com as permissões que queremos em nossa aplicação e decorei duas Actions para utiliza-la:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Facebook.Web.Mvc;
using Facebook.Web;
using Facebook;
using System.Dynamic;

namespace DemoFacebook.MVC.SDK.Controllers
{
    public class HomeController : Controller
    {
        private const string ExtendedPermissions = "user_about_me,publish_stream";

        [FacebookAuthorize(Permissions = ExtendedPermissions, LoginUrl = "/Home/LogOn?ReturnUrl=~/Home")]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [FacebookAuthorize(Permissions = ExtendedPermissions, LoginUrl = "/Home/LogOn?ReturnUrl=~/Home")]
        public ActionResult MensagemPost(string message)
        {
            return RedirectToAction("Index", new { success = true });
        }

        public ActionResult LogOn(string returnUrl)
        {
            return View();
        }

    }
}

Precisamos desenvolver a parte de login da aplicação para isso vamos programar na Action LogOn:

public ActionResult LogOn(string returnUrl)
{
    var fbWebContext = new FacebookWebContext(FacebookApplication.Current, ControllerContext.HttpContext);

    if (fbWebContext.IsAuthorized(ExtendedPermissions.Split(',')))
    {
        if (!string.IsNullOrWhiteSpace(returnUrl))
        {
            if (Url.IsLocalUrl(returnUrl))
            {
                return new RedirectResult(returnUrl);
            }
        }

        return RedirectToAction("Index", "Home");
    }

    ViewBag.ExtendedPermissions = ExtendedPermissions;
    return View();
}

Vamos adicionar a View LogOn.cshtml, na pasta /Views/Home/ e nela utilizar a biblotica js do Facebook para abrir o modal de login:

@{
    ViewBag.Title = "LogOn";
}

<h2>LogOn</h2>

<input type="button" id="fblogin"  value="Login to Facebook" disabled="disabled"/>

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: '@Facebook.FacebookApplication.Current.AppId',
            channelURL: '@Request.Url.Scheme://@Request.Url.Authority@Url.Content("~/fbchannel.ashx")', // Channel File
            cookie: true,
            xfbml: true,
            oauth: true
        });

        // #region Login to Facebook using FB.login() method
        function facebooklogin() {
            FB.login(function (response) {
                if (response.authResponse) {
                    // user authorized
                    window.location.reload();
                } else {
                    // user cancelled
                }
            }, { scope: '@ViewBag.ExtendedPermissions' });
        };

        $(function () {
            // make the button is only enabled after the facebook js sdk has been loaded.
            $('#fblogin').attr('disabled', false).click(facebooklogin);
        });
        // #endregion

        // #region Login using Facebook Login Button plugin
        FB.Event.subscribe('auth.login', function (response) {
            window.location.reload();
        });
        FB.Event.subscribe('auth.logout', function (response) {
            window.location.reload();
        });
        // #endregion
    };

    // Load the Facebook JS SDK Asynchronously
    (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/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
</script>

 

Com isso já temos o login de nossa aplicação funcionando, entretanto como estamos em um ambiente de desenvolvimento podem ocorrer alguns problemas ao fazer login em certos navegadores, pois estamos utilizando como url da nossa aplicação o http://localhost:2723/. Ex de erro:

 

 

Para resolver isso configurei o dominio app.dominioteste.com (Linha 20)  no arquivo hosts da minha maquina, que fica geralmente no C:\Windows\System32\drivers\etc\hosts

 

 

Após esta configuração eu criei um website no IIS na porta 80 que responde por: app.dominioteste.com

 

 

Após isso eu configurei minha aplicação no Facebook com esse dominio:

 

 

O último passo que tive que fazer para isso funcionar foi configurar meu projeto (no Visual Studio 2010)  para executar no IIS:

 

Pronto nosso projeto está acessível e não teremos problemas com a url de autenticação.

 

Para finalizar vamos desenvolver o que será o funcionamento de nossa aplicação: trazer dados do usuário e postar uma mensagem.

Na Action Index vamos trazer os dados do usuário que está autenticado:

[FacebookAuthorize(Permissions = ExtendedPermissions, LoginUrl = "/Home/LogOn?ReturnUrl=~/Home")]
public ActionResult Index()
{
    var fb = new FacebookWebClient();
    dynamic me = fb.Get("me");

    ViewBag.ProfilePictureUrl = string.Format("http://graph.facebok.com/{0}/picture", me.id);
    ViewBag.Name = me.name;
    ViewBag.FirstName = me.first_name;
    ViewBag.LastName = me.last_name;

    ViewBag.MessagePostSuccess = Request.QueryString.AllKeys.Contains("success") &&
                                    Request.QueryString["success"] == "True";

    return View();
}

Agora na Action MensagemPost vamos postar um mensagem no wall do usuário

[HttpPost]
[FacebookAuthorize(Permissions = ExtendedPermissions, LoginUrl = "/Home/LogOn?ReturnUrl=~/Home")]
public ActionResult MensagemPost(string message)
{
    var fb = new FacebookWebClient();

    dynamic parameters = new ExpandoObject();
    parameters.message = message;

    dynamic result = fb.Post("me/feed", parameters);

    return RedirectToAction("Index", new { success = true });
}

Finalmente vamos desenvolver a View Index.cshtml que exibirá os dados do usuário e terá um formulário para postar a mensagem no Facebook.

@{
    ViewBag.Title = "Home Page";
}

<strong>@ViewBag.Name</strong>

<br/>

<img src="@ViewBag.ProfilePictureUrl"/>

<table>
    <tr>
        <td>Nome:</td>
        <td>@ViewBag.FirstName</td>
    </tr>
    <tr>
        <td>Sobrenome:</td>
        <td>@ViewBag.LastName</td>
    </tr>
</table>

<br/>

@using (Html.BeginForm("MensagemPost", "Home"))
{
    <label for="message">Mensagem</label><br/>
    <textarea id="message" name="message" style="width: 300px; height:100px;"></textarea><br/>
    <input type="submit" value="Post To Wall"/>
}

@if (ViewBag.MessagePostSuccess) {
    <div>Mensagem enviada com sucesso.</div>
}

 

Com tudo isso nos já temos nossa aplicação funcionando

as demos podem ser encontradas em:

Download: https://github.com/rodolfofadino/FacebookDemo/zipball/master

Projeto: https://github.com/rodolfofadino/FacebookDemo

 

Espero que este post seja útil,

estou a disposição para dúvidas, críticas e sugestões

tks

Rodolfo