CODEWITHSUNDEEP
single-sign-onoffice-jsmicrosoft-edge
Paul Brown
Paul Brown

Reputation: 71

SSO on Microsoft Edge not working but does work on IE11, Chrome, Safari, Firefox - via Office.js add-in

The following oAuth2 SSO code in my Office.js addin application works great in IE11, Chrome, Safari and Firefox, but doesn't work in Microsoft Edge. I can see the bearer token is being returned to the pop-up dialog via the url:

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

I can also see that the asyncResult.status == succeeded, i.e.

[object Object]: {status: "succeeded", value: Object} status: "succeeded"

value: Object

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)} arguments: null caller: null length: 0 name: "value"

prototype: Object

proto: function() { [native code] }

close: 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)}

proto: Object

proto: Object

However, the "console.log('hello');" doesn't get called when Microsoft Edge is running the sidebar/add-in.

The pop-up dialog is showing this in the F12 debug console:

HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it. (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

Any ideas?

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');

Maybe this is actually a routing issue when executing in Edge? The "/login" callback is routed to the AuthCallback.js component:


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

The constructor of the AuthCallback.js component calls messageParent after a short pause:

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

I'm starting to wonder if Edge is messing with the redirect. In the image below you can see that IE and Edge are returning different status codes for the same sign-on operation:

enter image description here

Upvotes: 1

Views: 6514

Answers (1)

Paul Brown
Paul Brown

Reputation: 71

There seems to be two problems with the Edge browser.

  1. The redirect/callback is not calling the components constructor when displayInIframe=false when running on Microsoft Edge. All other browsers work as expected. I've added conditional logic to set displayInIframe=true for the Edge browser use-case

  2. The messageParent method also does not work for the Edge browser when displayInIframe=true. Therefore I've had to extract the auth token in the pop-up dialog callback and stash it away in the local_storage. The parent (the sidebar) is then polling the local_storage to detect that the sign-in has completed. Again, Chrome, Firefox, Safari, IE11 (both Mac and PC) are all fine - its just the Edge browser that is failing.

Whilst this is an ugly solution to the problem it is also imperfect because IF the end-user is not already signed-in to SSO then the Google [Account Selector] dialog is shown, which is a problem when displayInIframe=true as this throws an iframe exception.

I don't see any other option open to us, because the O/S build number and MSWord version dictates which browser is used to render the sidebar. The inability to choose whether IE11 or Edge is used would be bearable if Edge didn't have these functional deficits.

Upvotes: 0

Related Questions