Home > Windows Live > Incluir Control de Windows Live Chat en Aplicaciones Web

Incluir Control de Windows Live Chat en Aplicaciones Web


Una de las novedades con la salida del SDK de Windows Live es el control de chat, un componente que utilizando el servicio de Windows Live ID y Windows Live Messenger permite tener la opcion de chat para implementarlo en un sitio web.

Un control bastante sencillo de implementar y de utilizar que permite a  los usuarios que con su cuenta de windows live pueda acceder a una ventana de chat y al messenger en un solo sitio.

La implemetacion de este control es bastante sencilla y consta de 2 pasos.

1. Registrar sitio y obtener el Applicaition ID

Cada vez que se desarrolla utilizando los servicios de Windows Live hay que adquirir un Application ID encargado de la identificacion del sitio dentro de Live, para ello ir a http://live.azure.com e iniciamos sesion con una cuenta de Windows Live.

En este portal se pueden registrar hasta 20 aplicaciones difetenres que consuman los servicios. En la pagina de Summary seleccionar la opcion New Service ubicado en la parte superior derecha.

image

De esta forma indicamos el registro de una aplicacion dentro de Live, para ello seleccionar la opcion Live Sevices: Existing APIs.

image

El formulario de registro es bastante sencillo de llenar, simplemente colocarlo los siguientes datos:

Service Component Label: Nombre del sitio, para el control de chat este nombre no se va a ver relfejado en ninguna parte.

Srvice Component Description: Descripcion del sitio.

Domain: Pagina de Inicio donde esta la aplicacion, sin necesidad de colocar el http://.

Return Url: pagina donde va a estar ubicado el control de chat.

image

Para finalizar clic en Create y listo, posterior al registro, el sistema presenta el Application ID asignado al sitio, este valor se va a necesitar al momento de colocar el control en la pagina.

image

2. Colocar scripts, control de Chat en sitio y asignar Application ID

Una vez registrado el sitio en Windows Live, para agregar el control de chat a un sitio web hay que incluir 3 componentes

  • Encabezado, en el tag htm de la pagina se coloca el alias wl para indicar que todos los controles q contenagan este dato estas sujetos a la definicion del javascrip definido alli. <html xmlns:wl="http://apis.live.net/js/2010"&gt;
  • Hacer referencia al javascript encargado del proceso de autenticacion. <script src="http://js.live.net/4.0/loader.js"></script>
  • Agregar el control de chat en cualquier parte del tag body de nuestra pagina. <wl:chat-frame event-name="<Nombre del Sitio>" client-id="<Application ID>"> En este ultimo paso en el campo <Application ID> se debe colocar el valor que Windows Live nos retorno al momento del registro.

A continuacion muestro un ejemplo de como es este proceso en una pagina HTML y en una de ASP.NET (ASPX)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wl="http://apis.live.net/js/2010">
<head>
    <title>Titulo de la Pagina</title>
    <script src="http://js.live.net/4.0/loader.js"></script>
</head>
<body>
    <div>
        <br />
        <wl:chat-frame event-name="<Nombre del Sitio>" client-id="<Application ID>">
        </wl:chat-frame>
    </div>
</body>
</html>

 

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chat.aspx.cs" Inherits="NFN.Chat" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:wl="http://apis.live.net/js/2010">
<head id="Head1" runat="server">
    <title>Titulo de la Pagina</title>
    <script src="http://js.live.net/4.0/loader.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <wl:chat-frame event-name="<Nombre del Sitio>" client-id="<Application ID>">
        </wl:chat-frame>
    </div>
    </form>
</body>
</html>

Como se puede ver el proceso es bastante sencillo y tanto para una pagina asp.net como html el proceso es identico.

Este control es visualmente personalizable, simplemente es agregar al tag del control alguna de las siguientes propiedades con los valores especificados

image

El uso de este control es bastante sencillo, para iniciar a chatear, debemos inciar sesion con nuestro Windows Live ID.

imageimageimage

Hecho esto, Vamos a ver como en la parte superior del control no sola mente se activa el control de chat sino tambien los contactos del messenger, de esta manera vamos a poder tanto chatear como hablar por messenger de manea independiente pero desde el mismo control, a continuacion una serie de pantallazos de ejemplo para visualizar mas detalladamente.

imageimage

imageimage

Nuestro Framework .NET es un portal de entusiastas y expertos en tecnologias de desarrollo Microsoft al cual pertenezo, tuve la oportunidad y orgullo de implementar este control de chat un este sitio, para cualquier consulta con los expertos los invito a visitar el sitio http://nuestroframework.net/

image

Y visitar el chat: http://nuestroframework.net/Articles/NFNChat.aspx

Para mayor info recomiendo ir al portal de desarrollo de Windows Live: http://dev.live.com

Info de control de Chat: http://msdn.microsoft.com/en-us/library/ff750122.aspx

La invitacion es a aprovechar estos recursos, si bien messenger es una herramienta que hoy en dia se ha convertido en una necesidad para muchos, vale la pena aprovecharla no solo para comunicarnos con nuestros contactos sino tambien de compartir con quienes deseemos.

Gerardo Ramos – Microsoft Student Partner

  1. July 28, 2010 at 6:32 pm

    Escelente excelente gracias esto lo necesitaba para no ponerme a desarrollar y meter codigo como loco

  2. September 29, 2010 at 4:51 am

    hola..probe el codigo que mencionas pero solo anda el msn ..la parte de chat no funciona.. nose si tu lo haz implementado y esta funcional??

    espero tu respuesta..saludos.

  3. September 29, 2010 at 2:18 pm

    me dice que el chat no se encuentra disponible.. osea puedo ver mis contactos del msn ..pero el chat no anda

  4. September 29, 2010 at 4:07 pm
    • October 3, 2010 at 10:22 pm

      Que tal izaak

      Viendo la fuente de tu pagina encontre lo siguiente

      1. en el tag html, falta la referencia al apide javascript de windows live
      2. aunque el chat-frame esta bien, intenta con este otro

  5. September 29, 2010 at 4:30 pm

    en php sera lo mismo?? o quisas por eso sera q no anda bien?

  6. October 7, 2010 at 10:49 am

    gracias por responder… revisare la pagina que me dices

    saludos

    • December 4, 2010 at 1:58 pm

      Hola Izaak, me gustaria saber si pudiste solucionar el problema? yo me baje el ejemplo que dice gerardo y me funciono el primer dia pero hoy me sale el mismo error que te sale a ti.

  1. September 20, 2010 at 7:17 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: