This Blog

Syndication

Search

Tags

Community

Email Notifications

Archives

Enlaces Recomendados

SharePoint 2010 & Office 365: Integración con Windows Azure vía jQuery (I)!

A la hora de integrar servicios tanto en SharePoint 2010 On-Premise como en su homólogo en la nube  (dentro de Office 365), uno de los escenarios que emerge con fuerza es el de integrar servicios WCF publicados en Azure y consumirlos en ambos entornos a través de jQuery que permite superar la restricción que tenemos en SharePoint Online (SPO) de llamar a servicios dentro de soluciones Sandbox puras. La idea de este primer artículo es mostrar como consumir un servicio WCF publicado en Azure aprovechando el WCF Service Web Role usando jQuery:

  • Iniciamos Visual Studio y creamos un proyecto de tipo Windows Azure Project.
  • A continuación elegimos como role el de C# –> WCF Service Web Role.
  • En el ejemplo de integración, vamos a crear y publicar un simple servicio WCF que permite sumar dos números introducidos por el usuario. Una vez creada la estructura del proyecto, editamos la  interfaz que se crea por defecto y la renombramos ISumService. Configuramos la interfaz de acuerdo al siguiente código en el que definimos tanto el contrato del servicio (ServiceContract) como las operaciones que forman parte de él (OperationContract) que tenemos que decorar adecuadamente (atributo WebInvoke) para que el servicio pueda ser llamado mediante jQuery lo que en este caso se traduce en que tanto la llamada como la respuesta realizada serán en formato JSON.
   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Runtime.Serialization;
   5: using System.ServiceModel;
   6: using System.ServiceModel.Web;
   7: using System.Text;
   8:  
   9: namespace SumServiceWebService
  10: {
  11:     [ServiceContract]
  12:     public interface ISumService
  13:     {
  14:         [OperationContract]
  15:         [WebInvoke(Method = "POST",
  16:             BodyStyle = WebMessageBodyStyle.WrappedRequest,
  17:             RequestFormat = WebMessageFormat.Json,
  18:             ResponseFormat = WebMessageFormat.Json,
  19:             UriTemplate = "sum")]
  20:         int SumNumbers(int iNumber1, int iNumber2);  
  21:     }
  22: }
  • Una vez definida la implementación de la interfaz y los métodos correspondientes, el siguiente paso es definir adecuadamente la clase que contiene la lógica del servicio y que sigue dicha interfaz. Como véis, la clase SumService implementa la interfaz ISumService y además la decoramos con los atributos ServiceBehavior y AspNetCompatibilityRequirements que especifica el modo de compatibilidad ASP.NET del servicio.
   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Runtime.Serialization;
   5: using System.ServiceModel;
   6: using System.ServiceModel.Web;
   7: using System.Text;
   8:  
   9: //Espacios de nombres necesarios
  10: using System.ServiceModel.Activation;
  11:  
  12:  
  13: namespace SumServiceWebService
  14: {
  15:  
  16:     [ServiceBehavior(AddressFilterMode = AddressFilterMode.Any)]
  17:     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  18:     
  19:     public class SumService : ISumService
  20:     {
  21:         public int SumNumbers(int iNumber1, int iNumber2)
  22:         {
  23:             int iResult= iNumber1 + iNumber2;
  24:             return iResult;
  25:         }
  26:     }
  27: }
  • El siguiente paso a realizar es configurar adecuadamente el Web.Config del servicio para exponerlo de forma que pueda ser llamado desde jQuery sin problemas. Esto lo modelamos a través del correspondiente behavior en el que básicamente definimos el tipo de binding (webHttpBinding) y el contrato ya indicado en la definición de la interfaz.
   1: <?xml version="1.0"?>
   2: <configuration>
   3:     <system.diagnostics>
   4:         <trace>
   5:             <listeners>
   6:                 <add type="Microsoft.WindowsAzure.Diagnostics.DiagnosticMonitorTraceListener, Microsoft.WindowsAzure.Diagnostics, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" name="AzureDiagnostics">
   7:                     <filter type=""/>
   8:                 </add>
   9:             </listeners>
  10:         </trace>
  11:     </system.diagnostics>
  12:     <appSettings/>
  13:     <connectionStrings/>
  14:     <system.web>
  15:         <compilation debug="true" targetFramework="4.0">
  16:         </compilation>
  17:         <!--
  18:           The <authentication> section enables configuration 
  19:           of the security authentication mode used by 
  20:           ASP.NET to identify an incoming user. 
  21:         -->
  22:         <authentication mode="Windows"/>
  23:         <!--
  24:            The <customErrors> section enables configuration 
  25:            of what to do if/when an unhandled error occurs 
  26:            during the execution of a request. Specifically, 
  27:            it enables developers to configure html error pages 
  28:            to be displayed in place of a error stack trace.
  29:  
  30:            <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
  31:              <error statusCode="403" redirect="NoAccess.htm" />
  32:              <error statusCode="404" redirect="FileNotFound.htm" />
  33:            </customErrors>
  34:         -->
  35:         <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>
  36:         <machineKey decryption="AES" decryptionKey="0CA3EFAF0F7A5E7A62681C0BF656EE0ECE31ACEE3E1023BA3FAD20EA5F199DE8" validation="SHA1" validationKey="FCF71343240C6E081AF3C9F3C10C3F3C11B903359DE62168764FF0DCE537184F0535D5D9AD66DEDC97DC1ABFF7FA540B4DFD82E5BB196B95D15FF81F75AD5328" />
  37:     </system.web>
  38:     <!-- 
  39:         The system.webServer section is required for running ASP.NET AJAX under Internet
  40:         Information Services 7.0.  It is not necessary for previous version of IIS.
  41:     -->
  42:     <system.serviceModel>
  43:         <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  44:         <services>
  45:             <service behaviorConfiguration="SumServiceWebService.CloudWCFServiceBehavior"
  46:                      name="SumServiceWebService.SumService">
  47:                 <endpoint address=""
  48:                           binding="webHttpBinding"
  49:         behaviorConfiguration="JsonEndpointBehavior"
  50:         contract="SumServiceWebService.ISumService" />
  51:                 <endpoint address="mex"
  52:                           binding="mexHttpBinding"
  53:                           contract="IMetadataExchange" />
  54:             </service>
  55:         </services>
  56:         <behaviors>
  57:             <serviceBehaviors>
  58:                 <behavior name="SumServiceWebService.CloudWCFServiceBehavior">
  59:                     <!--The useRequestHeadersForMetadataAddress behavior is contained in the KB981002- WCF: Hotfix rollup upodate. This behavior is required for WCF to correctly serve metadata when behind a load balancer (which is the case in Windows Azure)-->
  60:                     <useRequestHeadersForMetadataAddress>
  61:                         <defaultPorts>
  62:                             <add scheme="http"
  63:                                  port="81"/>
  64:                             <add scheme="https"
  65:                                  port="444"/>
  66:                         </defaultPorts>
  67:                     </useRequestHeadersForMetadataAddress>
  68:                     <serviceMetadata httpGetEnabled="true"/>
  69:                     <serviceDebug includeExceptionDetailInFaults="true"/>
  70:                 </behavior>
  71:             </serviceBehaviors>
  72:             <endpointBehaviors>
  73:                 <behavior name="JsonEndpointBehavior">
  74:                     <webHttp/>
  75:                 </behavior>
  76:             </endpointBehaviors>
  77:         </behaviors>
  78:  
  79:     </system.serviceModel>
  80:  
  81: </configuration>
  • En teoría, con los pasos anteriores ya hemos acabado. De hecho, si publicamos el servicio en Windows Azure de forma directa a través de Visual Studio o a través del portal de Windows Azure indicando dónde se encuentran el paquete a publicar y el archivo de configuración lo tendremos accesible y listo para su consumo. Si probamos a consumir el servicio desde una página HTML, todo irá sobre ruedas…pero no ocurre lo mismo si lo hacemos desde SharePoint por el famoso “Cross-Domain issue” que básicamente se traduce en el bloqueo seguro que realizan los navegadores cuando interpretan que se están realizando llamadas entre dominios de aplicación diferentes como es nuestro caso.
  • La solución para salir del paso, si se os presenta este problema, pasa por añadir un archivo “Global.asax” a nuestro proyecto de servicio WCF y permitir que se puedan realizar llamadas entre dominios diferentes superando el bloqueo introducido por el navegador. Para ello, añadimos en el método Application_BeginReguest() de Global.asax las siguientes cabeceras en la respuesta del servicio:
   1: protected void Application_BeginRequest(object sender, EventArgs e)
   2: {
   3:     HttpContext.Current.Response.AddHeader(
   4:         "Access-Control-Allow-Origin", "*");
   5:     HttpContext.Current.Response.AddHeader(
   6:         "Access-Control-Allow-Methods","GET, POST");
   7:     HttpContext.Current.Response.AddHeader(
   8:         "Access-Control-Allow-Headers","Content-Type, Accept");
   9:     HttpContext.Current.Response.AddHeader(
  10:         "Access-Control-Max-Age","1728000");
  11:  
  12: }
  • Actualizamos el servicio publicado en Azure, y ahora si que funcionará sin problemas las llamadas al mismo desde código jQuery. En mi caso, el código jQuery que llama al servicio y procesa la respuesta del mismo es el siguiente:
   1: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
   2: ript type="text/javascript">
   3: TA[
   4:  var HolJQuerySPOnPrem = {
   5:      // This will hook up elements on the page.
   6:      Initialize: function () {
   7:          $("#Sum").click(null, function () {
   8:              var Number1 = parseFloat($("#Number1").val());                     
   9:              var Number2 = parseFloat($("#Number2").val());
  10:              // make a json string - you SHOULD use a library
  11:              var data = '{ "iNumber1" : ' + Number1 + ', "iNumber2": ' + Number2 + '}';
  12:              // send via ajax
  13:              alert("Llamando al servicio de Azure");      
  14:              $.ajax({
  15:                  data: data,
  16:                  cache: false,
  17:                  success: HolJQuerySPOnPrem.ReceiveData,
  18:                  error: HolJQuerySPOnPrem.ReceiveDataError,
  19:                  type: "POST",
  20:                  dataType: "json",
  21:                  contentType: "application/json; charset=utf-8",
  22:                  url: "http://sumservice.cloudapp.net:8085/SumService.svc/sum"
  23:              }); 
  24:              return false;
  25:          });
  26:      },
  27:  
  28:      // When the response arrives, update the answer
  29:      ReceiveData: function (data, status, xhr) {
  30:          $("#result").text(data.toFixed(2));
  31:          alert("Operación realizada con éxito");
  32:      },
  33:      ReceiveDataError: function () {
  34:          alert("Operación fallida");
  35:      }
  36:  };
  37:  
  38:  // TODO: 5.5.4 - On Load event; called before the page contents are loaded. 
  39:  $(document).ready(HolJQuerySPOnPrem.Initialize);         
  40: //]]>
  41: ript>
  42: le="margin: 15px;">
  43: :<input type="text" id="Number1" style="position: absolute; left: 150px;" />
  44: </div>
  45: le="margin: 15px;">
  46: :<input type="text" id="Number2" style="position: absolute; left: 150px;" />
  47: </div>
  48: le="margin: 15px;">
  49: id="Sum">Sumar</button>
  50: </div>
  51: le="margin: 15px;">
  52: o:<span id="result" style="position: absolute; left: 150px;" ></span>
  53: </div>
  • Sin más, para comprobar que todo está operativo nos vamos a nuestro sitio de SharePoint de trabajo y en una página de WebParts insertamos por ejemplo una Content Editor WebPart en la que añadimos el código anterior.
  • Finalmente, probamos que la llamada al servicio funciona y se devuelve el resultado esperado.

Varios comentarios finales respecto a la integración:

  • En un entorno de SharePoint On-Premise, la integración funciona sin problemas tanto en IE 8 como en FireFox 3.X.
  • En un entorno SPO, la integración funciona correctamente en Google Chrome, pero no en IE9 y FireFox 3.X…la guerra de los navegadores vuelve a escena.

Published 13/6/2011 9:37 por Juan Carlos González Martín

Comparte este post:

Comentarios

# SharePoint 2010 y Azure: Integración con el Windows Azure Data Market (I)!@ Thursday, May 24, 2012 5:46 PM

Otro gran punto de integración entre SharePoint 2010 y Windows Azure es a través del Windows Azure Data

Blog del CIIN