作者：张振琦
上篇我们实现了服务端的签名算法，我接下来看WebIM插件里如何传入客户信息。调用的接口如下：
// SHA1示例ud({"customer": {"nonce": "9ca6fff5a509fb887ac72cf5c9e7","signature": "9B2619225AA6476DC1EB80DBB8801E1575EBE39C","timestamp": "1455675719000","web_token": "test@"}});// SHA256示例ud({"customer": {"nonce": "9ca6fff5a509fb887ac72cf5c9e7","signature": "4CC40FA2D762DAB1D4509750A7135123743D26F2552B7E23611AB8CB5D35825B","timestamp": "1455675719000","web_token": "test@","encryption_algorithm": "SHA256"}});
参数描述如下：
nonce是一个随机数，简单实现我们就把nonce赋成和timestamp一样。web_token我们使用邮箱，网页中添加一个输入框，可以自己输入。需要注意的是，代码中传入的nonce、timestamp和web_token，必须和生成签名signature的保持一致，否则签名无效。签名就使用上篇实现的java服务，发送post请求获取。完成页面代码如下：
imdemo.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>IM</title><script src="/libs/jquery/2.1.4/jquery.min.js"></script></head><body>邮箱：<input id="email" type="text" style="width:200px"><button type="button" onclick="login()">用户登录</button><script>(function(a,h,c,b,f,g){a["UdeskApiObject"]=f;a[f]=a[f]||function(){(a[f].d=a[f].d||[]).push(arguments)};g=h.createElement(c);g.async=1;g.charset="utf-8";g.src=b;c=h.getElementsByTagName(c)[0];c.parentNode.insertBefore(g,c)})(window,document,"script","https://assets-/im_client/js/udeskApi.js","ud");ud({"code": "你的code","link": "你的link"});function login() {var timestamp = new Date().getTime();var nonce = timestamp;var web_token = $('#email').val();var input = {"timestamp":timestamp,"nonce":nonce,"web_token":web_token};$.ajax({contentType: 'application/json',type: 'POST',url: "http://localhost:8080/WebIMSignature/WebIM",dataType: "json",data: JSON.stringify(input),success: function (result) {if(result.sign) {sign = result.sign;ud({"customer": {"nonce": nonce,"signature": sign,"timestamp": timestamp,"web_token": web_token}})}}});}</script></body></html>
运行后效果：
我们输入邮箱为：test@，点击用户登录后，点击右下按钮，打开IM插件后，查看在线客服系统的客户中心，查看新建的客户是否正确。
系统中可以发现一个刚刚创建的web_token为test@的客户，与预期相符。到此我们已经实现了WebIM插件的客户身份认证，但是这样看着客户的信息，还是不太好，我们既然写了邮箱，那我们能否把邮箱字段直接赋值，还有客户的姓名是否也可能传入呢? 答案是肯定的。
WebIM插件支持传入以下客户参数：
除了系统字段还支持自定义字段，我们传入c_name和c_email 看一下效果。我们再添加一个姓名的输入框，然后传入c_name和c_email，完整代码如下：
imdemo.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title>IM</title><script src="/libs/jquery/2.1.4/jquery.min.js"></script></head><body>姓名：<input id="name" type="text" style="width:100px"> 邮箱：<input id="email" type="text" style="width:200px"><button type="button" onclick="login()">用户登录</button><script>(function(a,h,c,b,f,g){a["UdeskApiObject"]=f;a[f]=a[f]||function(){(a[f].d=a[f].d||[]).push(arguments)};g=h.createElement(c);g.async=1;g.charset="utf-8";g.src=b;c=h.getElementsByTagName(c)[0];c.parentNode.insertBefore(g,c)})(window,document,"script","https://assets-/im_client/js/udeskApi.js","ud");ud({"code": "你的code","link": "你的link"});function login() {var timestamp = new Date().getTime();var nonce = timestamp;var web_token = $('#email').val();var input = {"timestamp":timestamp,"nonce":nonce,"web_token":web_token};$.ajax({contentType: 'application/json',type: 'POST',url: "http://localhost:8080/WebIMSignature/WebIM",dataType: "json",data: JSON.stringify(input),success: function (result) {if(result.sign)sign = result.sign;ud({"customer": {"nonce": nonce,"signature": sign,"timestamp": timestamp,"web_token": web_token,"c_name":$('#name').val(),"c_email":$('#email').val()}})}});}</script></body></html>
运行后效果如下：
我们输入姓名为测试用户，邮箱还是test@，点击用户登录后，点击右下按钮，打开插件后，查看在线客服系统的客户中心，查看之前创建的客户信息。
没有新建新的客户，原客户添加了邮箱字段，客户姓名修改为测试用户。与我们的预期是一样的。至此我们就实现了插件客户身份认证以及传入客户身份信息。
还要补充一点，我们可能会传入多个客户的唯一标识字段，这些标识遵循如下规则：
客户身份的识别顺序: web_token > customer_token > c_email > c_phone；
如果传入的web_token或customer_token在系统中没有；但是传入的c_email或c_phone已存在，系统仍然会识别为原有客户。 如果只传入web_token，不传入customer_token、c_email、c_phone等身份数据，则web_token只匹配客户的web_token一项数据，如未匹配到则创建新客户。
更多WebIM插内容可以参考Udesk官方文档：/doc/thirdparty/webim/
