无法从 Microsoft Office JavaScript 插件向 Trello 进行身份验证答案

【问题标题】：Unable to authenticate to Trello from Microsoft Office JavaScript Add-in无法从 Microsoft Office JavaScript 插件向 Trello 进行身份验证
【发布时间】：2016-07-17 05:40:14
【问题描述】：

我正在使用 Office JavaScript API 编写 Office 加载项。我正在使用 Visual Studio 中的默认脚手架。

我想连接到 Trello，所以首先要做的是进行身份验证。我正在使用 Trello 提供的 client.js 包装器（包括我的密钥）。

我在弹出窗口中成功获取了 Trello 对话框，并且我看到我从 Trello 收到了试图将消息发布回开启器窗口的响应，但我从未在开启器窗口中收到回调。

更新：Office 加载项自动使用 Windows 上的 IE 版本，在本例中为 IE11。这可能是我的问题的原因。 (postMessage still broken on IE11?)

更新 2：来自 Trello 的关于如何验证和列出卡片的示例。适用于 Chrome 和 Firefox，但 IE 11 和 EDGE 已损坏。 (http://jsfiddle.net/danlec/nNesx/)。

关于如何向 Trello 进行身份验证而不是使用 client.js 有什么想法吗？

来自 Trello 的回应：

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

项目中的 Home.html 和 Home.js 代码。

/// <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>

【问题讨论】：

经过更多研究，我相信 IE 11 正在阻止来自另一个域的 postMessage 作为安全功能。 (stackoverflow.com/questions/21070553/…)

标签： javascript ms-office office365 office-js trello

【解决方案1】：

是的，IE不支持跨域、跨窗口postMessage。

Trello 身份验证确实支持重定向。在最初尝试使用重定向时，它会打开一个新窗口，直到我意识到您需要在 Office 加载项清单中声明您的域才能在嵌入窗口中显示。

现在可以了。更多详情请参阅此帖子 (http://tritiumconsulting.com/2016/04/01/authenticate-to-trello-in-ms-office-javascript-add-in/)

【讨论】：