Showing posts with label Azure. Show all posts
Showing posts with label Azure. Show all posts

Office365 Weather WebPart

Posted by Ian Chivers on Thursday, 31 May 2012 / Labels: , , , , / Comments: (2)

A while ago I wrote a Sharepoint web part that displayed a 5 day weather forecast for a user configurable location using Met Office data from the Azure Datamarket. I wanted to try porting this web part to Office365, to see if I could overcome the challenges of working predominantly client side using Javascript.

With the help of jQuery to make ajax requests to the Datamarket and a cryptographic library to encrypt the username and password that is included in the ajax request headers I've managed to accomplish this goal.

One of the major challenges was to overcome the cross site scripting issues, where I was making requests to the Datamarket from the Office365 domain. The Datamarket supports the oData standard well from a .Net Framework perspective, but it requires user interaction to allow the request from a purely web client or javascript approach. Internet Explorer has an object called a XDomainRequest which is specifically designed for cross site data requests, the only problem is that you can't include any headers, which means that authentication was ruled out. Aparently IE 10 will work the same way that Chrome does now and properly support jQuery CORS. So, I had to compromise and change internet explorer's security settings to allow cross site data requests.

I've just published the code in a CodePlex project here: http://o365Weather.codeplex.com

Using jQuery & Windows Azure Marketplace

Posted by Ian Chivers on Saturday, 21 April 2012 / Labels: , , , / Comments: (3)

I'm trying to create an Office365 webpart that displays a 5 day weather forecast. The sandbox restrictions mean that I can't call the data service from the server side code, so I need to make the call client side.

Marketplace data is accessible as JSON, so using jQuery and a cryptography library called crypto.js to handle the authentication I should be able to return some data.

Here is a simple htm page that demonstrates a working call to the Azure Marketplace, the username can be anything but the password should be your Primary Account Key from the data subscription.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Windows Azure Data Market</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="http://crypto-js.googlecode.com/files/2.5.3-crypto-min.js"></script>   
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            var user = "{username}";
            var pwd = "{primary account key}";
            $.support.cors = true;
            $.ajax({
                type: "GET",
                beforeSend: function (xhr) {
                    var bytes = Crypto.charenc.Binary.stringToBytes(user + ":" + pwd);
                    var base64 = Crypto.util.bytesToBase64(bytes);
                    xhr.setRequestHeader("Authorization", "Basic " + base64);
                },
                url: "https://api.datamarket.azure.com/DataGovUK/MetOfficeWeatherOpenData/Site?$top=100&$format=json",
                dataType: "json",               
                success: function (data) {
                    alert('success!');
                },
                error: function (jqXHR, textStatus, errorThrown) {                    
                    alert(errorThrown.message);
                }
            });
        })
    </script>
</head>
<body>

</body>
</html>