Bootstrap

从0搭建钉钉企业内部H5微应用-前端钉钉免登获取用户信息

 一.开发者后台操作

1.创建应用 

2.记录下这三个 后面有用到

3.添加应用能力-选择网页应用

4.配置网页地址必填,有pc端地址也可填写

5.安全设置必填

二.下载依赖

1.安装依赖

npm install dingtalk-jsapi --save

2.引入钉钉依赖

import * as dd from "dingtalk-jsapi";

三.免登前端代码

一共分三步(钉钉api文档提供):

1.获取免登授权码

2.根据Client ID和Client Secret获取 access_token

3.根据access_token和免登授权码获取用户信息

// 1.获取免登授权码
function getAuthCode() {
  dd.requestAuthCode({
    clientId: clientId, // 钉钉应用id
    corpId: corpId, // 企业id
    success: res => {
      const { code } = res;
      authCode = code;  // 免登授权码
    },
    fail: err => {
      message("失败" + JSON.parse(err), { type: "error" });
    },
    complete: () => {}
  });
}
// 2.根据appkey和appSecret获取 access_token 
http
    .axiosRequest({
      baseURL: "https://oapi.dingtalk.com",
      url: `/gettoken?appkey=${clientId}&appsecret=${clientSecret}`,
      method: "GET"
    })
    .then((res: any) => {
      // 3.根据access_token获取userid
      http
        .axiosRequest({
          baseURL: "https://oapi.dingtalk.com",
          url: `/topapi/v2/user/getuserinfo?access_token=${res.access_token}`,
          method: "POST",
          data: {
            code: authCode
          }
        })
        .then((res: any) => {;
             //拿到用户信息
        })
        .catch(err => {
          message("获取钉钉人员信息失败" + err, { type: "error" });
        });
    })
    .catch(err => {
      message("获取钉钉token失败" + err, { type: "error" });
    });

后两步钉钉跨域交由后端处理,调用一个接口直接返回用户信息就好了。

;