Home > .Net, Desarrollo, Visual Studio, Windows Live > Windows Live – Construyendo Sitio Web con Windows Live

Windows Live – Construyendo Sitio Web con Windows Live


Tras la salida del nuevo SDK de Windows Live (el cual comente en este post), ahora hablare un poco la estructura del tipo de proyecto de Windows Live para paginas web que viene incluida en la plantilla. Asi mismo de los pasos que deben realizarse para utilizar esta plantilla y cualquier otro servicio de live dentro de nuestras aplicaciones web.

1. Crear el proyecto Web a partir del template de Windows Live 

Una vez descargado e instalado el SDK como lo comente aca, el primer paso es crear el proyecto, para ello abrir visual studio 2010, ir a File – New Project, seleccionar el lenguaje deseado (C# para este caso) y dentro de las plantillas de Windows Live seleccionar “Windows Live Web Application”. Dar un nombre especifico al proyecto, para el ejemplo DemoLiveWeb y clic en Ok.

image

Cuando se termina de crear el proyecto, vemos se que se abre una ventana de internet explorer, con las instrucciones para hacer funcionar el aplicativo de manera local.

image

En Visual Studio vamos a ver la estructura de items que nos creo para el proyecto.

Referencias

De entrada algo que se puede ver son las referencias a las librerias de Windows Live.

image

Microsoft.Live contiene todos los objetos para generar la comunicacion entre los servicios y la aplicacion, info en: http://msdn.microsoft.com/en-us/library/ff749016.aspx

Microsoft.Data.Services.Client es una libreria basada en WCF que contiene los medios y protocolos de comunicacion con los servicios de Live, info en: http://msdn.microsoft.com/en-us/library/ff748039.aspx

Paginas

Si abrimos la pagina Default.aspx o About.aspx, nos daremos cuenta que es igual a una pagina de proyecto en blanco de ASP.NET 4 salvo los titulos y enlaces.

Pero si abrimos la master page del sitio Site.Master y detallamos la fuente, encontraremos cambios significativos.

Iniciando por el Head, vamos a ver un javascript appLoader que se encarga de colocar un alias “wl” a todos los objetos de Windows Live que se vayan a utilizar en la pagina.

<script type="text/javascript">
        function appLoaded() {
            Microsoft.Live.Core.Namespace.using("wl:Microsoft.Live");
        }
</script>

Un poco mas abajo ya dentro del tag Body, encontramos el tag <wl:app> el cual se encarga de conectar la aplicacion con los servicios de Windows Live, dentro de ella vemos que se toma parametros del archivo de configuracion del sitio web.config.

<wl:app
        channel-url="<%=WebConfigurationManager.AppSettings["wl_wrap_channel_url"]%>"
        callback-url="<%=WebConfigurationManager.AppSettings["wl_wrap_client_callback"]%>?<%=SessionId%>"
        client-id="<%=WebConfigurationManager.AppSettings["wl_wrap_client_id"]%>"
        scope="WL_Profiles.View, Messenger.SignIn"
        onload="appLoaded">
    </wl:app>

Mayor info en: http://msdn.microsoft.com/en-us/library/ff750605.aspx

Mas abajo encontraremos los tags de cada uno de los controles. Todos los que cominencen de la forma <wl:

Para conocer mas a fondo de ellos los invito a conocer el Interactive SDK, aca se pueden ve como estos controles se utilizan en el site de ejemplo: http://isdk.dev.live.com/ControlsPlayground.aspx

2. Crear un Dominio local modificando el Archivo Hosts

Crear un “dominio local”, esto debido a las aplicaciones que utilicen los servicios de windows live se deben registrar bajo un dominio especifico, para ello vamos a modificar el archivo host y agregando un valor de dominio para la maquina.

Si se esta trabajando en Windows 2003, Vista, 2008 o 7, este archivo se encuentra en la ruta C:\Windows\System32\drivers\etc\hosts, podremos abrirlo con un editor de texto como notepad. Par agregar el dominio, en la ultima linea colocamos la ip 127.0.0.1 y el dominio que deseemos para nuestra maquina local tal como se ve en la imagen, para el ejemplo: www.domlocal.com.

image

Hecho esto se guardan cambios y si se entra a la url: http://www.domlocal.com es igual que si se accede a localhost, de esta manera ya tenemos un nombre de dominio para nuestra maquina local, con este el siguiente paso es registrarlo en la pagina de live services.

3. Registrar el dominio dentro de los Servicios de Live para obtener el Identificador

Una vez colocado el nombre de dominio en la pagina accedemos a http://live.azure.com, iniciamos sesion con nuestra cuenta de live, hecho esto, en la pagina principal seleccionar la opcion New Service.

image

La siguiente pantalla indica el acceso para el registro de aplicaciones para desarrollo de Windows Live, asi mismo se tiene un limite de aplicaciones a registrar. Para registrar la nuestra clic sobre el mensaje “Live Services:Existing API’S”

image

La siguiente pantalla solicita los datos de la aplicacion a ser registrada.

Service Componetne Label: este es el nombre de la aplicacion, y se visualizara al momento de que el usuario vaya a iniciar sesion en la pagina.

Service Componetne Description: Descripcion del sitio.

Domain: Dominio desde donde va a ser accedida la aplicacion a los servicios, aca colocamos el dominio que se agrego al archivo hosts.

Return Url: El return url es la pagina a donde direcciona los servicios de live despues de la autenticacion, generalmente es la pagina de inicio del sitio.

image

Nota: No se puede registrar mas de una vez un dominio.

Una vez registrado el dominio, la pagina mostrara los Id’s de la aplicacion.

Application ID: Este es el identificador unico que windows live asigna al dominio. Vale la pena aclarar que este ID solamente puede ser utilizando en aplicaciones que se encuentren enmarcadas dentro del dominio especificado.

Domain(s): Dominio registrado.

Return Url: Url de la aplicacion, esta url es el retorno despues de la autenticacion.

Secret Key: Esta palabra secreta es usuada por el servicio para codificar los datos enviados a la aplicación web y descodificar estos datos recibidos en la aplicación web por parte del servicio de Windows Live ID, al momento de realizar una autenticacion exitosa por parte del usuario.

image

Listo una vez hecho esto ahora procederemos al tercer paso el cual es registrar estos valores en la aplicacion y verificar su funcionamiento.

4. Asociar el identificador de Live services a nuestro aplicativo Web

Ahora volvemos a visual studio y abrimos el archivo Web.config, dentro de la seccion appSetting vamos a encontrar 4 keys

image

Hay que modificar las 4 colocando los valores entregados al momento de registrar la aplicacion en el sitio de Live Services, ademas de colocar el nombre del dominio que se agrego en el archivo hosts. Tal como se ve en la imagen.

image

Por ultimo, hay que cambiar la url de inicio de la aplicacion para que arranque por la direccion del dominio que le asignamos “http://www.domlocal.com”, para ello en el menu project seleccionar la opcion “DemoLiveWeb Properties…”, en esa pantalla en la pestana Web, cambiar el valor que viene por defecto de la propiedad Start URL por http://www.domlocal.com:8080/.

image

Ahora presionar F5 para ejecutar la aplicacion, inmediatamente se abrira una ventana de internet explorer con la url http://www.domlocal.com:8080/ vamos a ver el boton de connect y la barra de messenger en la parte inferior, si hacemos clic en connect este se conectara a los servicios de autenticacion de live y solicitara las credenciales de acceso.

imageEsta ventana indica al usuario externo que se va a conectar al sitio utilizando su Windows Live ID. Como se puede ver en la imagen, podemos visualizar el nombre que le se le dio a la aplicacion al momento de registrarla, la url del dominio, ademas de la posibilidad de agregar una imagen personalizada, ujn logo de la aplicacion.Esta ventana es indicio de que nuestra aplicacion ya puede conectarse con los sericios de windows live, en caso de haber un problema, el contenido de esta ventana cambia.image

Una vez iniciemos sesion con credenciales de Windows Live, vamos a ver como esta plantilla de visual studio utiliza el control de messenger bar en la parte inferior.

image

Y listo!!!

Si se desea agregar un control adicional y empezar a personalizarlos recomiendo visiar el Interactive SDK en donde podremos visualizar estos y ver el codigo que se debe agregar a visual studio.

Algo interesante de este sitio es que tambien utiliza el sdk para mostrar de manera muy interactiva como se ven los controles con un usuario ya autenticado. Info en: http://isdk.dev.live.com/ControlsPlayground.aspx

image

Bueno espero que en este corto post haya quedado mas claro el proceso de autenticacion y registro para la utilizar los servicios de Live.

La invitacion es a aprovecharlos y a enriquecer nuestras aplicaciones

Gerardo Ramos – Microsoft Student Partner

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: