如何将NextJS嵌入的Vertex AI聊天代理的authToken传递至Playbook

问题背景 #

我已创建Vertex AI聊天代理，并使用df-messenger将其嵌入NextJS应用，嵌入代码如下：

<df-messenger
  location="xxxxxxx"
  project-id="xxxxxxxxxxxx"
  agent-id="xxxxxxxxxxxx"
  language-code="en"
  max-query-length="-1"
>
  <df-messenger-chat-bubble chat-title="xxxxxxxxx"></df-messenger-chat-bubble>
</df-messenger>

我的NextJS应用已实现登录流程，现在需要将聊天代理前端的authToken传递至Vertex AI Playbook，但尝试两种方法均失败。

已尝试的方法 #

1. 设置session-params #

尝试通过设置session-params传递参数：

const sessionParams = {
      name: 'john doe',
      authToken: '111111111111111',
      userId: 'user_12345',
    };
    
dfMessenger.setAttribute('session-params', JSON.stringify(sessionParams));

但在Vertex AI Playbook指令中使用$session.params.name、$session.params.authToken读取时，所有值均为空。

2. 修改网络请求负载 #

尝试通过监听df-request-sent事件修改请求负载：

dfMessenger.addEventListener('df-request-sent', function(event) {
      event.detail.data.requestBody = {
        ...event.detail.data.requestBody,
        custom: {
          authToken: 'xxxxxxxxxxxxxxx',
        }
       
      };
    });

网络请求中可见自定义字段已添加，但云端无法读取。将首次交互路由至云函数后，request.get_json()返回空：

@functions_framework.http
def process_requset_body_details(request):
request_json = request.get_json()

正确实现方案 #

方案一：修正session-params的设置时机与方式 #

session-params需要在df-messenger初始化完成后再设置，否则无法被正确识别。通过监听df-ready事件确保组件加载完成：

document.addEventListener('df-ready', () => {
  const dfMessenger = document.querySelector('df-messenger');
  const sessionParams = {
    name: 'john doe',
    authToken: '111111111111111',
    userId: 'user_12345',
  };
  dfMessenger.setAttribute('session-params', JSON.stringify(sessionParams));
});

在Vertex AI Playbook中，需确保在会话上下文引用参数时路径正确，使用$session.params.authToken即可读取对应值。同时检查代理配置，确认允许自定义session参数的传递。

方案二：通过userDefinedPayload传递（推荐） #

Vertex AI支持通过userDefinedPayload字段传递自定义参数，修改前端事件处理逻辑如下：

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('df-request-sent', (event) => {
  // 注入自定义参数到官方指定的字段中
  event.detail.data.requestBody.userDefinedPayload = {
    authToken: 'xxxxxxxxxxxxxxx',
    userId: 'user_12345'
  };
});

云函数中需按照Vertex AI的请求结构解析参数，而非直接读取根节点：

@functions_framework.http
def process_request_body_details(request):
    request_json = request.get_json()
    # 从userDefinedPayload中提取自定义参数
    user_payload = request_json.get('userDefinedPayload', {})
    auth_token = user_payload.get('authToken')
    
    # 此处添加业务逻辑
    return {'status': 'success', 'authToken': auth_token}

额外注意事项 #

• 确保NextJS中获取的authToken已正确拿到，建议在登录完成后再初始化df-messenger或设置参数。
• 检查df-messenger版本，旧版本可能存在参数传递兼容性问题，建议使用最新版组件。
• 在Vertex AI Playbook中可添加调试步骤，输出$session.params或$userDefinedPayload的内容，验证参数是否传递成功。

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