Este artigo foi traduzido por máquina.
Cutting Edge
Programação essencial para o Facebook: Criando um Cliente do Windows
.jpg "Dino Esposito")
Na minha coluna anterior, abordei as noções básicas de programação do Facebook no contexto de um site — especificamente um site ASP.NET MVC Web (você pode ler o artigo em msdn.microsoft.com/magazine/jj863128). Como você pode imaginar, o uso da API do Facebook não está limitado a aplicações Web, mesmo que um dos seus mais comum usa é apenas para autenticar usuários de um site novo de uma forma "suave".
Nesta coluna, criarei um aplicativo de cliente do Windows Presentation Foundation (WPF) que usa a API de Facebook para autenticar usuários e postar atualizações com fotos. Porque a Web é um ambiente diferente da área de trabalho, esta coluna obviamente será diferente do que eu escrevi no mês passado. A API do Facebook, no entanto, é o mesmo. Você pode obter o SDK C# Facebook via NuGet (consulte facebookapi.codeplex.com para mais detalhes sobre a API do Facebook para C# / desenvolvedores .NET).
Apps de integração com redes sociais
Maioria das redes sociais têm uma arquitetura semelhante. Interação entre os usuários e o motor da rede social acontece em qualquer uma das duas maneiras a seguir: diretamente através do site principal (por exemplo, o site Twitter ou Facebook) ou através da mediação de um aplicativo hospedado internamente pelo site de rede social. Por razões de clareza, vou me referir estes apps como conectores.
Um aplicativo de cliente (site da Web, WPF ou Windows Phone) só pode interagir com o motor da rede social através da mediação de um conector. Para o código de exemplo que acompanha esta coluna, vou usar um conector do Facebook chamado Memento (Observe que o código, fornecido, por exemplo, efeitos, vem como um projeto único, não é uma solução completa e usa o Visual Studio 2010). O nome Memento — e seu ícone relacionado — aparecem como rodapé de quaisquer mensagens de parede feitas por qualquer aplicativo de cliente usando o Memento para se conectar ao Facebook. Você pode criar um conector para Facebook no developers.facebook.com/apps.
Conectores caracterizam-se por um par de seqüências de caracteres únicas — app chave e segredo — e, mais interessante para os nossos propósitos, pode servir uma variedade de aplicativos de cliente, se Web, móvel ou desktop. Figura 1 resume a arquitetura geral de redes sociais, quando se trata de interação.
.png)
Figura 1 o modelo de interação de redes sociais
No final, qualquer aplicativos de usuário que precisam se integrar com redes sociais mais populares (por exemplo, Facebook, Twitter ou Foursquare) baseiam-se essencialmente como clientes de um app do conector de rede social.
Para um aplicativo, integração com uma rede social essencialmente significa acessar as funcionalidades de rede social em nome de um usuário registrado. Trata-se de algumas ações: autenticação de usuários contra a rede social e realizando a ação real, como fazer um check-in para um determinado local, postando-se na parede do usuário ou twittar.
Esta é a essência da integração de uma rede social API em um aplicativo personalizado, e, como se vê, não pode ser limitado a apenas Web apps.
Diferenças de um aplicativo do Windows
Na coluna do mês passado, discuti primeiro como autenticar usuários de um site através do Facebook e, em seguida, apresentei alguns códigos para postar ambos interativamente e programaticamente a parede do usuário. Afixação à parede de um usuário não requer uma diferente abordagem se feito a partir de um aplicativo do Windows; autenticação, em vez disso, necessita de alguns ajustes.
Uma rede social é essencialmente um aplicativo Web e expõe os serviços de autenticação via protocolo OAuth. Um app que quer autenticar seus usuários através de contas no Facebook, por exemplo, precisa fazer uma chamada HTTP para algum ponto de extremidade do Facebook. O ponto de extremidade, no entanto, retorna uma página HTML para o usuário real interagir com inserindo credenciais e autorizando o conector para operar em seu nome (ver Figura 2).
.png)
Figura 2 o conector do Memento explicitamente solicita ao usuário para permissões
A parte que é diferente em um Windows ou cenário móvel, comparado a um aplicativo Web é como você lida com o redirecionamento para a página HTML que a rede social fornece credenciais e permissões.
Ainda outro cliente de Windows do Facebook
Vamos criar um projeto do WPF e adicionar um pouco de marcação XAML para a janela principal. No mínimo, você precisa ter um par de botões para acionar um rótulo para exibir o nome do usuário conectado no momento, o login e processo de logout. Além disso, você pode ter um elemento de imagem para exibir a imagem do usuário atual. O que mais? Vejamos o código que você colocar no manipulador click Login:
var loginUrl = FbHelpers.GetLoginUrl();
O primeiro passo é obter a URL de login do Facebook. O código para obter a URL é o mesmo que você usaria em um cenário de Web, como mostrado na Figura 3.
Código da Figura 3 para obter a URL de Login
public static String GetLoginUrl() { var client = new FacebookClient(); var fbLoginUri = client.GetLoginUrl(new { client_id = ConfigurationManager.AppSettings["fb_key"], redirect_uri = "https://www.facebook.com/connect/login_success.html", response_type = "code", display = "popup", scope = "email,publish_stream" }); return fbLoginUri.ToString(); }
Como você pode notar, o parâmetro de redirect_uri (obrigatório) aponta para um ponto de extremidade de sucesso do Facebook. Que é a página inicial depois que o processo de login foi encerrado. Em um cenário de Web você iria usar a página atual, para que o usuário primeiro é redirecionado para o site do Facebook e depois voltar para a página original do solicitante.
O método GetLoginUrl apenas você obtém o URL para chamar logar. Em um cenário de Web, você simplesmente chamar um redirecionamento para alternar para a nova página e exibir a UI típico do Facebook para login ou — se o usuário já está conectado no computador em uso — a página de permissão conforme Figura 2. Para conseguir o mesmo em um aplicativo do Windows, você precisa de um controle do WebBrowser inicialmente oculto na interface de usuário. Aqui está o código completo para o manipulador click do botão de login do aplicativo:
public void Login() { var loginUrl = FbHelpers.GetLoginUrl(); ShowBrowser = true; view.Browser.Navigate(loginUrl); }
Disponível para download o aplicativo de exemplo usa o padrão Model-View-ViewModel (MVVM) abstrair detalhes de interface do usuário afastados. Portanto, definir ShowBrowser como true, apenas tem o efeito de transformar a visibilidade do controle WebBrowser. Finalmente, o método Navigate direciona o componente para a URL especificada. Figura 4 mostra o status do aplicativo de amostra antes e após o login clique em.
.png)
Figura 4-primeira etapa de Login Facebook
O processo de autenticação pode dar até dois passos. Se o usuário já está conectado à rede social, o navegador recebe diretamente a página de destino. Se o usuário não está conectado, a página mostrada na Figura 4 é apresentado. No entanto, se o usuário não está associado com o conector sendo usado o aplicativo do cliente e, em seguida, uma tela intermediária como aquele mostrado no Figura 2 pede explicitamente conceder permissões.
Como você lida com o carregamento de páginas no componente WebBrowser? Você basicamente precisa de um manipulador de evento Navigated:
void facebookBrowser_Navigated(Object sender, NavigationEventArgs e) { var fb = new FacebookClient(); FacebookOAuthResult oauthResult; if (!fb.TryParseOAuthCallbackUrl(e.Uri, out oauthResult)) return; if (oauthResult.IsSuccess) _viewPresenter.LoginSucceeded(oauthResult); else _viewPresenter.LoginFailed(oauthResult); }
Facebook indica se o processo de login concluída com êxito ou não. Note-se que o logon falhará se o usuário simplesmente nega permissões solicitadas ao conector. Se o logon falhar, basta reiniciar a interface do usuário, ocultando o navegador da Web e exibir algum feedback para o usuário. É muito mais interessante quando o logon é bem-sucedida, como mostrado na Figura 5.
Figura 5 após um logon bem-sucedido
public void LoginSucceeded(FacebookOAuthResult oauthResult) { // Hide the Web browser ShowBrowser = false; // Grab the access token (necessary for further operations) var token = FbHelpers.GetAccessToken(oauthResult); Token = token; // Grab user information dynamic user = FbHelpers.GetUser(token); // Update the user interface UserName = String.Format("{0} {1}", user.first_name, user.last_name); UserPicture = user.picture; IsLogged = true; }
O código em Figura 5 é parecido com o que você precisa usar em um cenário de Web. Note que uma vez que o usuário tem conectado com êxito, o aplicativo ainda não está ainda pronto para operar em nome do usuário. Além disso, o app ainda não sabe nada sobre o usuário — nem mesmo o nome do usuário ou algum tipo de identificação. Isso significa que dados persistentes de autenticação não não possíveis ainda. Portanto, uma outra etapa é obrigatória para cenários Web e do Windows: obter o token de acesso.
O Token de acesso
O token de acesso é uma seqüência de caracteres que você começa a partir da rede social em troca de um código de login bem-sucedido. O código de login simplesmente indica que o usuário que procedeu com autenticação é conhecido na rede. O código de acesso une a identidade do usuário e o conector. O código de acesso dirá ao mecanismo de rede social, se o aplicativo de usuário tem suficiente permissão para executar a operação solicitada em nome desse usuário. O mesmo usuário tem um token de acesso diferente para conectores diferentes.
Figura 6 mostra o código C# para obter o acesso token após um logon bem-sucedido do OAuth.
Figura 6 código para obter acesso Token após Login OAuth bem-sucedido
public static String GetAccessToken(FacebookOAuthResult oauthResult) { var client = new FacebookClient(); dynamic result = client.Get("/oauth/access_token", new { client_id = ConfigurationManager.AppSettings["fb_key"], client_secret = ConfigurationManager.AppSettings["fb_secret"], redirect_uri = "https://www.facebook.../login_success.html", code = oauthResult.Code }); return result.access_token; }
Em um aplicativo da Web, talvez queira persistir o token de acesso em um cookie personalizado ou como dados extras em um cookie de autenticação personalizada gerenciado por um objeto IPrincipal personalizada. Em um cenário de Windows, convém recorrer ao armazenamento local. Quando o usuário fizer fora de um aplicativo do Windows, você simplesmente limpa todos os dados armazenados. Uma vez que você prende o token de acesso para um determinado usuário e conector, você está pronto para executar qualquer operação que cai sob as permissões concedidas, conforme mostrado no Figura 2.
Um tipo comum de rede social app "escuta" algum feed e envia automaticamente em nome do mesmo usuário. Neste caso, você pegar o token de acesso de uma vez e manter sobre a execução do aplicativo até que o usuário revoga permissões. Uma vez que você prende o token de acesso, você não precisa lidar com a autenticação enquanto o usuário por trás o token é realmente conectado à rede social no computador.
Postagem de Status e fotos
Figura 7 mostra a interface do usuário do aplicativo WPF amostra, uma vez que o usuário está conectado com êxito para o Facebook e o token de acesso é armazenado com segurança. A interface do usuário inclui uma caixa de texto e um botão para postar. Como você pode ver, a interface do usuário também define um botão para navegar e seleciona uma imagem JPEG de disco local.
.png)
Figura 7 postagem do cliente amostra App
O código em Figura 8 mostra como postar uma atualização com uma imagem anexada.
Figura 8 código para postar uma atualização com uma imagem anexada
public static void PostWithPhoto( String token, String status, String photoPath) { var client = new FacebookClient(token); using (var stream = File.OpenRead(photoPath)) { client.Post("me/photos", new { message = status, file = new FacebookMediaStream { ContentType = "image/jpg", FileName = Path.GetFileName(photoPath) }.SetValue(stream) }); } }
Em Figura 7 você vê a atualização e a foto postada a minha timeline. Observe que o nome do conector usado é apresentado sob o nome do autor.
A seguir: JavaScript
Neste artigo, eu construí um aplicativo WPF para postar no Facebook em nome de um usuário. Para construir um aplicativo móvel, você segue o mesmo padrão que discutimos aqui. Note que o padrão é válido independentemente da plataforma móvel da escolha. Com sucesso criei Windows Phone e Android apps assim mesmo. Minha próxima coluna mostrará como usar JavaScript para programa Facebook.
Dino Esposito é o autor de “Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) e “Programming ASP.NET MVC 3” (Microsoft Press, 2011) e coautor de “Microsoft .NET: Architecting Applications for the Enterprise” (Microsoft Press, 2008). Residente na Itália, Esposito é um palestrante sempre presente em eventos do setor no mundo inteiro. Siga-o no Twitter em twitter.com/despos.
Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Scott Densmore