如何基于Vue.js 2实现Office Word插件的外部网站授权登录？

核心实现逻辑 #

整个流程依赖Office插件官方对话框API打通插件与外部网站的交互，核心步骤如下：

• 插件内点击登录按钮，调用Office API打开外部浏览器窗口跳转至自有网站
• 网站端先判断用户登录状态：未登录则引导完成登录，已登录直接进入授权页
• 授权完成后，网站通过Office消息机制将授权数据传回插件
• 插件接收并处理授权数据，完成登录流程

Vue.js 2组件代码示例 #

在Vue组件中实现登录按钮的点击逻辑，使用Office.context.ui.displayDialogAsync打开外部窗口并监听回调：

<template>
  <button class="login-btn" @click="triggerAuthFlow">登录授权</button>
</template>

<script>
export default {
  methods: {
    async triggerAuthFlow() {
      try {
        // 生成唯一会话ID，用于验证授权请求合法性
        const sessionId = Math.random().toString(36).slice(2, 18);
        // 构造授权页面URL，携带会话标识和来源标记
        const targetUrl = `https://你的自有域名/authorize?sessionId=${sessionId}&from=word-addin`;

        // 调用Office API打开外部浏览器窗口
        Office.context.ui.displayDialogAsync(targetUrl, {
          height: 65,
          width: 45,
          displayInIframe: false // 强制使用外部浏览器，避免沙箱限制
        }, (dialogResult) => {
          const authDialog = dialogResult.value;

          // 监听网站传回的授权数据
          authDialog.addEventHandler(Office.EventType.DialogMessageReceived, (msgArgs) => {
            const authData = JSON.parse(msgArgs.message);
            // 处理授权数据，比如存入本地或Vuex
            this.handleAuthSuccess(authData);
            // 关闭对话框
            authDialog.close();
          });

          // 监听对话框异常事件
          authDialog.addEventHandler(Office.EventType.DialogEventReceived, (eventArgs) => {
            if (eventArgs.error) {
              console.error('授权窗口异常:', eventArgs.error.message);
            }
          });
        });
      } catch (err) {
        console.error('触发授权流程失败:', err);
      }
    },
    handleAuthSuccess(authData) {
      // 编写业务逻辑，比如保存token、更新用户状态
      console.log('授权成功，返回数据:', authData);
      // 示例：存入Office漫游设置（跨会话保留）
      Office.context.roamingSettings.set('userToken', authData.token);
      Office.context.roamingSettings.saveAsync();
    }
  }
}
</script>

<style scoped>
.login-btn {
  padding: 8px 16px;
  background: #0078d4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

自有网站端处理逻辑 #

在网站登录/授权页面中，完成登录验证和授权后，将数据传回插件：

1. 登录状态判断：网站常规逻辑，未登录则跳转至登录页，登录完成后重定向回授权页
2. 授权数据回传：授权页中调用Office的messageParent方法发送数据：

<!-- 网站授权页的JS代码 -->
<script>
// 验证请求来自Word插件
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('from') === 'word-addin') {
  // 假设已完成授权，构造返回数据
  const authResult = {
    token: 'your-auth-token',
    userInfo: {
      id: 'user-123',
      name: '用户名'
    }
  };
  // 向插件发送数据
  Office.context.ui.messageParent(JSON.stringify(authResult));
}
</script>

关键注意事项 #

• 必须使用Office官方API：不能用普通window.open，插件沙箱环境会限制该方法，displayDialogAsync是Office插件官方推荐的外部交互方式
• 配置信任域名：在插件的manifest.xml中，将自有域名添加到AppDomains数组中，否则会触发跨域错误
• 会话验证：使用sessionId可以防止恶意授权请求，建议在网站端验证sessionId的有效性
• 持久化状态：如果需要插件重启后保持登录状态，可使用Office.context.roamingSettings存储token，它会随用户的Office账户同步

内容的提问来源于stack exchange，提问作者Alibb