Securing your Azure HTML5 Web App

In this article we will look at the simple procedure for enabling authentication on your static HTML5 website.

Introduction 

In the previous article we looked at how to set up an HTML5 website in Azure. This left the files open to anonymous access. In this article we will look at the simple steps within the azure portal to secure the site with your O365 credentials.

Azure portal admin

From our azure portal homepage (https://portal.azure.com/) select Web Apps

q1

Clicking on the Web App bring up multiple options and setting

q2

Under settings select Authentication / Authorization

q3

And then turn it on

q4

Save – and that’s it – your site is now secured to the Active Directory users provided by your O365 and Azure cloud.

Accessing the home page now brings up the login screen

q5

Conclusion

We have seen how to secure the open Azure site to external users. In the case of the Outlook Add-ins we are trying to create this will leave them accessible to authenticated users.

 

Advertisements

Setting up an Azure HTML 5 web app with source control integration

In this article I will show to create an HTML 5 Web App in Azurefrom a template repository. We will then modify the repo and push out first files back into Azure.

Introduction

In previous articles 1, 2, 3, 4 I have been showing how to use napa development tools to create. In this article I will demonstrate how to create a basic Azure app which will host our files for us.

Azure Web App

From your Azure portal you can create a new web app

z1

In this case we will create xomino.azurewebsites.net. As we are doing nothing more than hosting files right now, we will create it as an empty HTML5 container.

Select to cfreate a web app from existing gallery

a1

Find HTML5 Empty Web App

b1

Moving to stage two give it a name and create

b2

Once the app is created you can then add your files to it a number of ways – my personal preference is to deploy from a git repo.

Web App Dashboard

When you click on the new link you will see the web app dashboard

e1 e2

From there we can set up Integration with Source Control

Hooking Azure up to the local repo

When you select connect to local repo the first time you will be prompted to create a username and password. This is so that you can FTP your files up to azure.

z8

Once that is created you will be presented with a screen to integrate your Git solution (manual or otherwise) with Azure.

b1

I use Webstorm for my development, so used the git tools in there to clone the repo down from Azure

There is nothing more than and HTML file and a favicon…

e3

I then:

  • messed a little with index.html
  • added my Files from the add-in
  • committed them all
  • pushed them back up to azure.

e8

Immediately the azure dashboard updates with a deployment message – once the deployment is complete (which is seconds fast) you will see an arrow top right. Clicking on it shows you the deployment process (3 seconds)

e4

The website is now available. Clicking back on the dashboard we now see activity. Over on the right we can click to open the Azure portal Dashboard for this web appe5

Opening up the website (http://xomino.azurewebsites.net/) we can see the index.html page I messed with

e6

 

And if we navigate to the Add in file folder it exists, but doesn’t do anything (yet)

e7

Conclusion

In this article we have seen how to:

  • Create our first Azure HTML Web App
  • Attach the app to source control locally
  • Add our Outlook Add-in files,
  • Commit and push back to Azure
  • Open the files directly in Azure

The hosting of the Outlook files is crucial for them to be made available to a wider Exchange audience in the future.

NOTE

There is no security associated with this site – it is wide open to Anonymous users. That is probably good in the long term for an Add-in

Two ways to remove a Napa developed Office Add-in

In this article I will show the two methods available for removing a Napa developers plugin from your mail file.

Introduction

As I was developing some Add-ins using Napa I unwittingly deleted them from my dev site not thinking about the consequences – well then I had to deal with them…..

Deleting a development Add-in

So let’s say we created a new Add-in and you delete it from the Napa interface

j2

and then you realize it is still attached to your mail (doh)

j1

you need to manage you own Add-ins

Managing your own Add-ins

Top right – Gear > Manage Add-ins

j3

j4

Select the one to remove and click on the (-) icon above the grid

j5

And there you have it – pretty simple.

j6

Now here’s the “Better” way of doing it

DON’T delete it from the front page of the napa interface

Within the napa developer IDE for the project, right under the Run Project icon there is a “Retract App” icon – use that instead

j7

So then Jeff still exists in your development IDE but not inside your email. Much more elegant.

Conclusion

In this article we have seen two methods for removing a Napa developed add-in from your email client(s)

 

Creating your first custom Outlook Add-in

In this article we will look at how to modify the sample Add-in app and make it do something other than the sample app.

Introduction

In the previous articles we have looked at how to create a sample app, how it works and how to make it contextual. In this article we will make the sample Add-In actually link to something useful.

Bluemix Websockets chat

A while ago I created a sample websockets chat demo – https://xominosocket.mybluemix.net/. It is hosted on IBM’s Bluemix PaaS cloud and uses Socket.io ontop of a node.js server. The back end application runs an in-memory data cache using Redis.

None of which is anything in the slightest to do with Microsoft! Which is the main reason I picked it (the fact that I am lazy and it was just sitting out there as a great example already has nothing to do with it….)

Modifying the sample app

In this article we are going to make a few simple changes to the sample app Home.html which will make the Bluemix Chat demo appear contextually within a email.

Admittedly this is a bit of a hack but hey – it is just a demo.

  • I removed App.js, App.css, Home.js and Home.css – don’t need them
  • I removed the contents of the Body of Home.html and replaced it with an iframe pointing at the websockets demo.
  • I added a little styling to make it seamless
    and ran it

n9

 

n10

As far as the user is aware – we now have a websockets chat application embedded within their Outlook email. The Websockets chat is fully functional within the context of the email.

n11

Marky’s Use Cases #1: Helpdesk support Add-in

So there is an application for this Add-in technology. A “Contact the Helpdesk” link within a business email which would facilitate pulling up a web chat session with a helpdesk representative. The context of the email from whence it was created could be passed to the helpdesk and they would then be able to assist the user.

How cool is that 🙂

Conclusion

In this article we have seen how to insert a completely non-Office application, contextually within an email which only contains the word websockets.

 

 

Making your Outlook Add-in contextual

In this article I will demonstrate how to make an Outlook Add-in appear only on certain words in an email.

Introduction

In previous articles we have looked at creating an Outlook Add-in and then how it works. Other than only being a sample app, this Add-in now appears on every email. What would be much more user friendly would be to make sure it only appear contextually, say if a word was in the body of an email for example.

In this article we are going to make the example Add-in only appear in emails with the word “Websockets” in it.

The XML Manifest

If we look at the properties of the napa dev console (the spanner on the left)

n1

We can see that there are a number of options for the “read form”

n2

At the top we can see “Edit read form XML” which is the manifest for the application. What we are looking at above is the visual representation of that XML file.

n3

Looking at the Use regular expression activation rules to show a mail add-in in Outlook article we can find an example of a rule which check through the body of the email as plain text

<Rule xsi:type=”ItemHasRegularExpressionMatch”
PropertyName=”BodyAsPlaintext”
RegExName=”TickerSymbols”
RegExValue=”\b(NYSE|NASDAQ|AMEX):\s*[A-Za-z]+\b”/>

But in my example I am going to look for the words Websockets and make sure that ignorecase is true (websockets or WebSOckEts would work)

<Rule xsi:type=”ItemHasRegularExpressionMatch”
PropertyName=”BodyAsPlaintext”
IgnoreCase=”true”
RegExName=”Websockets”
RegExValue=”websockets”/>

I inserted the XML snippet above *inside* of the XML example code shown

n4

and if you look at the non-XML version of the Read Form properties, you can see how this change is reflected

n5

Running the application

If we look at the sample sample email as before – we will now no longer see any Marky Websockets Add-in

n6

But if we find a new email with the word websockets inside it – we can see that it is contextually highlighted

n7

Clicking on the word itself then triggers the sample Add-in to run

n8

Conclusion

In this article we have looked at how we can simply add an Add-in contextually to the body of an email.

 

 

 

How does the sample Outlook Add-in work?

In this article I will describe how the out of the box Outlook Add-in created in the previous article works.

Introduction

In the previous article I showed how we can create an outlook Add-in, out of the box in less than 30 minutes. In this article we will take a look at how the Add-in actually works. That will in turn allow us to create our own in the future.

The Add-in

The Add-in itself is build up of a number of different parts which we will look at in turn. As this is a Read only app we will not look into the AppCompose folder as none of that is used in this Add-in

n1

Home.html

The Home.html represents the core of the Add-in and as you can see from the image – it is a complete HTML file

n2

I say complete HTML file not to be facetious but to highlight what the Add-in really is. It is a self contained web application which has contextual information available from the parent Email. To better understand this, if we look at the way the Add-in is created within the interface, it should make more sense.

How the Add-in works (Nov 2015)

This is very likely to change over time, so contextually in November 2015 this is how it works. When you click on the Add-in link within the email an iframe is created within the website – the URL of that is the Add-in itself.

Looking at the DOM through Chrome Dev Tools we can see the Add-in and nothing else underneath it

n3

When we click on the Marky Websockets (which will make sense in a later article) we can then see the new iFrame created

n4

Clicking on the URL and opening the iFrame source in a new window reveals the basic building blocks of the Add-in

https://www.napacloudapp.com/Run/d4f76aa8055344fca71c06bc35fb43b6/aHR0cHM6Ly9wc2NsaXN0ZW5zMS5zaGFyZXBvaW50LmNvbS9zaXRlcy9tYXJreS1kZXY/AppRead/Home/Home.html?et=&_host_Info=Outlook|Web|16.00#&_xdm_Info=-1b68cff0_-3d7d1568_1446597857415|ocii1|https://outlook.office365.com/owa/?realm=psclistens.com#path=/mail

n5

Viewing the source – it looks just like what we saw as home.html in the napa cloud app – cos it is !!!

n6

Once we start to think of the Add-in as it’s own iframe running application we can start to envision all sorts of things we can do here….but more on that later.

Within home.html we load a number of files:

n7

  • jQuery – nothing special there
  • office.js – this is the core of the Office Add-in technology, it creates the interface for the whole Add-in, both from the iframe creation to the iframe gaining the details from the parent.
  • App.js – this file creates some display functionality within the context of the app
  • Home.js – this is the file which creates the contents of the Add-in, within the context of the parent email (the actual Add-in code)

office.js

Well I would love to explain how this works – but it is rather obfuscated…..https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js – I am going to have to piece this together over time – but for right now, let’s just go with – that is what makes all these unicorns and rainbows work……what I can tell is that it is loading a whole load of other libraries as well. It is not the only magic box.

App.js

Once the application is loaded within the app, this Immediately-Invoked Function Expression (IIFE) runs and creates the HTML for a notification popup, and appends it to the bottom of the Add-in within the iframe

n8

 

Within the DOM of the iframe contents we can see the planted classname clearly. This notification will be called when we click on the name of the sender in the Add-in.

n9

Home.js

Home.js creates the interface from the Add-in to the information in the parent email.

n10

This IIFE code comes in three sections:

  • Office.initialize
    • This is the code which triggers the office Add-in – it states that in the jQuery document.ready even call these two functions
  • app.initialize
    • This calls the initialize function() created within App.js
  • displayItemDetails()
    • This is a function which we will go into further

displayItemDetails()

The “Office” namespace is used through all the Add-in codebase and precedes all the JavaScript API calls

In this function the code uses the Office.cast.item , which is actually superfluous. If you look at the link you will see that it is used within Visual Studio to achieve Intellisense for the real code which is “var item = Office.context.mailbox.item;”. The function can be simplified to the following

n11

As you can see from the code above I have added a console.log(item) to see what we are getting here. Contained within the item object we can see other objects and the first one contains a lot of the information available within the JavaScript API

n12

Further down the console.log we are able to see “functions” within the object

n13

thus in our code – item.from actually calls the namespaced function within the item object, that then parses the object and collects the from information (see previous image)

Going back to the home.js code – this finall uses some jQuery to

  1. $(‘#from’).text(from.displayName);
    • Add the “displayName” to the id named from within home.html

n14

  1. $(‘#from’).click(function () {
    app.showNotification(from.displayName, from.emailAddress);
    });

    • When you click on the item within the from DIV the app.showNotification is called passing in the name and emailAddress

n15

 

Conclusion

In this article we have taken a rather exhaustive look at exactly how the sample Outlook Add-in works. I believe that with a better understanding of how the underlying application functionality work, we are able to better harness it’s power in the future.

In the next article I will look at how to manipulate the contents of the sample and start to build something with purpose.

 

Creating your first O365 Outlook Add-in in less than 30 minutes

In this article I will demonstrate how use the napa cloud application development environment to create an Outlook Add-in.

Introduction

That basis for this article can be found all over the Microsoft MSDN development website(s) but the main starting points are:

You will need to add the Napa Office dev tools to your dev site – https://www.napacloudapp.com/

I have a dev site created within the PSC O365 environment and from there I was able to create a new app.

Creating a new App

n1

I was directed to the napaclousapp.com site where I added a new app

n2

Select to build an Mail add in, give it a name and then Create

n3

The napa development IDE comes up. It contains the default of a sample app

n4

Publish it, by clicking on the Go Arrow on the left

n5

You will be asked to log into your dev site (and therefore your O365 account)

n6

Clicking Continue will open your O365 account you will then see the Add in Immediately appear in all emails

n7

Clicking on the Add-in will reveal it

n8

Conclusion

In this article we have seen how we can create the basic simple Outlook Add-In, in less than 10 minutes of work. In future articles we will look at how it works and how you can modify it to do your evil bidding.