Outlook加载项Office-Js身份验证

Question

我正在构建一个基于React的Outlook加载项.我使用YeomanGenerator设置我的项目.我正在尝试使用Office-Js-Helpers设置身份验证.我能够创建验证器,注册microsoftAuth端点.我的添加打开对话框,我能够登录等,并在对话框的URL中返回访问令牌,但对话框永远不会关闭,并且我尝试进行身份验证后获取我的令牌是success/ thenfunction从未打过.如果我手动关闭对话窗口,catch则触发.

我不知道我是否正确设置我的项目.这是main.tsx我打开加载项时第一个加载的页面中的代码.这是代码(有一些虚拟数据 - 例如我的clientId是一个实际的,我刚刚阻止了它).我已经在我的应用程序帐户中设置了redirectUrl https://localhost:3000/signin-microsoft.请告诉我您可能需要的其他信息 - 我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 反应插件也遇到了同样的问题。

就我而言，问题是因为我使用“ https://localhost:3000 ” 作为重定向 URL，而不是“ https://localhost:3000/taskpane.html ”。

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

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

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