【项目经验】钉钉免密登录实现

实现方案

一、项目代码实现
二、项目部署配置

一、项目代码实现

clike 复制代码

//引入钉钉jsapi
import * as dd from "dingtalk-jsapi";
//将Global全局变量挂载到Vue实例上
Vue.prototype.GLOBAL = global_;


//公司ID
const CorpId = "ding*************8e";
//H5应用的AppKey
const AppKey = "din**************sa";
//H5应用的AppSecret
const AppSecret =
  "bBP*********************************WKo0";
//H5应用的AgentId
const AgentId = "10*******24";

//定义当前用户id变量，用于接收当前用户id
var current_user_id = "";
//定义权限码，用于接收钉钉免密登录后得到的权限码
var auth_code = "";

console.log(dd.env.platform);
/**
 *@description:钉钉免密登录获取auth_code
 *@params: 无
 *@author: Yolanda
 *@date: 2021-02-26 14:17:03
 *@version: V1.0.0
 */
dd.ready(function() {
  dd.runtime.permission.requestAuthCode({
    corpId: CorpId,
    onSuccess: function(info) {
      auth_code = info.code;
      console.info("钉钉免密登录auth_code:" + auth_code);
      login();
    },
    onFail: function(err) {
      alert("err：" + err);
      console.log(err);
    }
  });
});


/**
 *@description:登录方法，串联get_access_token()方法
 *@params: 无
 *@author: Yolanda
 *@date: 2021-02-26 14:13:15
 *@version: V1.0.0
 */
function login() {

  get_access_token();
}

/**
 *@description:获取accesstoken，调用get_current_user_id()方法
 *@params: 无
 *@author: Yolanda
 *@date: 2021-02-26 14:12:57
 *@version: V1.0.0
 */
function get_access_token() {
  axios
    .get("/api/gettoken", {
      params: {
        appkey: AppKey,
        appsecret: AppSecret
      }
    })
    .then(function(response) {
      // alert("get response:" + JSON.stringify(response))
      // get_jsapi_ticket(response.data.access_token);
      get_current_user_id(response.data.access_token);
      console.log("获取accesstoken:" + response.data.access_token);
    })
    .catch(function(error) {
      alert("获取access_token错误：" + JSON.stringify(error));
      console.log(error);
    });
}

/**
 *@description:获取当前用户的dingId，根据dingId调用queryUserInfoByDingId()方法查询权限库里userId和userName，
                再将查到的userId作为executePlanOntime()方法的参数执行；
 *@params: 无
 *@author: Yolanda
 *@date: 2021-02-26 14:14:27
 *@version: V1.0.0
*/
function get_current_user_id(access_token) {
  axios
    .get("/api/user/getuserinfo", {
      params: {
        access_token: access_token,
        code: auth_code
      }
    })
    .then(function(response) {
      current_user_id = response.data.userid;
      Vue.prototype.GLOBAL.dingId = current_user_id;
      Vue.prototype.GLOBAL.dingName = response.data.name;
      console.log("获取当前用户dingId:" + Vue.prototype.GLOBAL.dingId);
      console.log("获取当前用户钉钉名:" + Vue.prototype.GLOBAL.dingName);
      console.log("=============================================");
      //根据dingId查询权限库用户表的用户信息
      queryUserInfoByDingId(Vue.prototype.GLOBAL.dingId).then(response => {
        console.log(response);
        Vue.prototype.GLOBAL.userId = response.data.id;
        Vue.prototype.GLOBAL.userName = response.data.userName;
        console.log("获取当前用户id:" + Vue.prototype.GLOBAL.userId);
        console.log("获取当前用户名:" + Vue.prototype.GLOBAL.userName);
        //根据获取到的UserId进行权限判定和页面跳转
        judgemental(Vue.prototype.GLOBAL.userId);
        //执行当前用户当前时间需要执行的计划
        // executePlanOntime(Vue.prototype.GLOBAL.userId);
        console.log("获取当前用户ID:" + Vue.prototype.GLOBAL.userId);
        localStorage.setItem("notict", "欢迎使用LPM学习流程管理！！");
        localStorage.setItem("userName", response.data.userName);
      });
      // 设置管理员账号，在此处写入管理员的钉钉账号名，则管理员在钉钉登录系统时可以使用Vconsole
      // var adminNames = ["杨*梅", "刘*娇", "刘*欢", "吉*","何*芳","王*春", "郝*飞","李*诚","纪*光"]
      // if (adminNames.indexOf(response.data.name) >= 0) {
      //   const Vconsole = new VConsole()
      //   Vue.use(Vconsole)
      // }
    })
    .catch(function(error) {
      alert("获取用户id错误：" + JSON.stringify(error));
    });
}

function get_jsapi_ticket(access_token) {
  axios
    .get("/api/get_jsapi_ticket", {
      params: {
        access_token: access_token
      }
    })
    .then(function(response) {
      var ticket = response.data.ticket;
      getsign(ticket);
    })
    .catch(function(error) {
      alert(error);
    });
}

function getsign(ticket) {
  var nonceStr = "dmsd";
  var timeStamp = new Date().getTime();
  var url = window.location.href;
  axios
    .get("/api/dmsd/getsign", {
      params: {
        nonceStr: nonceStr,
        timeStamp: timeStamp,
        url: url,
        ticket: ticket
      }
    })
    .then(function(response) {
      var sign = response.data.data;
      dd.config({
        agentId: AgentId,
        corpId: CorpId,
        timeStamp: timeStamp,
        nonceStr: nonceStr,
        signature: sign,
        jsApiList: [
          "runtime.info",
          "biz.contact.choose",
          "device.notification.confirm",
          "device.notification.alert",
          "device.notification.prompt",
          "biz.ding.post",
          "biz.util.openLink",
          "device.audio.startRecord",
          "device.audio.stopRecord",
          "device.audio.translateVoice"
        ]
      });
    })
    .catch(function(error) {
      alert(error);
    });
}

二、项目部署配置

clike 复制代码

        location /api/gettoken {
             rewrite /api/(.*)$ /$1 break;
             add_header 'Access-Control-Allow-Origin' '*';
             proxy_pass https://oapi.dingtalk.com;
        }

        location /api/user/getuserinfo/ {
            rewrite /api/(.*)$ /$1 break;
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass https://oapi.dingtalk.com;
        }

        location /api/get_jsapi_ticket {
           rewrite /api/(.*)$ /$1 break;
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass https://oapi.dingtalk.com;
        }