vue实现钉钉扫码登录第三方网站

（1）### 登录钉钉开放平台，进入应用开发页面，此页面需要管理员开放权限才能进入

（2）### 点击【创建应用】，圈出的三部分填写完之后点击【确定创建】

（3）### 切换到新版，钉钉登录与分享中填写回调域名（回调域名就是扫码成功要跳转的页面），点击【添加】

（4）### 切换旧版登录模块内，点击【创建扫码登录应用授权】

具体信息如下：

整体开发流程

官网教程：https://developers.dingtalk.com/document/app/enterprise-internal-application-logon-free?spm=ding_open_doc.document.0.0.28f72f17JgEdc7#topic-2021731

1、获取免登授权码

<template>
  <div class="dd-scan-login">
    <div id="dd-login"></div>
  </div>
</template>
<script>
/** 钉钉扫码登录 */
const appid = "dingoarzxwx984vesoq0m";
const url = encodeURIComponent("http://localhost:9000/#/home");
const goto = encodeURIComponent(
  `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`
);

// code = 14c29b40012931b2b26d786cf3ed3541
export default {
  data() {
    return {
      articleContent: "", //文章内容
    };
  },

  created() {
    window.addEventListener("message", this.DDMessage, false);
  },

  mounted() {
    this.ddInit();
  },

  methods: {
    /** 初始化钉钉登录 */
    ddInit() {
      window.DDLogin({
        id: "dd-login",
        goto, //请参考注释里的方式
        style: "border:none;background-color:#FFFFFF;",
        width: "365",
        height: "400",
      });
    },

    DDMessage(event) {
      const origin = event.origin;
      if (origin === "https://login.dingtalk.com") {
        //判断是否来自ddLogin扫码事件。
        const loginTmpCode = event.data;
        //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
        console.log("loginTmpCode", loginTmpCode);
        window.location.href = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}&loginTmpCode=${loginTmpCode}`;
      }
    },
  },
};
</script>

扫码成功之后跳转到首页，可以看到路由上有code值，也就是扫描之后获取到的loginTmpCode

2、获取access_token

这块的操作需要 在服务端进行，可以使用java、php或者node实现，我在项目中使用的是strapi提供的接口，所以需要在strapi中自定义一个接口，然后自定义返回数据
参考官网地址：https://strapi.io/documentation/developer-docs/latest/guides/custom-data-response.html#get-the-data-back

（1）首先创建一个接口

可在文档中查看接口

在路径./api/gettoken/controller/gettoken.js下，自定义接口返回数据
添加如下代码

 const axios = require("axios");

module.exports = {
  async find(ctx){
    let url = "https://oapi.dingtalk.com/gettoken"
    let data = {
      appkey:"dinguv1oamjpzojhc0rq",
      appsecret:"0mAwW5Y0p-66xWYdqz24EAfiyB1H1NU5fN6_KjsXHbWMF-japsDKp_EgWkZrx9p0"
    }
    let response = await axios({
      method: "get",
      url: url,
      params: data 
   })
    return response.data
  }
};

参数appkey和appsecret可以在开发者后台中查看

调用接口获取数据成功

3、获取用户userid