无需注册Bot，如何在网站嵌入WebChat控件连接Microsoft Bot Service？

首先直接给结论：注册Azure Bot Service不是嵌入WebChat到自有网站的绝对必选项，具体分两种场景来看：

场景1：仅内部/私有网络使用，无需Azure托管服务 #

如果你的Bot只在内部网络运行，不需要对接Teams、Slack等第三方渠道，也不需要Azure提供的监控、多租户管理等功能，完全可以跳过注册步骤，直接让WebChat连接到你IIS部署的Bot。

实现要点： #

• 启用Bot的Direct Line协议：在你的VS2017模板生成的Bot项目的Startup.cs中，确保配置Direct Line支持，并允许匿名访问（仅测试用，生产环境建议加验证）：

  services.AddBot<YourBotName>(options =>
  {
      // 使用简单凭证提供器，跳过Azure Bot的身份验证
      options.CredentialProvider = new SimpleCredentialProvider();
      // 启用Direct Line协议
      options.EnableDirectLine = true;
  });
  

• 配置跨域（CORS）：因为WebChat运行在你的自有网站域名下，Bot部署在IIS的另一个域名/端口，必须设置CORS允许网站域名访问Bot的API：

  // 在Configure方法中添加CORS中间件
  app.UseCors(builder =>
      builder.WithOrigins("https://your-website-domain.com") // 替换为你的网站域名
             .AllowAnyHeader()
             .AllowAnyMethod());
  

• WebChat前端代码：直接通过Bot的IIS端点连接，示例代码：

  // 引入WebChat脚本（可以本地托管或用CDN）
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  
  <div id="webchat" role="main"></div>
  
  <script>
    const directLine = window.WebChat.createDirectLine({
      domain: 'https://your-iis-bot-domain/api/messages', // 替换为你的Bot端点
      // 如果不需要身份验证，可省略token（仅测试用）
    });
  
    window.WebChat.renderWebChat(
      {
        directLine: directLine,
        userID: 'your-user-id'
      },
      document.getElementById('webchat')
    );
  </script>
  

场景2：生产环境或需要Azure生态功能（推荐） #

虽然注册不是必须，但生产环境强烈建议注册Azure Bot Service，原因包括：

• 内置稳定的Direct Line服务：无需自己维护Direct Line端点的高可用和安全
• 自带身份验证机制：可以通过Direct Line Secret生成安全的访问Token，避免Bot API被恶意调用
• 支持多渠道扩展：未来如果需要对接微信、Teams等平台，无需重新架构
• 提供监控、日志、分析等运维工具，方便排查问题

注册后的WebChat集成： #

注册完成后，你可以在Azure Portal中获取Direct Line的Secret，然后在WebChat中用它生成访问Token，示例代码：

async function fetchToken() {
  const response = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + 'YOUR_DIRECT_LINE_SECRET'
    }
  });
  const { token } = await response.json();
  return token;
}

fetchToken().then(token => {
  const directLine = window.WebChat.createDirectLine({ token });
  window.WebChat.renderWebChat({ directLine }, document.getElementById('webchat'));
});

关键注意事项 #

• 测试环境可以跳过注册，但生产环境务必考虑安全和稳定性，优先选择注册Azure Bot
• 无论是否注册，跨域（CORS）配置都是必须的，否则WebChat会因浏览器安全限制无法连接Bot

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