钉钉企业内部H5微应用JSAPI纯前端鉴权流程

钉钉官网给出的JSAPI鉴权的流程分为四个步骤：

1.获取token

2.获取ticket

3.获取数字签名

4.设置权限

钉钉开发文档，它给出了两个JSAPI的鉴权demo，分别是java和php的，需要前后端配合,而我们此次做的项目用了纯前端鉴权的方法,实现鉴权的前后端分离。Vue项目中需要引入以下两个个依赖。

import CryptoJS from 'crypto-js'; // 加密，用于生成数字签名

import * as dd from "dingtalk-jsapi"; // 钉钉JSAPI

1. token 的获取

以Vue H5项目为例

请求的发送：

调用钉钉接口https://oapi.dingtalk.com/gettoken

    async getToken () {

      let resp = await this.$http.getToken({'appkey': appkey, 'appsecret': appsecret})

      if (resp.data && resp.data.access_token) {

        this.access_token = resp.data.access_token

        sessionStorage.setItem('access_token', resp.data.access_token)

        this.getTicket()

      } else {

        Toast({ message: '凭证获取失败' })

      }

    },

token时效为两小时，为避免重复调用可放到session中并设置失效时间。

1. 代理的设置

本地开发时，因钉钉各个接口的前缀不同，需要设置代理，设置相同前缀并重写

proxyTable: {

     '/dingding': {

        target: 'https://oapi.dingtalk.com',

        secure: false,

        changeOrigin: true,

        pathRewrite: {