钉钉企业微应用的接入

钉钉企业微应用的基本接入

对于初次接触钉钉，在看完官方文档后，接入钉钉企业微应用的同学。在看文档的过程当中可能有点迷糊。 在钉钉官方文档中，前端和后端是分开来的。没有整体讲解到钉钉前端与后端的结合。

今天主要讲解一下如何简单的接入钉钉企业的微应用以及获取免登码。

先看一下企业流程图

1. 准备工作

1.注册钉钉企业账号，并创建钉钉企业。这里我就不复述了。官方文档已经给出具体的操作步骤

2.新建一个微应用。
2.开发 

搭建自己的本地或者部署在外网web服务

设置首页地址为本地服务的地址或外网的服务地址

引入钉钉提供的SDK

下载地址： https://github.com/ddtalk/client_sdk

1. 后端：获取accesstoken 以及 js_ticket

传入的参数就是新建企业是拿到的CorpId和CorpSecret

 ServiceFactory serviceFactory = ServiceFactory.getInstance();
 CorpConnectionService corpConnectionService = serviceFactory.getOpenService(CorpConnectionService.class);
 accessToken = corpConnectionService.getCorpToken(CorpID,CorpSecret);

获取到accesstoken之后 我们可以通过accesstoken拿到js_ticket

 ServiceFactory serviceFactory = ServiceFactory.getInstance();
 JsapiService jsapiService = serviceFactory.getOpenService(JsapiService.class);
 JsapiTicket jsapiTicket = jsapiService.getJsapiTicket(accessToken , "jsapi");
 JSTicket = jsapiTicket.getTicket(); 

拿到js_ticket 我们就可获取到signature 签名信息

@RequestMapping("/get_js_config")
    @ResponseBody
    public Map<String,Object> getJsConfig(@RequestParam(value = "url" ,required = false) String url
            ,@RequestParam(value = "corpId",required = false) String corpId){
        String accessToken = authHelper.getAccessToken();
        String JSTicket = authHelper.getJSTicket(accessToken);

        String nonceStr = Utils.getRandomStr(8);
        Long  timeStamp = System.currentTimeMillis();

        try {
            String signature = DingTalkJsApiSingnature.getJsApiSingnature(url ,nonceStr ,timeStamp ,JSTicket);
            Map<String,Object> JsApiConfig = new HashMap<String,Object>();

            JsApiConfig.put("signature",signature);
            JsApiConfig.put("nonceStr",nonceStr);
            JsApiConfig.put("timeStamp",timeStamp);
            JsApiConfig.put("corpId",corpId);

            return JsApiConfig;
        } catch (Exception e) {
            e.printStackTrace();
            logger.info(" message ", e.getMessage());

        }

        return null;
    }

参数URL 是我们前面设置的首页地址 CorpId是我新建企业可以拿到的

后端需要获取的参数以及获取完毕。

2.前端 通过后端传递到前端的参数 通过dd.config鉴权

手机前端我们需要引入钉钉的js文件

1. 在使用jsApi的时候，引入的jsapi地址为：https://g.alicdn.com/ilw/ding/0.9.2/scripts/dingtalk.js

pc端我们需要引入

1. 在使用jsApi的时候，引入的jsapi地址为：http://g.alicdn.com/dingding/dingtalk-pc-api/2.3.1/index.js
2. 在使用jsApi的时候，调用方式为：DingTalkPC.config，用DingTalkPC替换移动客户端的dd调用方试

前端处理的工作：

$(document).ready(function () {
        var url = window.location.href;
        console.log("url", url);
        var corpId = "xxxxxxxxxxxxxxxxxxxxxxxx";  // 企业的corpId
        var signature = "";
        var nonceStr = "";
        var timeStamp = "";
        var agentId = "";

        $.post(
            'get_js_config',
            {
                "url": url,
                "corpId": corpId
            },
            function (result) {
                console.log("result", result);
                signature = result.signature;
                nonceStr = result.nonceStr;
                timeStamp = result.timeStamp;
                agentId = result.agentId;
                corpId = result.corpId;

                dd.config({
                    agentId: agentId,
                    corpId: corpId,
                    timeStamp: timeStamp,
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: [
                        'runtime.info',
                        'biz.contact.choose',
                        'device.notification.confirm',
                        'device.notification.alert',
                        'device.notification.prompt',
                        'biz.ding.post',
                        'biz.util.openLink'] //必填，需要使用的jsapi列表
                });

                dd.ready(function () {
                        console.log('dd.ready rocks!')

                        dd.runtime.info({
                            onSuccess: function (info) {
                                console.log('runtime info: ' + JSON.stringify(info));
//                                alert(JSON.stringify(info));
                            },
                            onFail: function (err) {
                                console.log('fail: ' + JSON.stringify(err));
//                                alert(JSON.stringify(err));
                            }
                        });

                        dd.runtime.permission.requestAuthCode({
                            corpId: corpId, //企业id
                            onSuccess: function (info) {
                                console.log('authcode' + info.code);
//                                alert('authcode = '+info.code);
                                Window.authcode = info.code;   //免登授权码
                            },
                            onFail: function (err) {
                                console.log('requestAuthCode fail: ' + JSON.stringify(err));
//                                alert(JSON.stringify(err));
                            }
                        });
                    }
                );
            })
    });

我们就进入手机端进入钉钉，切换到我们新建的企业，找到我们新建的微应用。点击进去，这时弹出框显示的信息。就是我们想要的免登授权码

这样说明我们已经成功接入企业应用了。

也可以通过结合视频了解企业微应用的接入  https://yq.aliyun.com/edu/lesson/play/670

谢谢大家。 有什么不对地方或则不足的地方，希望大家指出。