在SharePoint现代站点母版页嵌入Microsoft WebChat技术咨询

没问题！我帮你整理了一套适配SharePoint现代站点的WebChat嵌入方案——因为现代站点没法直接修改传统母版页，我们用微软官方推荐的SPFx扩展来实现全局嵌入效果，相当于给所有页面加上统一的WebChat入口，具体步骤如下：

1. 先搞定Azure Bot的Direct Line密钥 #

这是连接WebChat和你的Bot的核心凭证，获取方式很简单：

• 登录Azure门户，找到你的Bot资源
• 进入「Channels」页面，选择「Direct Line」频道
• 生成并复制一个Direct Line Secret，后面会用到（记得妥善保存，别随便泄露）

2. 用SPFx Application Customizer实现全局嵌入（母版页效果） #

SPFx的Application Customizer可以把脚本注入到站点的所有页面，完美替代传统母版页的全局修改需求：

2.1 初始化SPFx项目 #

打开命令行工具，执行以下命令创建项目：

yo @microsoft/sharepoint

跟着向导选：

• 选择「Extension」类型
• 再选「Application Customizer」
• 填写项目名称、描述，最后选「No JavaScript framework」（轻量够用）

2.2 修改扩展代码 #

找到src/extensions/[你的扩展名称]/[你的扩展名称].ts文件，替换成下面的代码：

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';

const LOG_SOURCE: string = 'WebChatGlobalEmbed';

export interface IWebChatGlobalEmbedProperties {
  // 可选：把密钥配置到属性面板，方便后期修改不用重部署
  directLineSecret: string;
}

export default class WebChatGlobalEmbed
  extends BaseApplicationCustomizer<IWebChatGlobalEmbedProperties> {

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `WebChat嵌入扩展已初始化`);
    this._loadWebChat();
    return Promise.resolve();
  }

  private _loadWebChat(): void {
    // 1. 加载WebChat的样式文件
    const styleLink = document.createElement('link');
    styleLink.href = 'https://cdn.botframework.com/botframework-webchat/latest/webchat.css';
    styleLink.rel = 'stylesheet';
    document.head.appendChild(styleLink);

    // 2. 加载WebChat的核心脚本
    const script = document.createElement('script');
    script.src = 'https://cdn.botframework.com/botframework-webchat/latest/webchat.js';
    script.onload = () => this._initWebChat();
    document.body.appendChild(script);
  }

  private _initWebChat(): void {
    // 创建WebChat容器，固定在页面右下角
    const chatContainer = document.createElement('div');
    chatContainer.id = 'webchat-container';
    chatContainer.style.position = 'fixed';
    chatContainer.style.bottom = '20px';
    chatContainer.style.right = '20px';
    chatContainer.style.zIndex = '1000';
    document.body.appendChild(chatContainer);

    // 初始化WebChat
    // @ts-ignore 忽略类型检查，因为WebChat是全局加载的
    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
        secret: this.properties.directLineSecret || '你的Direct Line密钥'
      }),
      // 自定义用户信息，也可以从SharePoint当前用户获取
      userID: 'sp-site-user',
      username: '站点访客'
    }, document.getElementById('webchat-container'));
  }
}

2.3 打包部署扩展 #

• 如果想后期在SharePoint站点直接修改密钥，可在config/package-solution.json中配置属性面板（具体可参考SPFx官方文档的属性配置部分）
• 执行打包命令：

gulp bundle --ship
gulp package-solution --ship

• 把生成的sppkg文件上传到你的租户应用目录，然后在目标站点中启用这个扩展，就能看到所有页面都有WebChat了！

3. 替代方案：单页面嵌入（非全局） #

如果你只是想在特定页面加WebChat，不用全局嵌入，可以用Script Editor Web Part：

• 先确保站点允许自定义脚本（租户设置里开启）
• 在目标页面添加「Script Editor」Web Part，插入以下代码：

<link href="https://cdn.botframework.com/botframework-webchat/latest/webchat.css" rel="stylesheet" />
<div id="webchat" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
  window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({
      secret: '你的Direct Line密钥'
    }),
    userID: 'sp-page-user',
    username: '页面访客'
  }, document.getElementById('webchat'));
</script>

一些注意事项 #

• 安全优化：如果不想直接暴露Direct Line Secret，可以用Azure Function生成临时Token，前端调用接口获取Token后再初始化WebChat，这样更安全
• 样式自定义：你可以修改webchat-container的CSS样式，调整位置、大小，或者通过WebChat的styleOptions配置主题颜色、字体等
• 权限：确保部署SPFx扩展的账号有租户应用目录的上传权限，以及目标站点的管理员权限

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