Authenticate to Trello in MS Office JavaScript Add-in

Please, please stop relying on Internet Explorer to provide web browser components. It doesn't work as expected for the rest of the Internet. It requires too many hoops to jump through. It has cost too many hours of lost productivity. And it turns out EDGE isn't much better!

Sincerely,
Frustrated Developers everywhere!

We have all been in that situation where we realize that Microsoft's browser technology is not keeping current with the rest of Internet. Sometimes we have no choice to use it as is with Microsoft Office JavaScript Add-ins.

The Problem

I'm writing a small MS Office Add-in which is going to integrate with Trello. So, one of the first tasks I have is to authenticate with Trello. It would seem simple, but it turns out IE gets in the way.

IE and EDGE have a security 'feature' that does not allow a postMessage to be sent between 2 windows from a different domains. Which means an OAuth postMessage from the OAuth provider never comes back to the calling window.

But have hope, MS also provided another way.

Setting up Oauth for Trello - Popup

The setup for getting access to Trello is pretty simple, we follow these steps:

Go out and get your application key to use for Oauth from https://trello.com/app-key

Load up the trello JavaScript wrapper by including a script reference <script src="https://trello.com/1/client.js?key=[key]"></script>

Add a shiny button to the UI to authenticate the user

Call using the Trello client.js library to authenticate and specify that the user

This ran into problems since MS Office still opened up a new window. Very confusing at first, since I didn't choose the popup option.

It turns out, that it is another security feature where the MS Office Add-in is declaring what domains it accesses, so if it tries to navigate to a domain that is not declared, it opens a new window to keep things safer.

Declare your domains

Simply add the domain to the manifest of the MS Office Add-in. You can edit it directly by modifying the xml.

Or you can double click on the Manifest entry and open the property dialog.

Success

And we have success. It navigates successfully, and properly redirects back to our add-in page.

About Us

Tritium Consulting was founded over a decade ago by John Brown. He is a Software Craftsman who has been continually searching for the better approach and loves to share that better approach with clients and his team members.

Contact Us

Drop us a quick note at info@tritiumconsulting.com and let us know how we can help you.