基于Vue开发钉钉企业内部应用的鉴权过程的实现

笔者在之前的博文中曾经介绍过钉钉企业内部应用的鉴权过程的实现方式,当时前端选用的是jquery。上周学习了Vue,并尝试开发了一款简易的钉钉企业内部应用。现实现过程作概括总结。
PS:因笔者尚未学习Webpack工具,本文使用script标签引入vue.js,利用httpVueLoader引入外部Vue组件。

index.html

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <script src="js/vue.2.6.11.min.js" type="text/javascript" charset="utf-8">script>
        <script src="js/httpVueLoader.js" type="text/javascript" charset="utf-8">script>
        <script src="js/axios.min.js" type="text/javascript" charset="utf-8">script>
        <script src="js/dingtalk.open.2.7.13.js" type="text/javascript" charset="utf-8">script>
        <title>**系统title>
    head>
    <body>
        <div id="assets">
            <compMarkup v-if="userComp">compMarkup>
        div>
        <script src="js/index.js" type="text/javascript" charset="utf-8">script>
    body>

index.js

var _config = null;  //用于保存鉴权数据的变量
var assets = new Vue({
    el: "#assets",
    data: {
        loginddname: "", //这里定义需要的变量(属性),比如我这里用于保存后端传来的钉钉用户真实姓名
        userComp:0  //此变量用于根据用户角色控制是否显示子组件,默认不显示
    },
    components: {
        //这里使用httpVueLoader引入定义的外部子组件
        'compMarkup':httpVueLoader("./components/compName.vue")
    },
    created(){
        this.dingdingApi() //调用鉴权函数
    },
    methods:{
        //定义鉴权函数
        dingdingApi  () {
            var that =this;//为解决this作用域问题,将其在函数内赋值给that变量
            axios.get("yourUrl?url=" + location.href).then((rs) => {
                _config = rs.data;//接收后端鉴权结果。这里切记:利用axios接收到的结果是保存在key为data的对象下面的,这一点和基于jquery ajax的方式不同。算是一个小坑吧。下同。
                var jsapilist = [ 
                    'device.notification.alert', //警告框
                    'device.notification.confirm', //确认框
                    'biz.navigation.setTitle', //设置导航栏标题
                    'biz.navigation.quit', //关闭页面
                    'biz.util.openModal', //打开弹窗(模态窗)
                    'biz.contact.complexPicker' //选择人员
                ] //需要使用的jsapi列表
            
                //1、鉴权
                dd.config({
                    agentId: "your agentId",
                    corpId: "your corpId", //必填,企业ID
                    timeStamp: _config.timestamp, // 必填,生成签名的时间戳
                    nonceStr: 'abcdefg', // 必填,生成签名的随机串
                    signature: _config.signature, // 必填,签名
                    jsApiList: jsapilist // 必填,需要使用的jsapi列表,注意:不要带dd。
                });
            
                dd.error(function(err) { //验证失败  
                    console.log("进入到error中");
                    console.log('dd error: ' + JSON.stringify(err));
                })
            
                //钉钉鉴权成功后的函数
                dd.ready(function() {
                    //获取当前用户信息
                    dd.runtime.permission.requestAuthCode({
                        corpId: _config.corpId,
                        onSuccess: function(result) {
                            _config.authCode = result.code; //获取并保存授权码
                            //获取用户登录信息和应用内用户信息
                            axios.get("yourUrl?authCode="+_config.authCode+"&access_token="+_config.access_token.access_token).then((rs)=>{
                                // 如果用户不是本系统的合法用户,则弹出警告
                                if(rs.data.code!=0)
                                {
                                    dd.device.notification.alert({
                                        message: rs.data.msg,
                                        title: "警告",//可传空
                                        buttonName: "确定",
                                        onSuccess : function() {
                                            //用户点击“确定”按钮后,退出系统
                                            dd.biz.navigation.close({
                                                onSuccess : function(result) {},
                                                onFail : function(err) {}
                                            })
                                        },
                                        onFail : function(err) {}
                                    });
                                }
                                else
                                {
                                    that.loginddname=rs.data.data[0].ddname;//接收后端传过来的钉钉用户真实姓名,赋值给data中的loginddname变量(属性)
                                    if(rs.data.data[0].role==1) //这里根据后端返回的用户角色值,为控制子组件是否显示的变量userComp赋值,1显示,0不显示(默认)
                                    {
                                        that.userComp=1;
                                    }
                                    else
                                    {
                                        that.userComp=0;
                                    }
                                }
                            })
                        }
                    })
                })
            })
        }
    }
})

你可能感兴趣的:(Vue)