关于javascript:uni-app-H5接入钉钉单点登录

2次阅读

共计 1334 个字符，预计需要花费 4 分钟才能阅读完成。

因为最近有一个业务在做钉钉 H5 的单点登录，遂记录下来

1. 须要在钉钉后盾配置我的项目

2. 配置实现之后须要由钉钉开发人员进行审核通过

1. 引入钉钉 JSSDK

 npm i dingtalk-jsapi --save

2.main.js 引入

import * as dd from 'dingtalk-jsapi'; // 此形式为整体加载，也可按需进行加载

import {isApp} from '@/utils.js';

const inDD = isApp()
Vue.prototype.indd = inDD;
if (inDD) {
Vue.prototype.dd = dd;
// 禁用 iOS Webview 弹性成果
dd.ready(function () {dd.ui.webViewBounce.disable()
})
}

因为钉钉 H5 是局部页面


// isApp 办法
export function isApp () {if (userAgent.includes("DingTalk")) {return true;} else {return false;}
}


//

authorization.vue JS 局部

import * as dd from 'dingtalk-jsapi';
function getQueryVariable(variable) {
  let href = window.location.search;
  let query = href.substring(href.indexOf('?') + 1);
  let vars = query.split('&');
  for (var i = 0; i < vars.length; i++) {let pair = vars[i].split('=');
 if (pair[0] == variable) {return pair[1];
 }
  }
  return false;
}


onShow() {
 const indd = this.indd;
 if (indd) {dd.ready(function () {const corpId = getQueryVariable('corpId');
     // console.log(corpId, 'corpId');
     // console.log(location.href, 'href');
     dd.runtime.permission.requestAuthCode({
       corpId, // 企业 id
       onSuccess: async (info) => {
         try {// console.log(info, 'info')
           // 拿到 code 之后获取 token，而后拿到用户用户信息等
           const res = await Api.loginRequest(info.code);
           // console.log(res, 'res')
           const token = res?.data;
         } catch (err) {that.showPage = true;}
       },
       onFail: () => {that.showPage = true;},
     });
   });
 } else {that.showPage = true;}
  },

### 写在最初

我是 crazyu，一位前端开发工程师。