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

147 天前
 LiaoMatt

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

1915 次点击
所在节点    程序员
23 条回复
Sumzibuyu
147 天前
针对该需求,我建议通过飞书开放平台的"深度链接"功能实现,以下是具体方案及技术实现步骤:
一、技术方案选择

使用飞书提供的 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
147 天前
这年头问问 deepseek 很难吗?
chunriyeqiukong
147 天前
不会问 ai ,飞书文档多看看也行啊
LiaoMatt
147 天前
@Sumzibuyu AI 幻觉很严重哦, 比如说你给的答案就行, 刚刚问了官方技术支持, 明确表示不支持做消息携带跳转
xiaoqidev
147 天前
既然是公司内部使用,可以客服先点击链接通知操作人员,操作人员此时已有订单和客服人员信息,由操作人员点击链接打开客服聊天框即可

@Sumzibuyu 1.站内直接回复 AI 生成内容可能会被封号; 2.AI 不一定准确,例如 #1 中的 AppLink 飞书并不支持自定义参数所以无法实现
LiaoMatt
147 天前
@chunriyeqiukong 哥们别说和问题无关的话吗, 文档能看的已经看了
LiaoMatt
147 天前
@xiaoqidev 想携带上下文信息, 我前司自研的 IM 就可以做到这一点, 看飞书的文档没有看到相关的内容, 想看看有没有人曾经也有这个想法, 或者有这个经验
xiaoqidev
147 天前
@LiaoMatt 上下文信息已经有了,只是没在聊天中显示
jworg
147 天前
要不再和技术支持聊聊,催他们来实现这一个东西,感觉很有必要的一个场景。
xiaoming1992
147 天前
@Sumzibuyu ai 人家自己不会问,要你贴一个又臭又长还行不通的答案( op 在#4 说的)?越来越感觉 ai 警察做得对
LiaoMatt
147 天前
@jworg 嗯, 刚刚沟通的结果是让我找专门负责对接我们的技术支持, 提需求去落地, 但是如果要花钱, 肯定不做哈哈
LiaoMatt
147 天前
@xiaoming1992 AI 的答案并不一定准确, 还是需要自己思考实践过滤一下
kingcanfish
146 天前
https://open.feishu.cn/document/common-capabilities/applink-protocol/applink-introduction/applink-application
看看这篇文档 按我的理解只要你能在你自己的系统里拿到对应人员的飞书 openid 就能通过 applink 唤起窗口
gunner168
146 天前
@LiaoMatt 这可能就是一本正经胡说八道的 ai
input2output
146 天前
jworg
146 天前
又想了想,如果是我的话,可能会这样做,包一下 AppLink ,触发点击动作时先去自己系统后台走一道,调用对应操作用户的 api 给目标飞书先发送上下文消息,应该就是 5 楼的思路
crackidz
146 天前
@kingcanfish 看了一下应该不支持参数吧,只能唤起聊天,还需要走其他的方式进行传输参数,或者使用粘贴板复制
lepig
146 天前
@Sumzibuyu 社区明确规定不让发 AI 生成内容。 这么长一大段
dango33
146 天前
创建群聊 -> 向群聊发送单号 -> 构造并访问群聊的链接

================

刚才看文档想到的方式,没试过,不一定行。
Livid
146 天前
@input2output 谢谢,那个使用 AI 回复的账号已经被彻底 ban 。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1118525

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX