Java对接阿里云云客服--同时展示访客信息

首先，要从阿里云购买云客服产品，购买后就可以打开云客服在线工作台。
地址：

https://help.aliyun.com/document_detail/62314.html?spm=a2c4g.11186623.6.546.23612f847H0KrN

下面是云客服在线工作台：

打开云客服在线工作台的“服务配置/在线配置/聊天窗管理”，然后点击列表中操作下的“聊天窗URL”。可以获取两种引入聊天窗入口的方式:

引入聊天窗入口的两种方式：

1.复制以下代码, 插入到您网页代码的前。（tntInstId是企业的租户id，暂时用***代替）

<script type="text/javascript" charset="utf-8"
    src="https://gw.alipayobjects.com/os/rmsportal/xsxusXNIcXwiGqtNiyOd.js"
    chat_url="https://cschat-ccs.aliyun.com/index.htm"
    logo_src="https://i.alipayobjects.com/e/201401/1tdi7nR70h.png"
    logo_position="rt"
    tntInstId="*******&scene=SC********">
</script>

2.将以下的链接直接放到网页对应的元素链接上:（tntInstId是企业的租户id，暂时用***代替）

https://cschat-ccs.aliyun.com/index.htm?tntInstId=*******&scene=SC********

以上者两种方式都可以调到云客服的聊天窗，推荐用第二种，因为后期再拼接其他可能用到的参数时会方便一些。

---

举个栗子：

<a href='https://cschat-ccs.aliyun.com/index.htm?tntInstId=*******&scene=SC******'>点我咨询</a>

就在前端写一个a标签，加上我们获取聊天窗的链接，就可以接入聊天窗了，很容易。

---

下面是客服端的聊天窗，在云客服在线工作台中可以跟访客聊天。

不过，虽然接入成功了，但显示的用户名称都是“访客”两个字。

所以我们想要显示出真实的访客信息，就需要接入“在线服务访客名片”，出于安全考虑，阿里云那边采用加密的方式来传输用户信息。首先由后端java对访客的真实信息进行加密，然后将加密后的信息传给阿里云，再进行解密，最后再展示出解密后的访客信息。

下面是“在线服务访客名片”接入流程地址（需先登录阿里云）。加密解密的相关jar包也在这篇文档中，必须下载。

https://help.aliyun.com/document_detail/68241.html?spm=a2c4g.11186623.6.585.1471525cV9FlSF

jar包下载后放在src目录下的lib包中

依赖

<!-- 在线访客名片信息解密 -->
<dependency>
    <groupId>com.alipay.fc.csplatform</groupId>
    <artifactId>fccsplatform-common-crypto</artifactId>
    <version>1.0.0.20161108</version>
    <scope>system</scope>
    <systemPath>${project.basedir}/src/lib/commons-lang-2.6.jar</systemPath>
</dependency>
<dependency>
    <groupId>com.alipay.fc.csplatform</groupId>
    <artifactId>fccsplatform-common-crypto</artifactId>
    <version>1.0.0.20161108</version>
    <scope>system</scope>
    <systemPath>${project.basedir}/src/lib/fccsplatform-common-crypto-1.0.0.20161108.jar</systemPath>
</dependency>

pom.xml中再加上这个，免得打包的时候不能同时带上jar包

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-dependency-plugin</artifactId>
    <executions>
        <execution>
            <id>copy-dependencies</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>copy-dependencies</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.directory}/classes/lib</outputDirectory>
                <includeScope>compile</includeScope>
            </configuration>
        </execution>
    </executions>
</plugin>

Controller层

import com.alibaba.fastjson.JSONObject;
import com.alipay.fc.csplatform.common.crypto.CustomerInfoCryptoUtil;
import com.totyu.util.ResultUtil;
import com.totyu.vo.Result;
import com.totyu.vo.User;
import com.totyu.zoworld.associates.dao.UserMapper;
import com.totyu.zoworld.config.CurrentUserUtil;
import com.totyu.zoworld.enroll.dao.EnrollDao;
import lombok.extern.slf4j.Slf4j;
import org.jolokia.util.Base64Util;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.net.URLEncoder;
import java.security.KeyFactory;
import java.security.PublicKey;
import java.security.spec.X509EncodedKeySpec;
import java.util.Map;

@RestController
@Slf4j
public class CustomerInfoController {

    // 公共密钥（需向阿里云提工单，提供租户id，即tntInstId，向售后人员获取，本片文档用******代替）
    private static String PUB_KEY = "MIIBIjANBgkqh******";

    /**
     * 对访客信息进行加密, 聊天窗埋点的时候, 生成埋点URL中的cinfo和key参数 使用此方法.
     * @param request
     * @param response
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/encrypt", method = RequestMethod.GET)
	public Result encrypt(HttpServletRequest request, HttpServletResponse response) {
        try {
            String userId = "10001";
            String userName = "小张";
            // 还原公钥
            PublicKey publicKey = getPubKey(PUB_KEY);
            // 要加密的信息 请使用json格式的字符串.
            String cinfo = "{\"userId\":\""+userId+"\",\"userName\":\""+userName+"\",\"extInfo\":{\"userId\":\""+userId+"\",\"userName\":\""+userName+"\"}}";
            Map<String, String> res =  CustomerInfoCryptoUtil.encryptByPublicKey(cinfo, publicKey);
            
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("cinfo", res.get("text"));
            jsonObject.put("key", res.get("key"));
            return ResultUtil.returnData(0, "操作成功!",jsonObject);
        } catch (Exception e) {
            //这里建议使用log记录错误. 减少干扰信息, DEMO里不使用LOG
            e.printStackTrace();
            return null;
        }
    }

    /**
     * 通过外部接口方式接入访客名片.
     * 工作台显示访客信息, 请使用此方法.
     * note : 本接口必须支持跨域访问.
     * @param request
     * @param response
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/decrypt", method = RequestMethod.POST)
    public JSONObject decrypt(HttpServletRequest request, HttpServletResponse response) {
        try {
            //这两个参数是云客服工作台调用该接口 post body带入的参数.
            String params = request.getParameter("params");
            String key = request.getParameter("key");
            PublicKey publicKey = getPubKey(PUB_KEY);
            //cinfo是用于客户在自己的后台系统来查询该用户更为详细的其他信息.
            String cinfo = CustomerInfoCryptoUtil.decryptByPublicKey(URLEncoder.encode(params, "UTF-8"), URLEncoder.encode(key,"UTF-8"), publicKey);
            JSONObject jsonObject = JSONObject.parseObject(cinfo);
            if(StringUtils.isEmpty(jsonObject.get("userId"))){
                return null;
            }
            String userId = (String)jsonObject.get("userId");
            Map<String,String> extInfo = (Map<String,String>)jsonObject.get("extInfo");
            String userName = extInfo.get("userName");

            String telePhone = "1379999****";
            // mockResult的格式必须按照以下要求
            String mockResult = "{\"message\":\"查询成功\",\"result\":{\"schema\":{\"properties\":{\"telePhone\":{\"name\":\"电话\",\"type\":\"text\"}}},\"telePhone\":\""+telePhone+"\","
                    + "\"userId\":\""+userId+"\",\"userName\":\""+telePhone+"\"},\"success\":true}";
            return JSONObject.parseObject(mockResult);
        } catch (Exception e) {
            //这里建议使用log记录错误. 减少干扰信息, DEMO里不使用LOG
            log.error("e:----" + e);
            e.printStackTrace();
            return null;
        }
    }

    //还原出RSA公钥对象
    private static PublicKey getPubKey(String pubKey) throws Exception {
        X509EncodedKeySpec keySpec = new X509EncodedKeySpec(Base64Util.decode(pubKey));
        KeyFactory keyFactory;
        keyFactory = KeyFactory.getInstance("RSA");
        PublicKey key = keyFactory.generatePublic(keySpec);
        return key;
    }
}

注意：该Controller中的第二个接口@ResponseBody @RequestMapping(value = "/decrypt", method = RequestMethod.POST)
该接口必须支持跨域请求。
接口协议必须是https。
响应头中 Content-Type 为 application/json; charset=utf-8。

然后找到云客服在线工作台中的“服务配置/热线高级配置”

点击“访客名片”，访客名片URL需填写支持跨域的https接口，也就是Controller层中的第二个接口/decrypt，该接口必须是支持跨域的https接口。然后，名片嵌入方式选择外部请求。再点击保存即可。（此处的操作是为了让阿里云能访问到你的/decrypt接口，阿里云那边要在这个接口上拼接两个字段params和key，这两个字段即访客的加密信息，传到你这个接口里再解密！最后将解密的访客信息展示到客服端页面）。

可以显示访客信息了。