怎么从浏览器打开飞书, 并跳到与指定工号人员的聊天框, 并携带订单号

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

背景: 公司使用的飞书作为通讯软件, 想增强飞书和我们平台的协作能力; 需求: 假设遇到了客服想咨询操作人员一笔订单, 通过 web 点击对应操作, 打开飞书, 跳到该操作人员的聊天框, 然后把订单号或者订单详情链接带入到聊天框; 这么做的目的是提高沟通效率, 省去沟通环境中的同步上下文动作.

飞书

浏览器

聊天框

22 条回复 • 2025-03-14 23:31:03 +08:00

Sumzibuyu

10 小时 17 分钟前

针对该需求，我建议通过飞书开放平台的"深度链接"功能实现，以下是具体方案及技术实现步骤：
一、技术方案选择

使用飞书提供的 Open Link 协议（类似飞书://open/）生成深度链接
结合 URL 参数传递订单信息
支持网页端与客户端自动跳转

二、具体实现步骤

用户信息映射准备

在平台用户系统与飞书账号系统之间建立映射关系（可通过手机号或邮箱关联）
创建用户信息查询接口：GET /api/lark/user/{orderId} 返回操作人员飞书 user_id

生成深度链接（前端实现示例）

// 获取操作人员飞书 ID
const getLarkUserId = async (orderId) => {
const res = await fetch(`/api/lark/user/${orderId}`);
return res.json().user_id;
};

// 生成飞书链接
const generateLarkDeepLink = (userId, orderInfo) => {
const baseUrl = 'https://applink.feishu.cn/client/chat/chat';
const params = new URLSearchParams({
user_id: userId,
text: `订单咨询：${orderInfo.number}\n 详情链接：${orderInfo.detailUrl}`
});
return `${baseUrl}?${params.toString()}`;
};

网页跳转逻辑

<a id="larkChatLink" class="feishu-link" style="display:none;">
打开飞书沟通
</a>

<script>
document.querySelector('.contact-support').addEventListener('click', async (e) => {
e.preventDefault();
const orderId = getCurrentOrderId(); // 获取当前订单 ID
const { user_id, detail_url } = await fetchOrderDetail(orderId);

const feishuUrl = generateLarkDeepLink(user_id, {
number: orderId,
detailUrl: detail_url
});

// 尝试打开客户端
window.location.href = feishuUrl;

// 客户端未安装时跳转网页版
setTimeout(() => {
document.getElementById('larkChatLink').href = feishuUrl.replace(
'applink.feishu.cn',
'www.feishu.cn'
);
document.getElementById('larkChatLink').click();
}, 500);
});
</script>

三、安全增强措施

信息加密处理

// 使用 AES 加密订单信息
const encryptOrderInfo = (orderId) => {
const cipher = crypto.createCipheriv('aes-256-cbc', SECRET_KEY, IV);
return cipher.update(orderId, 'utf8', 'base64') + cipher.final('base64');
};

// 在生成链接时
const encryptedId = encryptOrderInfo(orderId);
params.set('payload', encryptedId);

服务端验证（ Node.js 示例）

app.get('/api/lark/user/:orderId', async (req, res) => {
try {
const decryptedId = decryptOrderInfo(req.params.orderId);
const user = await UserService.findByOrder(decryptedId);
res.json({ user_id: user.feishuId });
} catch (error) {
res.status(403).json({ error: 'Invalid request' });
}
});

四、兼容性处理方案

多环境适配逻辑

function openFeishuChat(feishuUrl, webUrl) {
const ua = navigator.userAgent;
const isMobile = /Mobile|Android|iPhone/i.test(ua);

if (isMobile) {
// 移动端直接尝试打开 App
window.location.href = feishuUrl;
setTimeout(() => {
window.location.href = appStoreLink; // 跳转应用商店
}, 500);
} else {
// PC 端打开桌面客户端
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = feishuUrl;
document.body.appendChild(iframe);

setTimeout(() => {
document.body.removeChild(iframe);
window.open(webUrl); // 降级到网页版
}, 500);
}
}

五、实施建议

分阶段上线计划：

第一阶段：内部测试版（使用测试环境订单数据）
第二阶段：灰度发布（ 20%客服团队试用）
第三阶段：全量上线+数据监控

监控指标配置：

// 埋点示例
const trackEvent = (eventName, params) => {
console.log(`[Analytics] ${eventName}`, params);
// 实际应接入数据分析平台
};

document.querySelector('.feishu-link').addEventListener('click', () => {
trackEvent('FEISHU_CHAT_OPEN', {
order_type: 'refund',
user_agent: navigator.userAgent
});
});

异常处理方案：
添加备选交互流程（当飞书不可用时）

function fallbackToClipboard(orderInfo) {
navigator.clipboard.writeText(`订单号：${orderInfo.number}`);
showToast('已复制订单号到剪贴板');
}

设置超时重试机制

let retryCount = 0;
function checkFeishuInstalled() {
return new Promise((resolve) => {
// 通过客户端 API 检测实现
});
}

该方案的优势在于：

实现成本低，主要利用现有开放平台能力
同时支持桌面端和移动端跳转
通过加密保障订单信息安全
提供完整的异常降级方案
支持数据埋点用于后续优化

需要注意：

需要申请飞书开放平台开发者权限
用户首次使用时需要授权账号关联
建议在消息模板中添加平台 logo 等品牌元素
需定期更新加密秘钥（推荐使用密钥管理服务）

Sumzibuyu

10 小时 16 分钟前

这年头问问 deepseek 很难吗？