Tips_钉钉免登前端实现

1.需求：开发钉钉微应用，需要实现钉钉的免登陆功能。

#.其实钉钉的文档中心还是很详细的，只是刚开始接触会一头雾水，所以花费了挺多时间.......

 

？什么是钉钉免登功能。

？企业应用免登开发授权流程。

？钉钉免登前端demo。

？jsapi

 

 

#.这里借用钉钉官方的流程图，前端在这个过程中的工作，其实是从我标注的部分开始的~~~

#.也就是说，后端的同学需要把相应的参数都返回给前端，前端依照demo上的例子，利用jsapi进行验证~

#.本次开发我们使用的前后端分离的方式，通过ajax请求数据

　　说明：

（1）该代码是基于PC端的（如果是移动端需要更换jsapi，DingTalkPC.config 更为 dd.config）

（2）data：{url：“。。。”}是当前请求地址（这里我用的是绝对地址，换成相对地址试了错误~）

（3）后端返回给我数据是这样的，所需要的数据在data.dataList中，我将其保存在_config中，方便下面使用。

　代码：

var _config;
    $.ajax({
    url:"/？？？？/dingtalk/config",
    type:"GET",
    async:false,
    data:{
        url:"http://？？？.html"
    },
    dataType:"json",
    error:function(errorThrown){
      console.log("发生错误：" + errorThrown);
    },
    success:function(data){
        console.log(data);
        _config = data.dataList;
    }
  });
    DingTalkPC.config({ //实现验证  
        agentId: _config.agentId,
        corpId: _config.corpId,
        timeStamp: _config.timeStamp,
        nonceStr: _config.nonceStr,
        signature: _config.signature,
        jsApiList: [
            'runtime.info',
            'device.notification.prompt',
            'biz.chat.pickConversation',
            'device.notification.confirm',
            'device.notification.alert',
            'device.notification.prompt',
            'biz.chat.open',
            'biz.util.open',
            'biz.user.get',
            'biz.contact.choose',
            'biz.telephone.call',
            'biz.ding.post']
    });  

（4）如果验证成功，会自动执行 DingTalkPC.ready 函数，然后通过 DingTalkPC.runtime.permission.requestAuthCode 获取 code，再将 code 给后端，后端就可以获取到用户详细信息了，然后再返回给前端使用。

代码：

DingTalkPC.ready(function() {//验证成功  
        DingTalkPC.runtime.permission.requestAuthCode({
            corpId: _config.corpId, //企业id
            onSuccess: function (info) {
                // console.log(info);
                console.log('authcode: ' + info.code);
                $.ajax({
                    url: '？？？？？',
                    type:"GET",
                    data: {"event":"get_userinfo","code":info.code},
                    dataType:'json',
                    timeout: 900,
                    // async:false,
                    success: function (data, status, xhr) {
                        // console.log(data);
                        userId = data.userid;
                        deptId = data.department[0];
                        $('#user_id').val(data.jobnumber);//工号
                        $('#user_name').val(data.name);//姓名
                        $('#position').val(data.position);//岗位
                    },
                    error: function (xhr, errorType, error) {
                       console.log(errorType + ', ' + error);
                    }
                });
            },
            onFail: function (err) {
                console.log('requestAuthCode fail: ' + JSON.stringify(err));
            }
        });
    });  

（5）验证失败，会自动执行 DingTalkPC.error 函数

代码：

 DingTalkPC.error(function(err) {
        console.log('DingTalkPC error: ' + JSON.stringify(err));
    });

 

注意：

　　开发时的所有测试都是在钉钉环境下的，即需要将你的微应用接入到钉钉中，一边开发一边进行测试，因为钉钉的 jsapi  ，只有在钉钉app环境下才有dd对象，在钉钉pc端的环境下才有 DingTalkPC对象。如果直接在浏览器中进行测试可能是没有反应的~

？如何测试。