Búsqueda de sitios web

typescript - Autenticación de complemento de Outlook Office-Js

Estoy construyendo un complemento de Outlook basado en React. Configuré mi proyecto usando Yeoman Generator. Estoy tratando de configurar la autenticación usando Office-Js-Helpers. Puedo crear el autenticador, registrar el endpoint microsoftAuth. Mi complemento abre el diálogo, y puedo iniciar sesión, etc., y devuelve el token de acceso en la URL del diálogo, pero el diálogo nunca se cierra, y la función success/then después de intentar autenticarme para obtener mi token nunca se ejecuta. Si cierro manualmente la ventana del diálogo, entonces se dispara el catch.

No sé si estoy configurando mi proyecto correctamente. Este es el código en mi main.tsx, que es la primera página que se carga cuando abro mi complemento. Aquí está el código (con algunos datos ficticios, por ejemplo, mi clientId es uno real, solo lo he bloqueado). He configurado mi redirectUrl en la cuenta de mi aplicación, así como https://localhost:3000/signin-microsoft. Por favor, háganme saber qué otra información podrían necesitar; estoy totalmente atascado aquí.

import * as React from 'react'
import { render } from 'react-dom'
import { App } from './components/app'
import { Progress } from './components/progress'
import './assets/styles/global.scss'
import { Authenticator, Utilities, DefaultEndpoints } from '@microsoft/office-js-helpers'

(() => {
    const title = 'My App';
    const container = document.querySelector('#container');
    const clientId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'

    /* Render application after Office initializes */
    Office.initialize = () => {
        if (Authenticator.isAuthDialog()) return

        this.authenticator = new Authenticator()
        this.authenticator.endpoints.registerMicrosoftAuth(clientId, {
            redirectUrl: 'https://localhost:3000/signin-microsoft',
            scope: 'https://outlook.office.com/tasks.readwrite'  
        })

        return this.authenticator.authenticate(DefaultEndpoints.Microsoft)
            .then(function (token) {
                debugger;
                console.log("CINDER " + token)
            })
            .catch(function (error) {
                debugger;
                Utilities.log(error)
                throw new Error('Failed to login using your Microsoft Account')
            })

        render(
            <App title={title} authenticator={this.authenticator}/>,
            container
        );
    };

    /* Initial render showing a progress bar */
    render(<Progress title={title} logo='assets/logo-filled.png' message='Please sideload your addin to see app body.' />, container);
})();

Respuesta #1

Me estaba encontrando con el mismo problema con mi complemento de React para PowerPoint.

En mi caso, el problema fue porque estaba usando "https://localhost:3000" como mi URL de redirección en lugar de "https://localhost:3000/taskpane.html".

Para solucionar el problema, tuve que hacer lo siguiente:

En Azure, especifique la URL de redirección como "https://localhost:3000/taskpane.html" (o la que esté configurada en la configuración de webpack)

En el código, especifica lo mismo: authenticator.endpoints.registerMicrosoftAuth("xxxxxx-xxxx",{redirectUrl: "https://localhost:3000/taskpane.html"});

Artículos relacionados