Home > WebMatrix, Windows Live > Integrando Autenticacion de Windows Live con ASP.NET usando #WebMatrix

Integrando Autenticacion de Windows Live con ASP.NET usando #WebMatrix


Desde hace varios años los servicios de autenticacion han ayudado a que los equipos de desarrollo implementen servicios de autenticacion como Windows Live ID, facebook, twitter, GMail, yahoo, OpenID,  entre otros a sus desarrollos, de esta manera, los usuarios no tienen que aprender un nuevo usuario y clave para nuestro sitio si no que utilizan su credencial de cualquiera de los servicios mencionados anteriormente para acceder a nuestro sitio.

imageimage

De esta manera tanto nuestros desarrollos como los proveedores de servicios de autenticacion ganan mas trafico en los sitios y hacen que los usuarios se sientan mas “amigables” con ambos sites.

Windows Live ID permite a los usuarios identificarse con su cuenta @hotmail.com @live.com u otra cuenta de cualquier dominio que se encuentre registrada en http://domains.live.com acceder a todos los servicios de Windows Live.

El servicio de autenticacion de Windows Live es muy sencillo y lo podemos ver reflejado en la siguiente imagen.

Bb676631.d36d6eab-1dfd-4df9-8b78-513dd80ec514(en-us,MSDN.10).jpg

1. El usuario solicita la pagina que contiene la autenticacion.

2. El sitio retorna la pagina con el link de Sign In.

3. El usuario hace clic en Sign In.

4. Se presenta al usuario la pagina de inicio de sesion de Windows Live.

5. El usuario ingresa sus credenciales

6. Windows Live valida y autentica al usuario.

7. Windows Live redirecciona al sitio inicial ya con un token o identificador asignado al usuario.

8. Ya con la sesion iniciada el site muestra la informacion deseada.

 

Trabajar con el SDK de Windows Live ID es muy sencillo en los siguientes pasos explicare como utilizarlo y como esta compuesto.

1. Descargar e instalar el Windows Live ID SDK

La integracion de este servicio con aplicaciones ASP.NET es bastante sencilla gracias al Windows Live ID SDK, para descargarlo podemos ir a http://bit.ly/gCS1ba.

En esta pagina se encuentran ejemplos de como se implementa ese SDK en diferentes lenguajes como C#, Visual Basic, PHP, Java, entre otros.

image

Para este caso vamos a descargar el archivo correspondiente a C# llamado webauth-cs-1.2.msi el cual es el primero de la lista.

El proceso de instalacion es se raliza a travez de un wizard de una manera bastante sencilla.

imageimage

imageimage

Ya instalado, en la carpeta selecionada durante el proceso vamos a encontrar los siguientes archivos.

image

La carpeta App_Code contiene la clase “WindowsLiveLogin.cs” encargada de la autenticacion y captura de identificadores de usuario de Windows Live y los eventos correspondientes con la autenticacion, mientras que la carpeta sample tiene un sitio de ejemplo en asp.net donde se muestra como se utiliza dicha clase.

image

Le ejecucion de este ejemplo es muy sencilla y posteriormente profundizaremos un poco en el SDK.

Copiar la carpeta App_Code dentro de la carpeta Sample, de esta manera ya incluiremos la calse “WindowsLiveLogin.cs” en el site de ejemplo.

image

2. Crear un nombre de dominio Nuevo en la maquina local

Todo aplicativo web que vaya a utilizar los servicios de windows live debe estar registrado en la plataforma, para ello modificaremos el archivo host de nuestra maquina local para crear un alias a nuestra maquina.

En Windows XP/Vista/2008/7 la ubicacion de este archivo es “C:\Windows\System32\drivers\etc”. Abrir el archivo hosts en un editor de texto como Bloc de Notas. Y colocar el nombre que deseemos para el ejemplo, en ese caso lo llame http://www.windowslivelocal.com

image

De esta manera cuando en un navegador ingresemos www.windowslivelocal.com simplemente se va a dirigir a localhost o nuestra maquina local.

3. Registrar dominio en Windows Live.

Ya con el nombre de dominio creado para nuestra prueba, vamos a registrarlo en Live. Para ello ir a http://manage.dev.live.com e iniciar sesion con nuestras credenciales de live.

Una ve ingresado se pueden registrar hasta 100 dominios diferentes en la pagina.

image

Click en Add an application. En la siguiente pantalla, se seleccionara el tipo de aplicativo a registrar, para el caso seleccionar “Web Application” e ingresar el nombre de dominio que creamos en el paso anterior.

image

Cuando ingresemos los datos hacemos clic en I accept, Windows Live asiganara a nuestro dominio 2 keys de identificacion, una llave publica y una privada.

image

Estas llaves las vamos a necesitas mas adelante asi que es mejor tenerlas a mano.

Ahora hay que indicar la url de retorno a la cual queremos que redireccione despues de que un usuario inicie sesion. Para ello clic en el link Essentials.

image

En esta pagina se configuran parametros la pagina de privacidad del sitio, logo y demas elementos que se utilizan cuando el aplicativo web utiliza Messenger Connect, para el Windows Live ID SDK solo actualizaremos el campo Return URL con el valor :/webauth-handler.aspx">http://<dominio>:<puerto>/webauth-handler.aspx, que para el ejemplo le asigne el puerto 88, de esta manera la cadena quedaria, http://www.demoid.com:88/webauth-handler.aspx y Clic en Save.

4. Configuracion y Ejecucion del ejemplo desde WebMatrix

Hecho los pasos anteriores ahora abrimos Web Matrix (http://bit.ly/webmatrix).

Nota: para el caso y si web matrix esta en Windows Vista o 7 hay que ejecutarlo como administrador.

En la pantalla de inicio seleccionar la opcion “Site from folder”.

image

Y abrir la carpeta sample del sdk descargado anteriormente.

Hecho esto vamos ahora a signarle el puerto 88 y el nombre de dominio al sitio, para ello en el panel de la izquierda seleccionar la opcion Site ubicado en la parte inferior y la opcion Settings.

En la caja de texto de la url colocar le nombre de dominio y el puerto que registramos en Windows Live tal como se ve en la imagen.

image

 

Por ultimo vamos a asignar al sitio las llaves asignadas por Windows Live para identificar el dominio que colocamos en web matrix con el que registramos. En el panel de la izquierda seleccionar la opcion files y hacer doble clic sobre el archivo web.config.

image

Ahora editamos los valores wll_appid y wll_secret, con los valores obtenidos en el paso anterior.

image

image

Y listo ahora vamos a ejecutar el sitio para verificar su funcionamiento. En la cinta de opciones clic en la opcion Run.

image

Inmediatamente veremos una ventana de internet explorer con el nombre de dominio y el puerto que indicamos en la configuracion de webmatrix.

Si hacemos clic en el boton Sign In, este direccionara a una pagina de autenticacion de Windows Live en la cual se solicitan las credenciales de usuario.

image

Interesante de esta pagina como podemos ver es que es directa de Windows Live, de esta manera el usuario ya identificara la interfaz y se dara cuanta que es propia de Microsoft, tambien la pagina advierte que nuestro dominio simplemente esta compartiendo autenticacion con el sitio y se le suministrara un ID anonimo.

image

Ahora cuando el usuario ingrese sus credenciales validas de Windows Live, vamos a ver como se direcciona automaticamente a la pagina de inicio con la diferencia de que el boton de sign in cambio a sign out y se muestra el ID anonimo que Windows Live le asigno al usuario que inicio sesion en Windows Live ya con este valor podremos identificar al usuario cada vez que inicie sesion en el site.

image

Ahora analicemos mas detalladamente el codigo en Visual Studio.

5. Analisis del SDK

Lo primero que vamos a ver es el control de sign in. En la pagina default.aspx se puede visualizar que es un tag html iframe.

image

Si se desea modificar el estilo del control recomiendo consultar este link http://bit.ly/hdPXz0

Como observamos toma como parametro el APPID del archivo web.config que se indico anteriormente.

Cuando hacemos clic sobre el, y redirecciona a la pagina de inicio de sesion Windows Live, cuando el usuario ingresa sus credenciales, windows live redirecciona al Return URL que indicamos al momento del registro de la pagina.

image

La pagina webauth-handler.aspx se encarga se crear y eliminar las cookies segun el request que se realice.

Primero se definen parametros como la pagina de login y logout, que en este caso es la misma, el nombre de la cookie y las fechas de expiracion.

image

Al cargar la pagina (recordemos que esta pagina la direcciona Windows Live cuando el usuario se loguea de manera correcta) se verifica la accion que se esta ejecutando, utilizando el objeto HttpRequest obtenemos la accion que se ejecuta.

image

Dependiendo de la accion se elimina la cookie o se cierra la sesion.

image

En caso contrario a los dos anteriores “login” se crea una instancia de la clase WindowsLiveLogin

image

Cuando la accion es “login” se crea una nueva instancia del pbjet WIndowsLiveLogin.User el cual va a almacenar el identificador del usuario, el tiempo activo de la sesion entre otros.

Por ultimo se crea la cookie y se redirecciona  al pagina deseada.

Para conocer mas en detalle la pagina webauth-handler.aspx ir a http://msdn.microsoft.com/en-us/library/bb676640.aspx

Ya cuando se direcciona a una pagina del site (default.aspx en el ejemplo), este crea una instancia nueva del objeto WindowsLiveLogin.

Este objeto lee la cookie que se creo anteriormente y almacena el identificador del usuario dentro de la propiedad id.

image

Como pudimos ver, el modelo de autenticacion de Windows Live es bastante sencillo de comprender y de implementar. En la misma pagina se encuentran tambien ejemplos en php, java y otros lenguajes, su implementacion y funcionamiento es igual, asi que la invitacion es a conocerlos y a utilizar estos servicios gratuitos conocidos por todos.

Mayor Info:

MSDN, Windows Live ID Authentication SDK: http://msdn.microsoft.com/en-us/library/bb676633.aspx

Windows Live ID SDK: http://bit.ly/LiveIDSDK

Centro de Desarrollo de Windows Live: http://dev.live.com/

Samples for Web Authetication: http://msdn.microsoft.com/en-us/library/bb676635.aspx

Gerardo Ramos

  1. No comments yet.
  1. February 6, 2011 at 3:07 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: