钉钉企业内部-H5微应用开发

前言

公司需利用钉钉相关API完成公司内部报销平台。 

项目搭建

1. 创建H5微应用

登入钉钉开放平台（https://open-dev.dingtalk.com/#/index），进入“应用开发”->企业内部开发H5微应用->创建应用，并填写基本信息和配置开发信息

注意：应用首页链接：vscode需安装Liver Server插件，将首页以该方式打开，将获得的地址的IP地址替换为本机IP地址，得到应用首页链接。

 2.JSAPI鉴权API开发

（1）JSAPI鉴权服务端API的开发：

   ①通过appKey 、appSecret 获取调用接口凭证AccessToken(https://oapi.dingtalk.com/gettoken?                     appkey=appKey&appsecret=appSecret)

   ②通过AccessToken 获取用于JSAPI的临时票据Ticket(https://oapi.dingtalk.com/get_jsapi_ticket?access_token=ACCESS_TOKEN) 

 后端详细的就不写了，感兴趣可以看看钉钉服务端API开发文档

 （2）JSAPI鉴权前端API的开发：

  前端通过发送请求获取服务端的JSAPI 鉴权配置信息。

        if (!localStorage.getItem('sessionId')) {
                console.log("鉴权开始");
                //应用首页链接
                var datas = { "url": "http://192.168.0.66:5500/html/index.html" };
                apiRequest('post', 'ding_talk/config', datas, function (data) {
                    _config = data.row; 
                    dd.config({
                        agentId: _config.agentId, // 必填，微应用ID
                        corpId: _config.corpId,//必填，企业ID
                        timeStamp: _config.timeStamp, // 必填，生成签名的时间戳
                        nonceStr: _config.nonceStr, // 必填，生成签名的随机串
                        signature: _config.signature, // 必填，签名
                        type: 0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。 
                                     该参数从dingtalk.js的0.8.3版本开始支持
                        jsApiList: []
                    });
                    dd.ready(function () {
                        console.log('鉴权成功');
                        //登录
                    });
                    dd.error(function (err) {
                        window.localStorage.setItem("sessionId", '');
                        console.log('dd error: ' + JSON.stringify(err));
                    });
                }, function (res) {
                    dd.error(function (err) {
                        console.log('dd error: ' + JSON.stringify(err));
                    });
                    console.log(res);
                });
            }

（3）H5微应用免登（用户自动登录应用）

    后端得到免登授权码后，通过服务端API（/user/getuserinfo）获取用户信息后返回。

dd.runtime.permission.requestAuthCode({
    corpId: _config.corpId, // 企业id
    onSuccess: function (info) {
        code = info.code; // 通过该免登授权码可以获取用户身份信息  
        //登录
        apiRequest('post', 'ding_talk/login', { "code": code }, function (data) { 
            window.localStorage.setItem("sessionId", data.row.sessionId); 
            window.localStorage.setItem("userId", data.row.userId);
        }, function (res) {
            console.log(res);
        })
    },
    onFail: function (res) {
        window.localStorage.setItem("sessionId", ''); 
    }
});

前端详细可看看前端API开发文档