Home > Articulos & Tutoriales, WebMatrix, Windows Live > WebMatrix & Windows Live Parte II (Integrando con Moodle)

WebMatrix & Windows Live Parte II (Integrando con Moodle)


Como parte de este corto ciclo de integracion de Servicios de Windows Live con aplicaciones Open Source utilizando WebMatrix, en este segundo post quiero mostrar como de manera sencilla y ulizando webmatrix se integra Moodle no solo la autenticacion de windows live, sino tambien correo electronico, messenger y alertas.

Mayor info en: http://moodle.com/

Una introduccion breve, Moodle es un LMS (Learning Management System), una plataforma de educacion virtual open source muy robusta el cual permite a instituciones educativas crear espacios de colaboracion entre estudiantes y docentes. La creacion de cursos, carga de materiales, examenes, foros de discusion entre otras caracteristicas.

Hablando de caracteristicas tecnicas Moodle, esta construido en PHP y MySql, interesante de esto es que cuando se instala WebMatrix, se instala tambien PHP 5 y un motor de MySql 5 o 6, de esta manera moodle puede correr sin problemas con webmatrix.

La integracion de los servicios de Windows Live con Moodle esta orientada a aquellas instituciones que tienen la plataforma live@edu, la cual permite a las instituciones educativas acceder a todos los servicios de windows live a travez de su cuenta de correo institucional (@institucion.edu), una de las caracteristicas mas importantes de esta plataforma es no el uso de hotmail sino de Outolook Live, con cero publicidad y una interfaz limpia, permite a los usuarios navegar dentro de su correo electronico y contactos de una manera mas sencilla.

A continuacion explicare desde la instalacion del moodle y su integracion con Live.

1. Instalacion y Configuracion de Moodle utilizando WebMatrix

El primer paso es descargar e instalar moodle a travez de webmatrix, para ello, abrimos webmatrix y en la pantalla inicial seleccionamos la opcion “Site from Web Gallery” y en el tipo CMS seleccionar moodle, colocarle el nombre deseado y clic en Next.

image

En la pantalla de terminos y condiciones clic en “I Accept”.
image

Posteriormente se solicitan el servidor de base de datos, nombre de base de datos, nombre de administrador y contrasena.
image

Una vez descargado e instalado Moodle, clic en Ok para finalizar.
image

Como todo aplicativo que se integre con Windows Live, este debe pertenecer a un dominio y estar registrado dentro de Live, en este ejemplo vamos a ejecutar la aplicacion de manera local.
Para asignar un nombre de dominio al PC local debemos modificar el archivo host  ubicado en c:/Windows/System32/Drivers/etc como se ve en la imagen, para el ejemplo se coloco el nombre www.moodlelocal.com pero puede ser el que  se desee.
image

2. Configurando Moodle

Ahora volviendo a WebMatrix, vamos a asignarle el nombre de dominio que se definio en el ultimo paso del numeral anterior.

Para ello, en webmatrix, ir al panel Site y seleccionaro la opcion Settings, en este punto se permite seleccionar la pagina inicial del sitio, url, si se desea utilizar Conexiones SSL, y version del .NET Framework.

En la URL colocar la direccion que agregamos en el archivo host como se ve en la imagen.

image

Para efectuar los cambios reiniciamos el sitio, hecho esto, en la pestana site seleccionar la opcion Restart.

Nota: Si se esta trabajando en Windows 7, se debe iniciar webmatrix como administrador.

Hecho esto entramos a la utl y puesto especificado en webmatrix, para el ejemplo http://www.moodlelocal.com:8286//, de esta forma se entrara a la pagina de configuracion de moodle. En esta pagina se indican los terminos de uso de la licencia, para aceptar y continuar clic en Yes.

image

La pagina siguiente, permite seleccionar el metodo de instalacion, seleccionar la opcion “Unattended operation” para realizar una instalacion desatendida, de esta manera, no visualizaremos el proceso de instalacion sino hasta que este se complete. Clic en Continue para iniciar la instalacion.

image

La instalacion dura alrededor de 10 mins tiempo durante el cual en la ventana del navegador se visualizaran los pasos que va avanzando el proceso de instalacion.

Al finalizar, se presentara la ventana de configuracion inicial en donde se preguntaran datos generales del sitio y del administrador del sistema.

image

image

Cuando hallamos llenado el formulario, clic en Update Profile para confirmar los datos.

La siguiente pagina es la encargada de configurar los parametros del sitio. Titulo, Descripcion. Clic en Save changes para continuar.

image

Y listo ya tenemos nuestro moodle montado en web matrix con un nombre de dominio local asignado y listo para trabajar.

image

El siguiente paso es integrar los bloques de servicio de Windows Live y la crecion de las cuentas.

2. Agregar bloques de Live Services en Moodle

El proceso de integracion de live services a moodle es bastante sencillo y consta de 3 etapas.

La primera etapa consiste en la “instalacion” de los bloques de live en moodle, para ello los invita a descargar los componentes que se pueden encontrar en esta pagina, haciendo clic sobre el link “Try It”.

El archivo descargado se llama MS4M.zip.

image
El contenido del archivo descargado contiene los paquetes de integracion, paginas de autenticacion y ayuda e idiomas.

auth: paginas de autenticacion
blocks: bloques de visualizacion y consulta para paginas.
documentation: manual de instalacion y FAQs
lang: paginas de ayuda de live services

image

La segunda etapa consiste en reempazar el archivo php.ini por el que les referencio a continuacion y pueden descargar: http://cid-817623b1a1f904a6.office.live.com/self.aspx/Public/php.ini

Este archivo se encuentra ubicado en C:\Program Files (x86)\IISExpress8\PHP\v5.2 para sistemas de 64 bits y C:\Program Files\IISExpress8\PHP\v5.2 para sistemas de 32.

Nota: Para la ejecucion de este paso debemos tener detenido el IIS8 Express o mejor aun cerrar webmatrix.

En la tercera etapa se van a copiar todos los bloques que vienen en el archivo que descargamos en la primera etapa de este paso. Basicamente hay que copiar los archivos que estan en el zip en las mismas carpetas donde estas estan ubicadas, a ontinuacion explico de manera detallada el proceso.

En el archivo descargado MS4M.zip, copiar el contenido de la carpeta auth a la carpeta auth del sitio creado anteriormente en webmatrix.

image

De igual manera en el archivo descargado MS4M.zip, copiar el contenido de la carpeta blocks a la carpeta blocks del sitio creado.

image

Tambien copiar el archivo block_live_services.php de la carpeta lang\en_utf8 a la carpeta lang\en_utf8 del sitio.

image

Por ultimo la carpeta live_services copiarla al sitio lang\en_utf8\help.

image

Una vez hecho esto, al volver a webmatrix y ejecutar el sitio, seleccionar del menu princila, la opcion notifications y vamos a ver como el sistema ya reconoce el bloque de live_services e indica que ha sido colocado exitosamente.

image

 

3. Registrar Dominio en Windows Live

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 diferentes 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.

Service 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

Nota: Como webmatrix asigna un puerto al aplicativo, en el campo Return URL hay que colocar dicho puerto y apuntar a la pagina de integracion y autenticacion que copiamos del archivo descargado tal como se presento en el punto anterior, http://<dominio&gt;:<puerto>/auth/liveid/webauth-handler.php, para el ejemplo queda asi http://www.moodlelocal.com:6594/auth/liveid/webauth-handler.php

Para finalizar clic en Create y listo, posterior al registro, el sistema presenta el Application ID y el Secret Key asignado al dominio, este valor se va a necesitar al momento de colocar los bloques de live dentro del moodle.

image

Ya configurado el moodle, registrado el dominio en windows live, el siguiente paso consiste en registrar el application Id en moodle y configurar los bloques de live services.

 

4. Configuracion de Bloques de Live Services en Moodle

Volviendo a nuestro sitio de moodle, si bien los bloques de live services quedaron bien instalados como vimos en el paso 2, hay que activarlos y registrar el application id que acabamos de obterner.

Para ello en el menu principal, ir a la opcion Users – Authentication – Manage Authentication, y buscar dentro del listado el componente Windows Live ID, para activarlo hacer clic en el ojo cerrado de la columna Enable, para quedar tal como se ve en la imagen.

image

En la misma pagina, en la parte inferior en la seccion de Common Setting en la parte Instructions, vamos a colocar el texto y el link a la pagina de autenticacion de windows live, este contenido se va a ver representado en la pagina inicial del moodle al momento de iniciar sesion.

En esta seccion vamos a colocar un texto HTML para representar de manera facil y agradable el inicio de sesion de Live, para ello, seleccionar el icono image para colocar el texto en html, ahi colocamos el siguiente codigo.

<div style="font-size: 120%">
  <p><span style="font-family: ‘segoe ui light’, arial, helvetica, sans-serif; color: #333333; font-size: 1.6em">Utiliza tu <img width="175" height="23" alt="Windows Live" src="http://www.moodlelocal.com:6594/blocks/live_services/shared/images/WindowsLive.png&quot; complete="true" longdesc="http://www.moodlelocal.com:6594//admin/Windows%20Live%20Logo&quot; complete="true" /> ID<br />Para entrar Moodle Live</span><span style="font-family: ‘segoe script’, ‘felt tip roman’, ‘comic sans ms’; color: #333333; font-size: 1.6em"> cuando quieras!</span></p>
  <div style="line-height: 32px"><a style="text-align: center; width: 88px; display: block; font-family: ‘segoe ui’, arial, helvetica, sans-serif; background: url(/blocks/live_services/shared/images/glossybutton88.gif) no-repeat right top; float: left; height: 32px; color: #333333; font-size: 1.2em; font-weight: normal; margin-right: 0px; text-decoration: none" href="http://www.moodlelocal.com:6594/auth/liveid/login.php"><span style="padding-bottom: 11px; line-height: 12px; padding-left: 0px; padding-right: 0px; display: block; font-family: ‘segoe ui’, arial, helvetica, sans-serif; background: url(/blocks/live_services/shared/images/glossybtn32.gif) no-repeat; float: left; height: 32px; color: #333333; font-size: 1.2em; font-weight: normal; margin-right: 0px; text-decoration: none; padding-top: 9px">Sign in</span></a> </div><br /><br /><br />
  <p style="font-family: ‘segoe ui’, arial, helvetica, sans-serif; color: #666666; font-size: 0.85em">Utilizando tu Windows Live ID tambien tienes acceso a Windows Live e-mail, calendario, messenger, y alertas directamente en este sitio.</p>
  <p style="font-family: ‘segoe ui’, arial, helvetica, sans-serif; color: #666666; font-size: 0.85em">Para registrarse comunicate con el administrador del sistema (<a href="mailto:admin@sample.com">admin@sample.com</a>).</p></div>

Nota: hay que tener en cuenta en este codigo que donde colocamos, http://www.moodlelocal.com:6569 hay que colocar el dominio que se agrego en el host y el puerto que webmatrix asigno al sitio.

Aunque este es un ejemplo de codigo a colocar como se puede detallar estan los links a la pagina de autenticacion. Hecho esto volvemos a presionar el boton image para pasar a la vista visual de tal forma que veremos el siguiente resultado.

image

image

Ahora vamos a asignar el application id y el secret key que windows live nos asigno a sitio de moodle.

Para ello, ir al menu Modules – Blocks – Microsoft® Live Services, en esta pantalla, en primera medida se registraran el application ID y el secret key entregados al final del punto 3 tal como se ve en la imagen.

image

image

Asi mismo en esta pagina se indican los servicios que se desean visualizar desde el moodle, es asi como se activan cada uno de ellos.

Outlook, les recuerdo que este es un LMS (Learning Management System) y cuyo enfoque es para educacion, asi mismo se recomienda su integracion con la plataforma live@edu, es por ello que el correo electronico debe ser del outlook, propio de live@edu y no hotmail.

image

Messenger y Alertas:

image

Busqueda con Bing:

image

Una vez seleccionados los servicios que deseamos visualizar y asociado el application id en la parte inferior hacemos clic en Save Changes.

Ahora vamos a indicarle a moodle que deseamos que estos servicios que acabamos de activar queremos visualizarlos en las paginas de los cursos, para ello en el menu principal ir a Modules – Blocks – Sticky Blocks. En la lista desplegable Page type to configure seleccionar la opcion Course Page y en el listado blocks ubicado a mano derecha seleccionar Microsoft Live Services, de esta manera, todos los usuarios que entren a un curso especifico tendran acceso a los servicios de live activados anteriormente.

image

5. Cargue de usuarios a Moodle

Si bien el sistema va a utilizar autenticacion de Windows Live, debemos indicarle que usuarios van a poder acceder al sistema, para ello vamos a cargar mdiante un archivo de texto las cuentas que se van a crear y referenciar a live.

La estructura del archvo debe ser de la siguiente manera.

username, password, firstname, lastname, email, auth, msn

usuario1,password1,nombre,apellido,usuario1@institucion.edu,liveid,usuario1@institucion.edu

usuario2,password2,nombre,apellido,usuario2@institucion.edu,liveid,usuario2@institucion.edu

usuario3,password3,nombre,apellido,usuario3@institucion.edu,liveid,usuario3@institucion.edu

Un formato bastante sencillo, los campos username y password indican las credenciales en caso de que la autenticacion sea por moodle y no por Windows Live, nombre, apellido, correo electronico institucional para el inicio de sesion, el campo auth con el calor liveid indica que esta cuenta va a ser autenticada mediante windows live, y el campo msn idealmente con el mail institucional para el messenger.

Ya con el documento de texto listo vamos al menu Users – Authentication – Upload Users, buscamos el archivo ya con las cuentas a crear y hacemos clic en Upload Users.

image

Antes del cargue de los usuarios, moodle identifica y verifica los datos para que el usuario autorice su cargue.

image

Para finalizar el rpoceso clic en Upload Users, como se puede ver en la imagen anterior, yo cargue diversas cuentas registradas en live, una de live@edu, una de hotmail, una distinta registrada en domains y la de student partners. Esto nos indica que podremos cargar cualquier mail que pertenezca a un dominio registrado en live.

Al finnalizar el proceso sale el reporte final de cargue de usuarios.

image

A continuacion vamos a crear un curso de prueba y a asignar los usuarios que acabamos de cargar para verificar su crecion existosa y la autenticacion con Windows Live.

 

6. Creacion de Curso de Prueba y asignacion de roles

Para pruebas del sistema vamos a crear un curso de demostracion para simular un ambiente de produccion.

Finalizada la instalacion, el sistema inicia sesion con la cuenta de administrador que se indico en el paso anterior, para crear un curso en el menu, Site Administration seleccionar la opcion Courses – Add/edit courses, y hacer clic sobre el boton Add a new course.

image

Este formulario pide datos basicos del curso como nombre, descripcion, fecha de inicio entre otros, despues de llenar el formulario clic en Save Changes.

Despues se presenta la pantalla de asignacion de roles a usuarios.

image

Para este caso vamos a asignar a todos los usuarios que cargamos en el punto anterior como rol de estudiante, para ello seleccionar el link Student de la columna Roles.

A continuacion a cada una de las cuentas que deseemos vamos a agregarlas al rol de estudiante, seleccionamos las cuentas y hacemos clic en el boton add, para guardar cambios clic en el boton Assign Roles in Course ubicado en la parte inferior.

image

Y listo ya hemos finalizado todo el proceso de integracion de live services con moodle, a continuacion vamos a relizar las pruebas y ver que ventajas podemos concluir de este proceso.

7. Pruebas

Vamos a iniciar con el proceso de pruebas, cuando cerremos el sistema y vayamos a inicar sesion de entrada nos encontraremos con el mensaje html que colocamos en el paso 4.

image

Esta pagina de inicio contendra el link para acceder a moodle utilizando la autenticacion de Windows Live, para iniciar clic en el boton Sign in.

image

Como vemos direccionara a una pagina de autenticacion de windows live, y si detallamos la parte superior veremos el mensaje “Windows Live is not affiliated with http://www.moodlelocal.com and will share with it only an anonymous ID.” indicandole al usuario que nuestro dominio no tiene nada que ver con windows live, y que este solo compartira un ID anonimo nada mas para el proceso de autenticacion.

Cuando iniciamos sesion con una cuenta que no esta registrada en moodle (de los que se cargo en el paso 5), cuando el usuario se autentica por primera vez a nuestro sitio, se le presenta una ventana de autorizacion a compartir los servicios de live con este sitio.

image

Para continuar clic en Allow Access, de forma automatica se direcciona a la pagina de inicio de nuestro moodle ya con el usuario autenticado con windows live, ahora accederemos al curo al cual le dimos permiso de acceso.

image

Como podemos ver en la imagen, ya en e curso que creamos anteriormente en el paso 6 no solo tenemos acceso al contenido que este ofrezca y que el administrador publique si no tambien, a mano derecha vamos a poder visualizar los servicios de Windows Live los cuales configuramos en el paso 4.

Ahora simplemente seleccionamos la opcion que deseemos para ir al correo electronico, ver calendario o chatear con nuestros contactos utilizando messenger.

Ahora si un usuario que no esta previamente registrado inicia sesion dentro del moodle, este identificara su falla y le advertira que no tiene acceso al sistema.

image

 

8. Conclusiones, Ventajas.

Como pudimos ver uilizando herramientas 100% gratuitas como webmatrix, moodle y windows live, ya tenemos todo un LMS listo para poner en produccion como explique en este post, webmatrix ofrece hosting gratuito por un tiempo para hospedar nuestra aplicacion y base de datos.

La realizacion de este proceso tiene muchas ventjas:

1. Utilizando el servicio de Windows Live ID, los usuarios no tendran necesidad de tener nuevas credenciales de acceso para este sitio simplemente con su cuenta de live.

2. Asi mismo desde un solo lugar los usuarios tendran acceso no solo al contenido del sitio sino tambien a su correo electronico sea outlook o hotmail, contactos, alertas, calendario y messenger desde un solo sitio.

3. Para una institucion educativa implementar este sistema es bastante economico en lugar de implementar toda una plataforma propietaria.

4. Si se opta por uno de las opciones de hosting gratuito que webmatrix ofrece los costos de infraestructura y administracion de esta desaparecen.

5. La mejor de todas y como lo pudimos ver a lo largo del tutorial, herramientas gratuitas, una inversion en esfuerzo y tiempo que la verdad vale la pena aprovechar e invertir.

 

Bueno como pudimos ver es un proceos aunque un poco extenso bastante sencillo, despues de practicarlo un par de veces ya se aprende de memoria y se puede realizar en 10 mins.

La invitacion es a aprovechar estas herramientas, si bien Microsoft promociona el uso de su plataforma, la posibilidad de integrar esta con herramientas de software libre la podemos ver contemplada en este post y ver sus capacidades.

Mayor Info:

Microsoft Live Services Plug-in: http://www.educationlabs.com/projects/moodleproduct/Pages/default.aspx

 

Gerardo Ramos – Microsoft Student Partner

  1. October 23, 2010 at 11:39 pm

    Muy buen post Gerardo, solo tengo una duda. Imagino que por integrar Moodle con WebMatrix, el servidor de aplicaciones sería en ese caso IIS Express. Como sabrás,las versiones Express pierden muchas funcionalidades, y queramos o no, también mecanismos de seguridad.

    Te digo esto porque sería buenísimo implementar esta combinación de tecnologías en por ejemplo, 1 Universidad. Pero cuando me hagan este tipo de preguntas que son vitales, quisiera tener una respuesta.

    gracias!!

    • October 24, 2010 at 12:04 am

      Que tal Jimmy

      Tienes razon el IIS express es mas limitado a un IIS 7.0 o 7.5, en cuanto a temas de seguridad no conozco acerca de ello en IIS express, sin embargo te invito a visitar este par de links donde se detalla un poco mas fondo las caracteristicas de esta herramienta y se compara contra un IIS Full.

      IIS Express and IIS 7
      Introducing IIS Express

  2. November 17, 2010 at 12:21 am

    mmm interesante… y tbn se puede integrar moodle con Facebook? para logearte con la cuenta de Facebook?

    • November 17, 2010 at 12:27 am

      Hola laurence

      Que buena pregunta, estuve investigando y tambien se puede integrar con facebook, de hecho hasta hay un tema para que se vea tal cual.

      En estos links puedes encontrar mas info.

      Tema

      Modulo de Integracion

      Foro de Ayuda

  3. CesarP
    December 3, 2010 at 11:21 am

    Gerardo cambiaron todo el live.azure.com, deberiamos ahora es crear un componente web para integrar lo has probado?

    • December 3, 2010 at 3:42 pm

      Que tal Cesar,

      Si el sitio que comentas live.azure.com ya esta fuera de linea incluso renenvia al nuevo porta, manage.dev.live.com, el proceso es bien sencillo y funcioana exacamente igual.

      Link de como hacerlo aca

  4. April 1, 2011 at 6:57 pm

    Hola Gerardo, muy buen post. fijate que yo ya tengo todo lo que tu dices, pero siempre me sale la pantalla que windows no esta afiliado a live y luego me muestra la siguiente pantalla del moodle respecto a la autenticacion, me imagino que es porque no subi a los usuarios como tu adjuntas en el post, hice la prueba con 2 usuarios pero me saca este mensaje “conector de autenticación desconocido”. ya hace dias me di cuenta que en la parte de autenticacion y luego gestionar autenticacion, me aparece vacio, podrias ayudarme a concluir este proyecto.

  5. Samuel
    April 25, 2011 at 3:33 pm

    hola gerardo me sirvio mucho tu post para mi instalacion anque la estoy haciendo sobre linux el unico problema que tengo es que cuando trato de loguearme con Live ID no me deja , aparece en blanco la pantalla

    http://lms.midominio.net/auth/liveid/login.php

    alguna sugerencia

    Espero me puedas ayudar recibe un cordial saludo.

    • April 25, 2011 at 3:45 pm

      Que tal Samuel,

      Podria enviarme un pantallazo del error, no conozco el servidor de aplicaciones de linux, verifique el archivo php.ini es posible que no este haciendo bien la referencia.

      • Samuel
        May 2, 2011 at 12:39 pm

        Gerardo, Listo ya quedo era un problema con la version de PHP y permisos Globales

        Gracias me haservido de mucho tú post

  1. No trackbacks yet.

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: