vue项目对接钉钉企业内部H5微应用

薛定喵君

发布于 2020-12-01 02:23:41

2.9K00

代码可运行

文章被收录于专栏：薛定喵君薛定喵君

运行总次数：0

代码可运行

最近公司项目又需要接入钉钉啦 ?，所以又去做了钉钉的企业内部应用对接。

应用场景 将之前已经有的 H5 应用接入钉钉内，无需输入账号密码便可直接登录。

# 准备工作

1.注册钉钉(废话)
2.负责开发的相关人员申请成为钉钉子管理员(找公司内的超管申请)
- 注意需要管理员赋予必要的权限，例如：
  - 开发应用的数据权限
  - 开发者权限
  - 工作台管理
  - 应用中心管理
3.登录钉钉开发者后台只有管理员和子管理员可登录开发者后台
4.在应用开发页面，选择企业内部开发 > H5微应用，然后单击创建应用

5.填写应用的基本信息，然后单击确定创建
6.在应用信息页面，单击开发管理，然后单击修改
- 这里注意『开发模块』的选择。如果已有可接入的H5应用时，文档提示说选择『快捷链接』的方式，但是如果后端需要请求钉钉的话就要配置服务器出口IP(白名单)了，所以还是得选择『开发应用』，不然无法配置后端请求的白名单(坑)
7.单击凭证与基础信息获取应用的AppKey和AppSecret
8.如果需要获取通讯录权限，就要添加合适的接口权限

# 开发流程

1.获取免登授权码。
- H5微应用免登流程
2.获取access_token。
- 调用gettoken接口获取access_token 。
3.获取用户userid。
- 调用user/getuserinfo接口获取用户的userid，通过免登码获取用户userid 。
4.获取用户详情。
- 调用user/get接口获取用户详情信息。
5.根据手机号做登录。
- 视自己应用情况而定

# 项目修改

# 项目情况

技术栈

vue 2.6.11
vue-cli 2.9.6

# 接入步骤

# 依赖安装

更目录执行以下命令

npm install dingtalk-jsapi --save

# 获取微应用免登授权码方法封装

项目的 utils 目录下(当然也可以选择 common 组件目录)新建文件dd.js

import * as dd from 'dingtalk-jsapi'

export function getCode(callback) {
  let corpId = 'your 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))
        }
      })
    })
  }
}

corpId 可到后台基本信息->开发信息(旧版)->企业自用账号信息下查看。

# 应用入口页面修改

import { getCode } from '@/utils/dd'

export default {
  data() {
    return { }
  },
  methods: {},
  created() {
    getCode(code => {
      // 登录处理
    })
  }
}