首页 > 解决方案 > Microsoft Edge 上的 SSO 不工作,但在 IE11、Chrome、Safari、Firefox 上工作 - 通过 Office.js 插件

问题描述

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

https://localhost:3000/login?access_token=ya29.ImG6By-0ZWPQB4MsYxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxE5XsM9v7SBi-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)} 参数:null 调用者:null 长度:0 名称:“值”

原型:对象

原型:函数(){[本机代码]}

关闭: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 针对相同的登录操作返回不同的状态码:

在此处输入图像描述

标签: single-sign-onoffice-jsmicrosoft-edge

解决方案


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 异常。

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


推荐阅读