如何创建支持第三方（NimbleWork）登录的Outlook Web加载项

• 第一步：给加载项加登录入口
  在你的Outlook加载项UI里加个「登录NimbleWork」按钮，点击后用Office.js的弹窗API唤起登录窗口（避免跳转离开Outlook环境），示例代码：

  Office.context.ui.displayDialogAsync(
    'NimbleWork授权页面的完整URL',
    { height: 50, width: 50 },
    function (asyncResult) {
      const dialog = asyncResult.value;
      dialog.addEventHandler(Office.EventType.DialogMessageReceived, handleLoginResult);
    }
  );
  

• 第二步：构造授权请求URL
  把你的OAuth参数拼到NimbleWork的授权端点里，必填参数包括：

  • client_id：你的NimbleWork应用ID
  • redirect_uri：必须是你加载项域名下的回调页面（比如https://你的加载项域名/callback.html，要提前在NimbleWork后台配置好）
  • response_type：固定填code（用最安全的授权码模式）
  • scope：根据需求填写NimbleWork的权限范围，比如tasks:read write

• 第三步：处理回调与令牌交换

  1. 写一个callback.html页面，当用户在弹窗完成授权后，NimbleWork会跳转到这个页面并携带授权码code，页面里把授权码传给加载项主页面：

     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get('code');
     Office.context.ui.messageParent(code);
     

  2. 主页面的handleLoginResult函数拿到授权码后，调用NimbleWork的令牌端点交换access_token：

     function handleLoginResult(event) {
       const code = event.message;
       fetch('NimbleWork的令牌端点URL', {
         method: 'POST',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
         body: new URLSearchParams({
           client_id: '你的client_id',
           client_secret: '你的client_secret',
           code: code,
           redirect_uri: '你的回调URL',
           grant_type: 'authorization_code'
         })
       })
       .then(res => res.json())
       .then(data => {
         // 把令牌存在Office漫游设置里，跨会话保留
         Office.context.roamingSettings.set('nimblework_token', data.access_token);
         Office.context.roamingSettings.saveAsync();
         // 更新UI为已登录状态
       });
     }
     

• 第四步：维护登录状态与接口调用

  • 加载项启动时，先从Office.context.roamingSettings读取令牌，判断是否有效，有效则直接显示已登录状态
  • 调用NimbleWork API时，把令牌放在请求头：Authorization: Bearer {token}
  • 令牌过期时，用refresh_token重新调用令牌端点换新鲜令牌（grant_type填refresh_token）

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