Unable to authenticate to Trello from Microsoft Office JavaScript Add-in

Question

I'm working on writing an Office Add-in using the Office JavaScript API. I'm using the default scaffolding from Visual Studio.

I'd like to connect to Trello, so the first thing to do is authenticate. I'm using the client.js wrapper provided by Trello (including my key).

I successfully get the Trello dialog in a popup, and I see that I get the response back from Trello that is trying to post a message back to the opener window, but I never get the callback in the opener window.

UPDATE: Office Add-ins automatically use the version of IE on Windows, which in this case is IE11. Which may be the cause of my issue. (postMessage still broken on IE11?)

UPDATE 2: Sample from Trello on how to authenticate and list cards. Works in Chrome and Firefox, but IE 11 and EDGE are broken. (http://jsfiddle.net/danlec/nNesx/).

Any thoughts on how to authenticate to Trello instead of using the client.js?

Response from Trello:

<html><head><script> if(window.opener) { window.opener.postMessage("435b83db5a8f260acdccd4a33b617b4e5daaed3cc2eefcb7ffdbbb0975ba00fa", "https://localhost:44300") } </script></head></html>

Home.html and Home.js code from the project.

/// <reference path="../App.js" />
/// <reference path=
(function () {
    "use strict";
    
    function onReady() {
        app.initialize();

        //$('#get-data-from-selection').click(getDataFromSelection);

        $('#get-data-from-trello').click(getDataFromTrello);

        $('#authenticate-with-trello').click(authenticateWithTrello);
    }

    // The initialize function must be run each time a new page is loaded
    Office.initialize = function (reason) {
        $(document).ready(onReady);
    };

    function authenticateWithTrello() {

        Trello.authorize(
            {
                type: 'popup',
                persist: true,
                success: function () {
                    app.showNotification('Successful authentication');
                },
                error: function () {
                    app.showNotification('Successful authentication');
                }
            }
            );

   }

    
    function getDataFromTrello() {
        Trello.get('/member/me/boards',
            function (successMsg) {
                app.showNotification(successMsg);
            },
            function (errorMsg) {
                app.showNotification(errorMsg.responseText);
            }
            );
    }




})();

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>

    <link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <!-- To enable offline debugging using a local reference to Office.js, use:                        -->
    <!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script>  -->
    <!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script>  -->

    <script src="https://trello.com/1/client.js?key=a0b60a9317bf763fc35e2dd42c19ecbc"></script>

    <link href="../App.css" rel="stylesheet" type="text/css" />
    <script src="../App.js" type="text/javascript"></script>

    <link href="Home.css" rel="stylesheet" type="text/css" />
    <script src="Home.js" type="text/javascript"></script>
</head>
<body>
    <div id="content-header">
        <div class="padding">
            <h1>Trello Integration</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <p><strong>Add home screen content here.</strong></p>
            <p>For example:</p>
            <button id="authenticate-with-trello">Authenticate with trello</button>
            <button id="get-data-from-trello">Get data from trello</button>

            <p style="margin-top: 50px;">
                <a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=276812">Find more samples online...</a>
            </p>
        </div>
    </div>

</body>
</html>

After some more research, I believe that IE 11 is preventing the postMessage from another domain as security feature. (http://stackoverflow.com/questions/21070553/postmessage-still-broken-on-ie11) — John Brown, Mar 30 '16 at 15:37

score 2 · Accepted Answer · answered Apr 01 '16 at 14:50

Yes, IE doesn't support cross domain, cross window postMessage.

The Trello authentication does support redirect. In initial attempts at using the redirect it opened a new window, until I realized that you need to declare your domains in the Office Add-in Manifest in order for it to display within the embedded window.

It works now. See this post for more details (http://tritiumconsulting.com/2016/04/01/authenticate-to-trello-in-ms-office-javascript-add-in/)

Unable to authenticate to Trello from Microsoft Office JavaScript Add-in

1 Answers1