Issue with AngularJS $state.provider and redirecting. about office-js-helpers

[ozippy]

This library seems to be what I've been looking for, so thanks. I am trying to get it to work with a React Office Add-in, but I don't seem to be able to solve this issue. Is there an example of a React Office add-in that implements the authentication from this library that I could refer to?

Thanks

[WrathOfZombies]

@Rick-Kirkham @Reezaali : Could you guys update once the Image Extractor sample is complete?

@ozippy Thank you 👍. For the moment you could use this sample. Its a React sample for Microsoft Teams but in terms of OfficeHelpers the difference will only be the removal of a single flag.

On a side note, to aid your react development you could use the generator-office to scaffold a React project.

[WrathOfZombies]

The sample worked fine for me. @Zlatkovsky, @sumurthy I am beginning to think this is an issue with the dialogAPI on Outlook. You can take a look at the GIF below. There are only two differences here:

1. I am using Word online instead of Outlook
2. I am using my own custom manifest

manifest.txt

@Reezaali FYI

[karthik15981]

I was running into the same issue with my react add-in. In my case, the problem was because I was using "https://localhost:3000" as my redirect URL instead of "https://localhost:3000/taskpane.html".

To fix the issue, I had to do the following:

1. In azure, specify the redirect URL as "https://localhost:3000/taskpane.html"

2. In code, specify the same:
   authenticator.endpoints.registerMicrosoftAuth("xxxxxx-xxxx",{redirectUrl: "https://localhost:3000/taskpane.html"});

[stotzout]

A solution for this is following:

OfficeHelpers.Authenticator.isAuthDialog()

Insert this line before your RouterModule gets initialized. In documentation is written that you have to add this line in Office.initialize function. But if it's called after RouterModule you will get problems.

Now I got the library running in AngularJS and AngularJS 2. (I build a Word-Add-In)

[WrathOfZombies]

Thanks for sharing @stotzout. My approach to that problem is to make that call before the bootstrap itself as I cannot see a reason for any code to run in the popup. For that the OfficeHelpers.Authenticator.isAuthDialog() actually returns a boolean value which is true, if the code is running inside of a dialog.

So in AngularJS/Angular/React i'd do something like:

if(!OfficeHelpers.Authenticator.isAuthDialog()) {
    /* bootstrap or do the root level render here */
}

/**
 *For react 
* render a spinner here to show loading, In Angular, it can be done implicitly 
*/

For an example, please look at the Yeoman Generator for Office.

[alabels9]

Hi,
I'm also trying to get this working with react Outlook add in. I'm not sure if I'm setting it up correctly, because the dialog window never closes, so I can see it has returned the accessToken, but my code never gets it. Below is a short code sample - can anyone point out what I'm doing wrong? Please let me know if I can provide more information.

import * as React from 'react'
import { Login } from './login/Login'
import { Authenticator, Utilities, DefaultEndpoints } from '@microsoft/office-js-helpers'

Office.initialize = () => {
    if (Authenticator.isAuthDialog()) return

    const authenticator = new Authenticator()
    authenticator.endpoints.registerMicrosoftAuth(clientId, {
        redirectUrl: 'https://login.live.com/oauth20_desktop.srf',
        scope: 'https://outlook.office.com/tasks.readwrite'  
    })

    authenticator.authenticate(DefaultEndpoints.Microsoft)
        .then(function (token) {
           // get token
        })
        .catch(function (error) {
            Utilities.log(error)
            throw new Error('Failed to login using your Microsoft Account')
        })
}

export class App extends React.Component<AppProps, AppState> {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        return (
            <Login />
        )
    }
}

[ozippy]

I have tried using the Microsoft Teams Todo sample as a basis for getting an Outlook add-in to work. I have used the yo office generator and then retrofitted the same techniques you used in the Teams sample.

It seems to work in a normal Chrome window, but when I open an incognito session, open outlook online and try to open the add-in i don't get a dialog. I open the dev tools and in the console, I see the below error;

TypeError: Cannot read property 'displayDialogAsync' of undefined
at eval (eval at ../node_modules/@microsoft/office-js-helpers/dist/helpers/dialog.js (app.d033943….js:847), :68:30)
at Promise ()
at Dialog._addinDialog (eval at ../node_modules/@microsoft/office-js-helpers/dist/helpers/dialog.js (app.d033943….js:847), :67:16)
at Dialog.get [as result] (eval at ../node_modules/@microsoft/office-js-helpers/dist/helpers/dialog.js (app.d033943….js:847), :58:81)
at Authenticator.eval (eval at ../node_modules/@microsoft/office-js-helpers/dist/authentication/authenticator.js (app.d033943….js:807), :193:100)
at step (eval at ../node_modules/@microsoft/office-js-helpers/dist/authentication/authenticator.js (app.d033943….js:807), :43:23)
at Object.eval [as next] (eval at ../node_modules/@microsoft/office-js-helpers/dist/authentication/authenticator.js (app.d033943….js:807), :24:53)
at eval (eval at ../node_modules/@microsoft/office-js-helpers/dist/authentication/authenticator.js (app.d033943….js:807), :18:71)
at Promise ()
at __awaiter (eval at ../node_modules/@microsoft/office-js-helpers/dist/authentication/authenticator.js (app.d033943….js:807), :14:12)

Then if I load it again in the incognito window with the dev tools open and debug it, I do get a dialog, but it has the content of the add-in. See attached screen shots.

The project is here if you want to see if I am doing something wrong. (It is a bit rough, but I am just trying to get the scaffolding right)

https://github.com/ozippy/office1/tree/master/src

Thanks

[WrathOfZombies]

@ozippy let me take a look at and get back you.

[WrathOfZombies]

@Zlatkovsky: Please help in debugging this. I am not sure why the dialog doesn't actually close.

[Zlatkovsky]

@ozippy , is there a manifest I could try out in conjunction with the sources you have listed on https://github.com/ozippy/office1/tree/master/src?

Or does @stotzout have one? If you have a sample site already published and a manfiest for that that, even better. That way it's easier to pass along to someone on my team who is in charge of the Dialog API, if it's a bug there.

[Zlatkovsky]

Adding and assigning @sumurthy , who has been following-up on a couple other DialogApi related issues. @sumurthy , once you have the info from above, could you please follow up on whether it's a platform issue?

[Zlatkovsky]

( @ozippy & @stotzout @alabels9 , apologies for bouncing the bug around -- but we needed to find the right owner to investigate whether it's a platform issue, and to follow-up on fixing it if so ). As I said above, if you have a simple repro project with manifest, that would be best. Thanks!

[ozippy]

Hi @Zlatkovsky , the manifest is in the repo here https://github.com/ozippy/office1/blob/master/my-office-add-in-manifest.xml. I just generated a project with Yeoman and made some modifications. At the moment it doesn't do much apart from try to authenticate. I'm not sure my issue is with the dialog closing. It is more that it doesn't display the login in the dialog when in an chrome incognito session. I think you should be able to clone the repo and build/install it.

Thanks

[WrathOfZombies]

ping @sumurthy. Any ideas/updates?

[rinormaloku]

@WrathOfZombies & @Zlatkovsky & @ozippy Did you guys find any solution to 'ozzipy' issue with being redirected inside the pop up?
In my project I am having the same issue. Here a small implementation to demo it: (repo).

[WrathOfZombies]

@rinormaloku let me try it out and get back to you.. And no we haven't found a solution to @ozippy's issue

[rinormaloku]

@WrathOfZombies I tried this with hello.js and it's redirection worked correctly, even in Outlook.

[WrathOfZombies]

@rinormaloku hello.js doesn't use the Office dialog to authenticate and this can be problematic when trying to use the Add-in inside of Desktop/MAC Clients. I am assuming that by redirection you meant that the dialog doesn't close?

[rinormaloku]

@WrathOfZombies Yes by redirection I mean that the dialog doesn't close.
Meanwhile using hello.js the dialog closes (i.e. the access_token is redirected to the app)

[WrathOfZombies]

@rinormaloku Here's a beta version of OfficeHelpers with an updated dialog logic that should solve most of the problems. https://unpkg.com/@microsoft/[email protected]/dist/office.helpers.js

Please give it a try and let me know if you still are seeing issues. (It is a beta version so you might find issues elsewhere)

[WrathOfZombies]

The latest version is live at https://unpkg.com/@microsoft/office-js-helpers

[RaphyLi]

@WrathOfZombies I use the last version of office-js-helpers (1.0.2) with https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js but when the authentificator call Office.context.ui.displayDialogAsync he said error TypeError: Cannot read property 'displayDialogAsync' of undefined.
When a I debug I see Office.context.ui is undefined.

I also tried to generate a new projet with yo office (React) and I have the same error.

This is my code

Thanks for your help.

[elegault]

I'm still having this redirect/callback issue with the latest version of office-js-helpers. I've also tried using the Dialog API, and the issue remains that it is unclear how to handle the redirect. I'm not an expert on routings in a React SPA, especially in the context of the auth flow for an Office add-in - so some guidance on how to set this up would be appreciated. Especially if deeper components like a Login component is used, when conditionally rendered within the parent App component. The crux of the issue is nicely phrased here - I've put a bounty on it: https://stackoverflow.com/questions/43794189/outlook-add-in-office-js-authentication

[Muhammad-saqib]

TypeError: url.replace is not a function
at Function.Authenticator.getUrlParams (office.helpers.js:3960)
at Authenticator._handleTokenResult (office.helpers.js:4098)
at Authenticator. (office.helpers.js:4026)
at step (office.helpers.js:3795)
at Object.next (office.helpers.js:3725)
at fulfilled (office.helpers.js:3677)

using office-js, when the redirect has happened then I got the above following issue. i am using react