金歌 发表于 2025-1-6 00:20:39

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

 一.开辟者背景操作

1.创建应用 
https://i-blog.csdnimg.cn/direct/64f1487d413e4ccdb4d9b45bb5c168fc.png
2.记载下这三个 后面有用到
https://i-blog.csdnimg.cn/direct/de71b68a1ad0410da8277f1649e71f6d.png
3.添加应用能力-选择网页应用
https://i-blog.csdnimg.cn/direct/16ff167e11424c83ae9eb20a168c80df.png
4.配置网页地址必填,有pc端地址也可填写
https://i-blog.csdnimg.cn/direct/a764066329ea444bb0cc7a7615c55276.png
5.安全设置必填
https://i-blog.csdnimg.cn/direct/8f120d29bfe44d6e8e6b0651aa833df9.png
二.下载依赖

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" });
    }); 后两步钉钉跨域交由后端处理,调用一个接口直接返回用户信息就好了。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 从0搭建钉钉企业内部H5微应用-前端钉钉免登获取用户信息