Este artículo proviene de un motor de traducción automática.
Tecnología de vanguardia
Programación esencial de Facebook: creación de un cliente para Windows
Descargar el ejemplo de código
En mi columna anterior hablé de los conceptos básicos de programación en el contexto de un sitio Web de Facebook — específicamente un sitio Web de ASP.NET MVC (puede leer el artículo en msdn.microsoft.com/magazine/jj863128). Como puede imaginar, el uso de la API de Facebook no se limita a aplicaciones Web, aunque uno de sus más común utiliza es sólo para autenticar a los usuarios de un nuevo sitio Web de una manera "más suave".
En esta columna a construir una aplicación de cliente de Windows Presentation Foundation (WPF) que utiliza la API de Facebook para autenticar a los usuarios y enviar actualizaciones con imágenes. Porque la Web es un entorno diferente desde el escritorio, esta columna obviamente será diferente de lo que escribí el mes pasado. La API de Facebook, sin embargo, es el mismo. Usted puede obtener el SDK de Facebook C# a través de NuGet (ver facebookapi.codeplex.com para obtener más información sobre la API de Facebook para C# / desarrolladores .NET).
Integración de aplicaciones con las redes sociales
Mayoría de redes sociales tienen una arquitectura similar. Interacción entre los usuarios y el motor de la red social ocurre en cualquiera de las dos maneras siguientes: directamente a través de la web principal (por ejemplo, el sitio de Twitter o Facebook) o a través de la mediación de una aplicación organizada internamente por el sitio de red social. Para mayor claridad, te remito a estas aplicaciones como conectores.
Una aplicación de cliente (sitio Web, WPF o Windows Phone) sólo puede interactuar con el motor de la red social a través de la mediación de un conector. Para el código de ejemplo que acompaña a esta columna, usaré un conector de Facebook llamado Memento (tenga en cuenta que el código, por ejemplo proporcionado efectos, viene como un solo proyecto, no es una solución completa y utiliza Visual Studio 2010). El nombre Memento — y su icono relacionado — aparecerá como pie de página de los mensajes en el muro de cualquier aplicación de cliente utilizando Memento para conectarse a Facebook. Puede crear un conector para Facebook en developers.facebook.com/apps.
Conectores se caracterizan por un par de cadenas únicos — tecla de aplicación y secreto — y, más interesante para nuestros fines, puede servir una variedad de aplicaciones de cliente, si su Web, móvil o de escritorio. Figura 1 resume la arquitectura general de las redes sociales cuando se trata de interacción.
.png)
Figura 1 el modelo de interacción de las redes sociales
Al final, cualquier aplicaciones de usuario que necesitan integrar las redes sociales más populares (por ejemplo, Facebook, Twitter o Foursquare) son esencialmente construidos como clientes de una aplicación conector de específicos de la red social.
Para una aplicación, integración con una red social esencialmente significa acceder a las funcionalidades de red social en nombre de un usuario registrado. Se trata de acciones un par: autenticación de los usuarios de la red social y la realización de la acción real, como hacer un check-in para un lugar determinado, colgar en la pared del usuario o twitteando.
Esta es la esencia de la integración de una red social API en una aplicación personalizada y, como resulta, no puede ser limitada a sólo Web apps.
Diferencias de una aplicación de Windows
En la columna del mes pasado hablé primero cómo autenticar a los usuarios de un sitio Web a través de Facebook y, a continuación, presenté algún código para registrar ambos interactivamente y mediante programación a la pared del usuario. Registro en la pared de un usuario no requiere un diferente enfoque si se hace desde una aplicación de Windows; autenticación, en cambio, requiere de algunos ajustes.
Una red social es principalmente una aplicación Web y expone los servicios de autenticación a través del Protocolo OAuth. Una aplicación que quiere para autenticar a los usuarios a través de cuentas de Facebook, por ejemplo, necesita realizar una llamada HTTP a un extremo de Facebook. El punto final, sin embargo, devuelve una página HTML para el usuario actual interactuar con credenciales y autorizar el conector para operar en su nombre (ver figura 2).
.png)
Figura 2 el conector Memento pide explícitamente el usuario permisos
La parte que es diferente en un escenario móvil en comparación con una aplicación Web o Windows es manera de tratar la redirección a la página HTML que proporciona la red social para credenciales y permisos.
Sin embargo otro cliente de Windows de Facebook
Vamos a crear un proyecto WPF y añadir un poco de marcado XAML en la ventana principal. Como mínimo, es necesario tener un par de botones para activar el inicio de sesión y el proceso de cierre de sesión y una etiqueta para mostrar el nombre del usuario actualmente logueado. Además, puede tener un elemento de la imagen para ver la fotografía del usuario actual. ¿Qué más? Veamos el código que pones en el controlador de clic de inicio de sesión:
var loginUrl = FbHelpers.GetLoginUrl();
El primer paso es obtener la URL de inicio de sesión de Facebook. El código para obtener la dirección URL es la misma que se utilizaría en un escenario de la Web, como se muestra en la figura 3.
Código de la figura 3 para obtener la URL de inicio de sesión
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 puede observar, el parámetro de redirect_uri (obligatorio) apunta a un extremo de éxito de Facebook. Es la página de inicio para cuando ha terminado el proceso de inicio de sesión. En un escenario de Web que utilice la página actual, por lo que primero se redirige al usuario a la página de Facebook y luego de vuelta a la página original del solicitante.
El método GetLoginUrl sólo obtiene la dirección URL para llamar al iniciar sesión. En un escenario de la Web, simplemente invocar una redirección para cambiar a la nueva página y mostrar el típico UI Facebook para inicio de sesión o — si el usuario ya ha iniciado el equipo en uso — como se muestra en la página de permiso figura 2. Para lograr lo mismo en una aplicación de Windows, necesita un control WebBrowser inicialmente oculto en la interfaz de usuario. Aquí está el código completo para el controlador de clic del botón de inicio de sesión de la aplicación:
public void Login()
{
var loginUrl = FbHelpers.GetLoginUrl();
ShowBrowser = true;
view.Browser.Navigate(loginUrl);
}
Disponible para descargar la aplicación de ejemplo utiliza el patrón de modelo-View-ViewModel (MVVM) abstraer ausentes detalles de la interfaz de usuario. Por lo tanto, establecer ShowBrowser a true sólo tiene el efecto de la activación de la visibilidad del control WebBrowser. Por último, el método Navigate dirige el componente a la dirección URL especificada. Figura 4 muestra el estado de la aplicación de ejemplo antes y después haga clic en el inicio de sesión.
.png)
Figura 4 primer paso de inicio de sesión en Facebook
El proceso de autenticación puede tardar hasta dos pasos. Si el usuario ya está conectado a la red social, el navegador Web recibe directamente la página de inicio. Si el usuario no ha iniciado, la página se muestra en la figura 4 se presenta. Sin embargo, si el usuario no está asociado con el conector utilizado por la aplicación de cliente y, a continuación, una pantalla intermedia como se muestra en la figura 2 pide explícitamente a los permisos.
¿Cómo se maneja la carga de páginas en el componente WebBrowser? Básicamente, usted necesita un controlador 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 si el proceso de conexión se ha completado con éxito o no. Tenga en cuenta que el inicio de sesión falla si el usuario simplemente niega permisos solicitados al conector. Si se produce un error en el inicio de sesión, sólo restablecer la interfaz de usuario ocultar el navegador Web y mostrar feedback al usuario. Es mucho más interesante cuando la conexión es satisfactoria, como se muestra en figura 5.
Figura 5 a un inicio de sesión correcto
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;
}
El código en figura 5 es similar a lo que usted necesita para utilizar en un escenario de la Web. Tenga en cuenta que una vez que el usuario ha iniciado sesión correctamente, la aplicación es todavía no todavía lista para operar en nombre del usuario. Además, la aplicación aún no sabe nada sobre el usuario, ni el nombre del usuario o algún tipo de identificación. Esto significa que almacenar datos de autenticación no son posibles aún. Por lo tanto, otro paso es obligatorio para los escenarios de la Web y Windows: obtener el token de acceso.
El Token de acceso
El token de acceso es una cadena que recibe de la red social a cambio de un código de inicio de sesión correcto. El código de inicio de sesión simplemente indica que el usuario que procedieron con la autenticación se conoce a la red. El código de acceso une la identidad del usuario y el conector. El código de acceso indica el motor de la red social si la aplicación del usuario tiene suficiente permiso para realizar la operación solicitada en nombre de ese usuario. El mismo usuario tiene un token de acceso diferentes para diferentes conectores.
Figura 6 muestra el código de C# para acceder el token después de un inicio de sesión correcto OAuth.
Código de la figura 6 para acceder Token después de inicio de sesión correcto OAuth
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;
}
En una aplicación Web, puede persistir el token de acceso en una cookie personalizada o como datos adicionales en una cookie de autenticación personalizada administrada por un objeto IPrincipal personalizado. En un escenario de Windows, puede recurrir a almacenamiento local. Cuando el usuario se desconecta de una aplicación de Windows, simplemente borrar cualquier dato almacenado. Una vez que tienes el token de acceso para un usuario determinado y un conector, usted está listo para realizar cualquier operación que cae bajo los permisos concedidos, como se muestra en la figura 2.
Un tipo común de aplicación de red social "escucha" a algunos alimentos y puestos automáticamente en nombre del usuario mismo. En este caso, agarra el token de acceso una vez y mantenga en ejecución de la aplicación hasta que el usuario revoca los permisos. Una vez que tienes el token de acceso, no es necesario ocuparse de autenticación como el usuario detrás del símbolo (token) es realmente la sesión a la red social en el equipo.
Fotos y estado de registro
Figura 7 muestra la interfaz de usuario de la aplicación WPF muestra una vez que el usuario ha iniciado con éxito Facebook y el token de acceso es almacenado de forma segura. La interfaz de usuario incluye un cuadro de texto y un botón enviar. Como puede ver, la interfaz de usuario también define un botón para examinar y selecciona una imagen JPEG del disco local.
.png)
Figura 7 registro de cliente muestra App
El código en figura 8 muestra cómo publicar una actualización con una imagen adjunta.
Código de la figura 8 para publicar una actualización con una imagen adjunta
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)
});
}
}
En figura 7 ves la actualización y la imagen en mi línea de tiempo. Tenga en cuenta que el nombre del conector utilizado se presenta bajo el nombre del autor.
Hasta siguiente: JavaScript
En este artículo construí una aplicación WPF para publicar en Facebook en nombre de un usuario. Para construir una aplicación móvil, sigue el mismo patrón aquí. Tenga en cuenta que el patrón es válido independientemente de la plataforma móvil de elección. He construido correctamente Windows Phone y Android apps de esta misma manera. Mi columna siguiente muestra cómo utilizar JavaScript para programa de Facebook.
Dino Esposito es el autor de "Arquitectura móvil soluciones para la empresa" (Microsoft Press, 2012) y "programación ASP.NET MVC 3" (Microsoft Press, 2011) y coautor de ".NET de Microsoft: Diseñar la arquitectura de aplicaciones para la empresa"(Microsoft Press, 2008). En Italia, Esposito es un orador frecuente en eventos de la industria en todo el mundo. Seguir en Twitter en twitter.com/despos.
Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Scott Densmore