Vue获取钉钉免登陆授权码

2023-10-09 12:05:34

1.背景

最近公司开发一个企业内部钉钉微应用,有个需求是动态获取钉钉免登陆code,之前从没玩过

百度+google了半天还是c了个有bug的(免登陆code只能用一次,且在异步函数中调用),网上的蛇皮解决方案真是让人头秃........

无奈今天是deadline,无更多时间c错误代码,只能昨晚请教我的室友---全南京最强大前端架构狮丶俊俊来帮我解决这一令屎上最强全栈学习退堂鼓一号选手丶小金棘手的问题

然后推导出---这就是callback最佳实践!(主题是我编的,爱你是真的)

2.技术栈

Vue.js(cli3+)整合dingtalk-jsapi

3.需求

如上所述,需要动态获取一次性的钉钉免登陆code,我采用的是安装依赖的方法

4.实现步骤

4.1 配合webpack安装对应的npm包

npm install dingtalk-jsapi

4.2 抽取获得code的`js`方法

import * as dd from 'dingtalk-jsapi';

export function getCode(callback) {
  let corpId = '你公司的corpId';
  if (dd.env.platform !== "notInDingTalk") {
    dd.ready(() => {
      //使用SDK 获取免登授权码
      dd.runtime.permission.requestAuthCode({
        corpId: corpId,
        onSuccess: (info) => {
          // 根据钉钉提供的api 获得code后,再次调用这个callback方法
          // 由于是钉钉获取code是异步操作,不知道什么时候执行完毕
          // callback 函数会等他执行完毕后在自己调用自己
          callback(info.code)
        },
        onFail: (err) => {
          alert('fail');
          alert(JSON.stringify(err));
        },
      });
    });
  }
}

以上 getCode(callback){} 中的callback就是一个回调函数,稍后在使用中介绍使用方法

4.3 在需要使用code的页面中引入js文件,导入方法

4.4 在刚才的页面需要调用的方法里调用刚才导进来的js方法

注意: 所有关于code的操作都要在此回调函数中执行

码农公寓