Microsoft Edge 上的 SSO 不工作，但在 IE11、Chrome、Safari、Firefox 上工作 - 通过 Office.js 插件

Question

我的 Office.js 插件应用程序中的以下 oAuth2 SSO 代码在 IE11、Chrome、Safari 和 Firefox 中运行良好，但在 Microsoft Edge 中无法运行。我可以看到不记名令牌正在通过 url 返回到弹出对话框：

https://localhost:3000/login?access_token=ya29.ImG6By-0ZWPQB4MsYxxxxxxxxxxxxxxxxxxxxxxxxxxxxE5XsM9v7SBi-OaUBBQucO05luKVP0pYoSrcYzbaUKAAX&token_type=Bearer

我还可以看到 asyncResult.status == 成功，即

[对象对象]：{状态：“成功”，值：对象} 状态：“成功”

值：对象

addEventHandler: function (){var d=OSF.DDA.SyncMethodCalls[OSF.DDA.SyncMethodNames.AddMessageHandler.id],c=d.verifyAndExtractCall(arguments,a,b),e=c[Microsoft.Office. WebExtension.Parameters.EventType],f=c[Microsoft.Office.WebExtension.Parameters.Handler];return b.addEventHandlerAndFireQueuedEvent(e,f)} 参数：空 来电者：空 长度：0 名称：“价值”

原型：对象

proto: function() { [本机代码] }

关闭：function (){var c=OSF._OfficeAppFactory.getHostFacade()[OSF.DDA.DispIdHost.Methods.CloseDialog];c(arguments,g,b,a)}

sendMessage: function (){var c=OSF._OfficeAppFactory.getHostFacade()[OSF.DDA.DispIdHost.Methods.SendMessage];return c(arguments,b,a)}

原型：对象

原型：对象

但是，“console.log('hello');” Microsoft Edge 运行侧边栏/加载项时不会调用。

弹出对话框在 F12 调试控制台中显示：

HTTP403: FORBIDDEN - 服务器理解请求，但拒绝执行。 (XHR)POST - https://browser.pipe.aria.microsoft.com/Collector/3.0/?qsp=true&content-type=application%2Fbond-compact-binary&client-id=NO_AUTH&sdk-version=AWT-Web-JS-1.1.1&x-apikey=a387cfcf60114a43a7699f9fbb49289e-9bceb9fe-1c06-460f-96c5-6a0b247358bc-7238&client-time-epoch-millis=1579626709267&time-delta-to-apply-millis=961

有什么想法吗？

export function loginUsingOAuth() {
    try {
        const sealUrl = getFromStorage('seal_url', STORAGE_TYPE.LOCAL_STORAGE);
        const redirectUrl = `${window.location.protocol}//${window.location.host}/login`;

        let displayInIframe = false;
        let promptBeforeOpen = false;

        if (typeof sealUrl !== 'undefined' && sealUrl) {
            const oAuthUrl = `${sealUrl}/seal-ws/oauth2/login?redirect_uri=${redirectUrl}`;

            Office.context.ui.displayDialogAsync(
                oAuthUrl,
                {
                    height: 80,
                    width: 80,
                    displayInIframe,
                    promptBeforeOpen
                },
                asyncResult => {
                    console.log('asyncResult');
                    console.log(asyncResult);
                    addLog(LOG_TYPE.INFO, 'authentication.loginUsingOAuth', asyncResult);
                    if (asyncResult.status !== 'failed') {
                        const dialog = asyncResult.value;

                        dialog.addEventHandler(Office.EventType.DialogMessageReceived, args => {
                            console.log('hello');

也许这实际上是在 Edge 中执行时的路由问题？ “/login”回调被路由到 AuthCallback.js 组件：

const Routes = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/login" component={AuthCallback} />
            <Route path="/" component={BaseLayout} />
        </Switch>
    </BrowserRouter>
);

AuthCallback.js 组件的构造函数在短暂的停顿后调用 messageParent：

    constructor(props) {
        super(props);
        const paramsObj = queryString.parse(props.location.search);
        const paramsStr = JSON.stringify(paramsObj);
        setTimeout(() => {
            Office.context.ui.messageParent(paramsStr);
        }, 1200);
    }

我开始怀疑 Edge 是否在搞乱重定向。在下图中，您可以看到 IE 和 Edge 针对相同的登录操作返回不同的状态码：

Answer 1

Edge 浏览器似乎有两个问题。

1. 在 Microsoft Edge 上运行时，当 displayInIframe=false 时，重定向/回调不会调用组件构造函数。所有其他浏览器都按预期工作。我添加了条件逻辑来为 Edge 浏览器用例设置 displayInIframe=true

2. 当 displayInIframe=true 时，messageParent 方法也不适用于 Edge 浏览器。因此，我不得不在弹出对话框回调中提取身份验证令牌并将其存放在 local_storage 中。然后父级（侧边栏）轮询 local_storage 以检测登录是否已完成。同样，Chrome、Firefox、Safari、IE11（Mac 和 PC）都很好——只是 Edge 浏览器出了问题。

虽然这是一个丑陋的问题解决方案，但它也不完美，因为如果最终用户尚未登录 SSO，则会显示 Google [Account Selector] 对话框，当 displayInIframe=true 为这会引发 iframe 异常。

我没有看到任何其他选项对我们开放，因为操作系统内部版本号和 MSWord 版本决定了使用哪个浏览器来呈现侧边栏。如果 Edge 没有这些功能缺陷，那么无法选择是使用 IE11 还是使用 Edge 是可以忍受的。