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對象。如果直接在瀏覽器中進行測試可能是沒有反應的~

？如何測試。