typescript - Outlook-tillägg Office-Js-autentisering

Jag bygger ett Outlook-tillägg baserat på React. Jag satte upp mitt projekt med YeomanGenerator. Jag försöker ställa in autentisering med Office-Js-Helpers. Jag kan skapa autentikatorn, registrera microsoftAuth-endpointen. Mitt tillägg öppnar dialogrutan, och jag kan logga in osv., och den returnerar åtkomsttoken i URL:en i dialogrutan, men dialogrutan stängs aldrig, och success/then-funktionen efter att jag försökt autentisera för att få min token blir aldrig träffad. Om jag manuellt stänger dialogrutan så triggas catch.

Jag vet inte om jag sätter upp mitt projekt korrekt. Detta är koden i min main.tsx som är den första sidan som laddas när jag öppnar mitt tillägg. Här är koden (med några exempeldata - t.ex. min clientId är en faktisk, jag har bara blockerat den). Jag har också ställt in min redirectUrl i mitt applikationskonto samt https://localhost:3000/signin-microsoft. Vänligen låt mig veta vilken annan information du kan behöva - jag sitter helt fast här.

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);
})();

Svar #1

Jag stötte på samma problem med mitt React-tillägg för PowerPoint.

I mitt fall var problemet eftersom jag använde "https://localhost:3000" som min omdirigerings-URL istället för "https://localhost:3000/taskpane.html".

För att åtgärda problemet var jag tvungen att göra följande:

I Azure, ange omdirigerings-URL:en som "https://localhost:3000/taskpane.html" (eller vad som än är konfigurerat i webpack-konfigurationen)

I koden, specificera samma: authenticator.endpoints.registerMicrosoftAuth("xxxxxx-xxxx",{redirectUrl: "https://localhost:3000/taskpane.html"});

Relaterade artiklar