uni app H5接入钉钉单点登录

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

1.基础配置

• 1.需要在钉钉后台配置项目
• 2.配置完成之后需要由钉钉开发人员进行审核通过

2.uni app具体实现过程

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;
    }
}


// 

3. 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，一位前端开发工程师。

• 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
• 本文首发于微信公众号：crazyu 前端，未经许可禁止转载