Outlook插件提交微软商店失败：需实现Azure SSO登出功能

一、正确实现登出功能 #

OfficeJS的SSO会话绑定在Outlook宿主中，单纯用MSAL登出无法完全清除Office端的会话，需结合以下步骤处理：

1. 调整MSAL配置
   将redirectUri设为插件内的有效页面（比如根路径），避免跨域导致的跳转异常：

   const msalInstance = new PublicClientApplication({
     auth: {
       clientId: process.env.CLIENT_ID,
       redirectUri: window.location.origin + '/',
       postLogoutRedirectUri: window.location.origin + '/'
     }
   });
   

2. 完整登出流程
   登出时需同时清除MSAL本地缓存、Office端SSO缓存，并手动处理页面跳转：

   const handleLogout = async () => {
     try {
       // 清除MSAL本地缓存
       await msalInstance.logoutPopup({
         postLogoutRedirectUri: window.location.origin + '/'
       });
       // 清除Office端的SSO缓存（关键步骤）
       if (OfficeRuntime.auth) {
         await OfficeRuntime.auth.clearCachedAccessToken();
       }
       // 手动跳转回登录页，解决弹窗关闭后不自动跳转的问题
       window.location.href = window.location.origin + '/';
     } catch (error) {
       console.error('登出失败:', error);
       // 兜底跳转
       window.location.href = window.location.origin + '/';
     }
   };
   

二、登录状态检测逻辑 #

插件启动时，通过静默获取token判断用户登录状态：

const checkLoginStatus = async () => {
  try {
    // 静默请求token，不弹出登录/授权弹窗
    const token = await OfficeRuntime.auth.getAccessToken({
      allowConsentPrompt: false,
      allowSignInPrompt: false,
      forMSGraphAccess: true,
      prompt: 'none' // 静默检测核心参数
    });
    // 拿到token说明已登录，跳转至首页
    if (token) {
      window.location.href = window.location.origin + '/home';
    }
  } catch (error) {
    // 捕获未登录错误（错误码13000表示用户未登录）
    if (error.code === 13000) {
      return; // 未登录，停留在登录页
    }
    console.error('登录状态检测失败:', error);
  }
};

// 在插件初始化时调用（比如React的useEffect钩子）
useEffect(() => {
  checkLoginStatus();
}, []);

三、页面跳转优化（React Router版） #

用React Router管理路由，结合状态检测实现自动跳转：

1. 路由配置

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(null);

  useEffect(() => {
    const checkStatus = async () => {
      try {
        await OfficeRuntime.auth.getAccessToken({
          allowConsentPrompt: false,
          allowSignInPrompt: false,
          forMSGraphAccess: true,
          prompt: 'none'
        });
        setIsLoggedIn(true);
      } catch (e) {
        setIsLoggedIn(false);
      }
    };
    checkStatus();
  }, []);

  if (isLoggedIn === null) {
    return <div>加载中...</div>;
  }

  return (
    <Router>
      <Routes>
        <Route path="/" element={isLoggedIn ? <Navigate to="/home" /> : <LoginPage />} />
        <Route path="/home" element={isLoggedIn ? <HomePage /> : <Navigate to="/" />} />
      </Routes>
    </Router>
  );
}

2. 登录按钮逻辑

const handleLogin = async () => {
  try {
    const token = await OfficeRuntime.auth.getAccessToken({
      allowConsentPrompt: true,
      allowSignInPrompt: true,
      forMSGraphAccess: true
    });
    if (token) {
      window.location.href = window.location.origin + '/home';
    }
  } catch (error) {
    console.error('登录失败:', error);
  }
};

关键注意事项 #

• 必须调用OfficeRuntime.auth.clearCachedAccessToken()清除Office端缓存，否则Outlook会保留会话，导致再次点击登录不弹出窗口。
• MSAL登出弹窗关闭后手动触发页面跳转，解决自动跳转失效的问题。
• 静默检测登录状态时，prompt: 'none'参数是核心，避免不必要的弹窗干扰用户。

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