Outlook外接程序Office-Js身份验证

Question

我正在建立一个基于反应的Outlook外接程序。我使用YeomanGenerator设置我的项目。我正在尝试使用Office-Js-Helpers设置身份验证。我能够创建身份验证器，注册microsoftAuth端点。我的插件打开对话框，我可以登录，等等，它会返回对话框中url中的访问令牌，但对话框永远不会关闭，并且在我尝试进行身份验证以获取令牌后，success/then函数永远不会被击中。如果我手动关闭对话框窗口，则会触发catch。

我不知道我的项目设置是否正确。这是我的main.tsx中的代码，它是我打开外接程序时加载的第一个页面。以下是代码(带有一些虚拟数据-例如，我的clientId是一个实际的数据，我只是把它屏蔽掉了)。我已经在我的应用程序帐户和https://localhost:3000/signin-microsoft中设置了我的redirectUrl。请让我知道你可能需要什么其他信息-我100%被困在这里了。

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

Answer 1

我在PowerPoint的react插件中也遇到了同样的问题。

在我的例子中，问题是因为我使用"https://localhost:3000“而不是"https://localhost:3000/taskpane.html”作为我的重定向网址。

要解决这个问题，我必须执行以下操作：

在azure中，将重定向URL指定为"https://localhost:3000/taskpane.html“(或在webpack配置中配置的任何内容)

在代码中，指定相同: authenticator.endpoints.registerMicrosoftAuth("xxxxxx-xxxx"，{redirectUrl："https://localhost:3000/taskpane.html"})；