如何修复 Outlook Web 中的“Office.js 在 Office 客户端之外加载”警告

问题描述 投票:0回答:1

我打开 SSO 的 Office 对话框,登录后我使用以下代码成功从 URL 获取代码:

const currentUrl = window.location.href;
console.log(currentUrl);

const getCodeFromUrl = (currentUrl) => {
    const params = new URLSearchParams(currentUrl.split('?')[1]);
    return params.get('code');
};

const code = getCodeFromUrl(currentUrl);
console.log('Code:', code);

Office.onReady(function (officeContext) {
    if (officeContext) {
        if (code) {
            Office.context.ui.messageParent(JSON.stringify(code));
        } else {
            console.log("code not found");
        }
    } else {
        console.log('Office context not available.');
    }
});

获取代码后,桌面上的对话框成功关闭。但是,当我们在 Outlook Web 上测试相同的内容时,对话框不会关闭并给出以下警告和错误:

警告:Office.js 在 Office 客户端之外加载

当我重定向到我的 html 时,我得到了代码,但这里出现错误

redirect.html?code=RIaDfTxLDxUvRWLZWNox0EcIeUz9FT:52 

Uncaught TypeError: Cannot read properties of undefined (reading 'messageParent')
        at redirect.html?code=RIaDfTxLDxUvRWLZWNox0EcIeUz9FT:52:39
        at office.js:76:25549
        at t (office.js:76:24950)
        at s (office.js:76:32645)
        at c (office.js:76:4373)
        at f.waitForFunction (office.js:76:4462)
        at z (office.js:76:33109)
        at HTMLScriptElement.m (office.js:76:6525)
    :3000/favicon.ico:1 
    **Failed to load resource**: the server responded with a status of 404 (Not Found)

这是我的office.js代码:

let dialog;
Office.onReady(function (info) {
    if (info.host === Office.HostType.Outlook) {
        if (Office.context && Office.context.ui) {
            Office.context.ui.displayDialogAsync(
                authorizationUrl,
                { height: 80, width: 40, requireHTTPS: true, promptBeforeOpen: false },
                function (asyncResult) {
                    if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
                        dialog = asyncResult.value;
                        dialog.addEventHandler(Office.EventType.DialogMessageReceived, function (arg) {
                            const code = arg.message;
                            dialog.close();

                            // Invoke callback with the received code
                            callback(code);
                        });
                    } else {
                        console.log('Failed to open dialog:', asyncResult.error.message);
                    }
                }
            );
        } else {
            console.log('Office context or UI not available.');
        }
    } else {
        console.log('Office host is not Outlook.');
    }
});

如何解决这个问题?

outlook office365 office-js office-addins outlook-web-addins
1个回答
0
投票

我不确定您为什么会遇到这个问题。看起来我的代码和你的代码之间的区别在于你使用 onReady 而我使用初始化。

这是我的工作 SSO 对话框

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Activate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="/assets/images/icon32.png" />
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" 
type="text/javascript"></script>
<script type="text/javascript">
  Office.initialize = function () {
    function getHashStringParameter(paramToRetrieve) {
      var hash = location.hash.substring(1);
      if (!hash) return null; // No hash available

      const urlParams = new URLSearchParams(hash);
      return urlParams.get(paramToRetrieve);
    }

    var idToken = getHashStringParameter("id_token");
    var accessToken = getHashStringParameter("access_token");
    var code = getHashStringParameter("code");
    if (idToken) {
      var messageObject = {};
      if (idToken !== null) {
        messageObject = {
          isSuccess: true,
          idToken: idToken,
          accessToken: accessToken,
          code: code,
          search: window.location.href,
        };
      } else {
        messageObject = { isSuccess: false, error: "idToken was null" };
      }

      // Tell the task pane about the outcome.
      Office.context.ui.messageParent(JSON.stringify(messageObject));
    }
  };
</script>
© www.soinside.com 2019 - 2024. All rights reserved.