Botframework WebChat问题：无法在其他设备/浏览器开启全新对话

我来帮你搞定这个问题！你遇到的其实是WebChat默认的会话关联机制和BotAuth的用户身份识别共同导致的——同一个AAD账号在不同设备登录时，Bot会认为是同一个用户，从而延续之前的对话。下面给你几个针对性的解决方案，一步步来：

1. 强制生成独立的用户ID和会话ID #

WebChat默认会复用浏览器存储的用户标识，这是跨设备对话延续的核心原因之一。你可以在初始化WebChat时，手动生成一个随机的用户ID，确保每个设备/页面加载都是全新的用户身份：

// 生成随机用户ID（可以用uuid库，或者自定义随机字符串）
const userID = 'user_' + Math.random().toString(36).substring(2, 10);

// 初始化WebChat时传入自定义用户信息
window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
  user: { id: userID, name: 'New User' },
  // 可选：禁用WebChat的本地存储，彻底避免会话复用
  store: window.WebChat.createStore({}, ({ dispatch }) => next => action => {
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
      // 清空会话相关的本地存储
      localStorage.removeItem('webchat-conversation-id');
      localStorage.removeItem('webchat-user-id');
    }
    return next(action);
  })
}, document.getElementById('webchat'));

2. 清理WebChat的本地存储 #

WebChat会在localStorage中存储会话ID、用户ID等信息，即便你生成了新用户ID，旧的存储数据可能还是会干扰会话关联。在页面加载时主动清理这些数据：

// 页面加载时清理WebChat相关存储
window.addEventListener('load', () => {
  // 移除所有WebChat相关的本地存储项
  Object.keys(localStorage).forEach(key => {
    if (key.startsWith('webchat-')) {
      localStorage.removeItem(key);
    }
  });
});

3. 调整Bot端的会话关联逻辑 #

如果你的Bot是基于AAD用户ID来关联对话状态的，那同一个用户在不同设备登录时，Bot自然会延续旧对话。你可以修改Bot的逻辑，改为根据会话ID来维护对话状态，而不是用户ID：

// 在Bot的OnTurnAsync方法中，基于会话ID初始化状态
protected override async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
{
  // 获取会话ID作为状态键
  var conversationState = _conversationState.CreateProperty<ConversationData>(turnContext.Activity.Conversation.Id);
  var conversationData = await conversationState.GetAsync(turnContext, () => new ConversationData());

  // 后续逻辑使用conversationData，而不是基于用户ID的状态
}

4. 重新生成独立的Direct Line Token #

你之前调用的Ajax可能是复用了旧的Direct Line Token，而Token是和用户身份绑定的。正确的做法是：每次页面加载时，调用后端接口重新生成一个新的Direct Line Token，并且在生成时指定新的用户ID：

// 前端请求后端获取新的Direct Line Token
async function getNewDirectLineToken() {
  const response = await fetch('/api/directline/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + 'YOUR_AAD_TOKEN' // 这里是BotAuth返回的AAD令牌
    },
    body: JSON.stringify({ userID: 'user_' + Math.random().toString(36).substring(2, 10) })
  });
  const data = await response.json();
  return data.token;
}

// 初始化WebChat时使用新Token
getNewDirectLineToken().then(token => {
  window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ token: token }),
    user: { id: userID } // 和生成Token时的userID一致
  }, document.getElementById('webchat'));
});

这样每个设备加载页面时，都会拿到独立的Token和用户ID，Bot就会创建全新的对话了。

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