钉钉企业微应用的接入-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

钉钉企业微应用的接入

简介:

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

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

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

先看一下企业流程图

599fae8608efdb7795bd4e0772a8f839303c8d00

1. 准备工作

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

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

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

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

2fc558c7929baba29427e80d62dab7f69b725003

引入钉钉提供的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


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章