钉钉微应用开发时利用钉钉提供的接口获取用户信息

～Serendipity～

已于 2023-02-14 15:50:52 修改

阅读量1.2k

点赞数

文章标签：钉钉

于 2023-02-14 15:15:32 首次发布

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/129026818

版权

1、在main.js中引入

import * as dd from 'dingtalk-jsapi';

Vue.prototype.$dd = dd;

2、在login.vue页面中获取用户信息

<template>
  <div>
  </div>
</template>

<script>
// 方案一 在.vue中引入
// import * as dd from 'dingtalk-jsapi'; 
// 使用dd.### dd.env.platform
// 方案二 在main.js中引入
// 方案二：使用this.$dd.### this.$dd.env.platform
export default {
  data() {
    return {
      code: "",
    };
  },
  mounted() {
    this.autoLogin();
  },
  methods: {
    autoLogin() {
      this.$dd.device.notification.showPreloader({
        text: "使劲加载中..",
        showIcon: true,
      });
      var _this = this;
      this.$dd.ready(() => {
        this.$dd.runtime.permission.requestAuthCode({
          corpId: "                 ", // 企业的钉钉id  唯一值，写死
          onSuccess: function (info) {
            _this.code = info.code; // 经过该免登受权码能够获取用户身份
            _this.getUserInfo(info.code)//拿到用户钉钉的code信息传给后端获取用户信息
          },
          onFail: function (err) {
            this.$dd.device.notification.toast({
              icon: false,
              text: "用户信息获取失败",
              duration: 2,
              delay: 0,
            });
          }
        });
      });
    },
    getUserInfo(code) {
      this.$store.dispatch("user/getUser", code).then((res) => {
        if (res == 'ok') {
          this.$dd.device.notification.hidePreloader({
            onSuccess: function (res) {
              // 调用成功时回调
              console.log(res)
            },
            onFail: function (err) {
              // 调用失败时回调
              console.log(err)
            }
          });
          // 用户信息获取成功后跳转页面
          this.$router.replace({ path: "/contract-list" });
        }
      }).catch(err => {

      });
    },
  }
};
</script>

<style lang="scss" scoped>
</style>