Issue with AngularJS $state.provider and redirecting.

[stotzout]

It's more an information than an issue.

If you are using angularjs router or stateprovider with redirecting, the popup url will immediately redirected to the default url you set.

The result of that is, that the token couldn't read out of the URL from the popup. Additionally the popup doesn't close automatically.

Sometimes it works because in this case the read out was faster than the redirection of angularjs.

[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.

[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.

[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.