由于工作需要,第一次写钉钉相关知识,嵌入H5页面还好,还需要进页面调用钉钉免登陆接口,确实有点无头绪,找了一下相关资料,总结了一下:

1.引用 jsapi

npm install dingtalk-jsapi --save   //下载安装依赖包
import * as dd from 'dingtalk-jsapi'  // vue引入
//<script src="//g.alicdn.com/dingding/dingtalk-jsapi/2.0.57/dingtalk.open.js"></script>  浏览器方式引入

2.获取_config
官网或者相关例子都是在jsp中直接钉钉相应的config进行操作,而实际中当 前后端分离,就需要通过接口形式获取_config配置项,需要后端接口返回

agentId : _config.agentid,
corpId : _config.corpId,
timeStamp : _config.timeStamp,
nonceStr : _config.nonceStr,
signature : _config.signature,

3.验证参数是否正确

dd.config({       //dd.config方法会对参数进行验证
    agentId : _config.agentid,
    corpId : _config.corpId,
    timeStamp : _config.timeStamp,
    nonceStr : _config.nonceStr,
    signature : _config.signature,
    jsApiList : [                              //需要调用的借口列表  
        'runtime.info',          
        'biz.contact.choose',              //选择用户接口
        'device.notification.confirm',     //confirm,alert,prompt弹窗   
        'device.notification.alert',
        'device.notification.prompt',
        'biz.util.openLink' ]
});

4.正确的时候执行dd.ready(function(){})

dd.ready(function() {

    // 获得免登授权码
    dd.runtime.permission.requestAuthCode({
        corpId : _config.corpId,
        onSuccess : function(info) {
            let params = {
                code: info.code,
                corpId: _config.corpId
            }
            // 此处调用后端的接口,传入params获得用户信息进行相关操作
        },
        onFail : function(err) {
            alert('fail: ' + JSON.stringify(err));
        }
    });
});

5.错误的时候执行dd.error(function(){})

dd.error(function(err) {
    alert('dd error: ' + JSON.stringify(err));
    // 可以在报错的时候进行提示或其他操作
});

6.测试
测试的时候需要下载测试版钉钉,下载后在钉钉相应平台创建自己的企业,添加应用,进行测试
https://open-doc.dingtalk.com/microapp/debug/pexeq3

!!!注意

获取_config 的时候,由于需要生成签名,需要获取请求接口页面的url ( eg : http://localhost:8088/ ),不包括#及其后面部分,否则容易报签名失效问题

代码大概如下:
这里写图片描述

Logo

前往低代码交流专区

更多推荐