Vue2实现钉钉登录

1.在根目录下创建一个.env文件来存储环境变量，其中包括钉钉应用的corpId和redirectUri。在这里，你需要将YOUR_CORP_ID和YOUR_REDIRECT_URI替换成你自己的值：

VUE_APP_DINGTALK_CORP_ID=YOUR_CORP_ID
VUE_APP_DINGTALK_REDIRECT_URI=YOUR_REDIRECT_UR

2.创建一个Login.vue组件来处理钉钉登录逻辑：

<template>
  <div class="login-container">
    <van-button type="primary" @click="login">钉钉登录</van-button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      const corpId = process.env.VUE_APP_DINGTALK_CORP_ID;
      const redirectUri = process.env.VUE_APP_DINGTALK_REDIRECT_URI;

      // 生成授权链接
      const authUrl = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${corpId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${encodeURIComponent(redirectUri)}`;

      // 打开钉钉授权页面
      window.location.href = authUrl;
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

3.修改App.vue组件来使用Login.vue：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

4.创建一个Callback.vue组件来处理钉钉登录回调并获取用户信息

<template>
  <div class="callback-container">
    <h1>登录成功</h1>
    <p>用户ID：{{ userId }}</p>
    <p>用户名：{{ userName }}</p>
    <p>头像：<img :src="avatar" alt="avatar"></p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userId: '',
      userName: '',
      avatar: '',
    };
  },
  mounted() {
    const code = this.$route.query.code;

    // 发送请求获取access_token
    axios.get(`https://oapi.dingtalk.com/sns/gettoken?appid=${process.env.VUE_APP_DINGTALK_CORP_ID}&appsecret=${process.env.VUE_APP_DINGTALK_APP_SECRET}`)
      .then(response => {
        const accessToken = response.data.access_token;

        // 使用access_token和code换取用户信息
        axios.get(`https://oapi.dingtalk.com/sns/getuserinfo_bycode?access_token=${accessToken}&code=${code}`)
          .then(response => {
            this.userId = response.data.user_info.userid;
            this.userName = response.data.user_info.nick;
            this.avatar = response.data.user_info.avatar;
          })
          .catch(error => {
            console.error('获取用户信息失败', error);
          });
      })
      .catch(error => {
        console.error('获取access_token失败', error);
      });
  },
};
</script>

<style scoped>
.callback-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

5.在router.js中配置路由：

import Vue from 'vue';
import Router from 'vue-router';

import Login from './components/Login.vue';
import Callback from './components/Callback.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
    {
      path: '/callback',
      name: 'callback',
      component: Callback,
    },
  ],
});

6.修改main.js文件来引入路由配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import { Button, Notify } from 'vant';

Vue.use(Button);
Vue.use(Notify);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

可以通过访问http://localhost:8080来查看登录页面。点击"钉钉登录"按钮后，将会跳转到钉钉授权页面，完成授权并返回回调页。在回调页上，你将看到登录成功的提示以及用户的基本信息。

请确保替换YOUR_CORP_ID和YOUR_REDIRECT_URI为你的实际值，同时确保你在钉钉开放平台中设置了正确的回调URL和权限。