因为最近有一个业务在做钉钉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;  }}//

  1. 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 前端，未经许可禁止转载