Невозможно пройти аутентификацию в Trello из надстройки Microsoft Office JavaScript

Я работаю над написанием надстройки Office с использованием Office JavaScript API. Я использую стандартные леса из Visual Studio.

Я хотел бы подключиться к Trello, поэтому первое, что нужно сделать, - это аутентификация. Я использую оболочку client.js, предоставленную Trello (включая мой ключ).

Я успешно получаю диалог Trello во всплывающем окне и вижу, что я получаю ответ от Trello, который пытается отправить сообщение обратно в открывающее окно, но я никогда не получаю обратный вызов в открывающем окне.

ОБНОВЛЕНИЕ: Надстройки Office автоматически используют версию IE для Windows, в данном случае IE11. Что может быть причиной моей проблемы. ( postMessage все еще не работает на 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>

1 ответ

Решение

Да, IE не поддерживает кросс-домен, кросс-окно postMessage.

Аутентификация Trello поддерживает перенаправление. При первоначальных попытках использования перенаправления открывалось новое окно, пока я не понял, что вам нужно объявить свои домены в манифесте надстройки Office, чтобы он отображался во встроенном окне.

Это работает сейчас. Смотрите этот пост для получения дополнительной информации ( http://tritiumconsulting.com/2016/04/01/authenticate-to-trello-in-ms-office-javascript-add-in/)

Другие вопросы по тегам