钉钉跳转vue网页(实现免登录)

.首先新建个文件夹下载调试工具(此工具其实是个vue项目)
安装教程
ps:教程第四步 直接进行下面操作 地址是你vue 启动地址(这个地址需要和你企业微应用首页地址一致,你项目中请用‘/’重定向到首页)

ding dev web --targetH5Url http://127.0.0.1:3000    

2.你的项目引入 dingtalk

npm install dingtalk-jsapi    

首页逻辑流程如下

<script>
import * as dd from "dingtalk-jsapi";
export default {
  data() {
    return {
      year: "",
    };
  },

  methods: {
    //获取getCode
    getCode() {
        //有token时不调用登录
       if (this.$store.state.token) {
          return
       }
      let corpId = "xxxxxxxxxxxxxxxxxxxxxxx";  //后端提供
      console.log(dd.env.platform);
      if (dd.env.platform !== "notInDingTalk") {
        dd.ready(() => {
          //使用SDK 获取免登授权码
          dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: (info) => {
            //获取登录所需信息
              this.$request(
                this.$Api.loginDingDing,
                { authCode: info.code },
                "get"
              ).then((res) => {
                if (res.code == 0) {
                  this.$request(this.$Api.login, {username:res.result.name,password:'xxxx'}, "post")
                    .then((res) => {
                      if (res.code == 200) {
                        sessionStorage.setItem("token", res.token);
                        this.$store.commit("setToken", res.token);
                        Toast("登录成功");
                        this.$router.push("/Home");
                      } else {
                        this.$toast(res.msg);
                      }
                    })
                    .catch((e) => {
                      console.log(e);
                    });
                }
              });
            },
            onFail: (err) => {
              alert("fail");
              alert(JSON.stringify(err));
            },
          });
        });
      }
    },
  },

  created() {
    this.getCode();
  },
};
</script>

3.在调试工具项目中登录钉钉,开始调试。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
实现钉钉扫描二维码登录,需要进行以下步骤: 1. 在钉钉开放平台注册应用,并获取到应用的 `AppId` 和 `AppSecret`。 2. 在前端页面上实现钉钉扫描二维码的功能,可以使用钉钉提供的 `DingTalkPC.runtime.permission.requestAuthCode` 方法,该方法会弹出钉钉扫描二维码的界面,用户扫描二维码后会返回一个 `code` 值。 3. 前端将 `code` 值发送到后端,后端拿到 `code` 值以及 `AppId` 和 `AppSecret`,调用钉钉开放平台提供的接口获取用户的身份信息。 4. 后端将获取到的用户身份信息返回给前端,前端根据身份信息进行相应的页面跳转或者其他操作。 下面是一个简单的实现示例: 前端代码: ``` html <!-- 钉钉扫描二维码的按钮 --> <button @click="requestAuthCode">钉钉扫描二维码登录</button> <script> export default { methods: { requestAuthCode() { // 调用DingTalkPC.runtime.permission.requestAuthCode方法 DingTalkPC.runtime.permission.requestAuthCode({ corpId: '钉钉应用的CorpId', onSuccess: function(result) { // result.code为获取到的code值 // 将code值发送到后端进行身份验证 }, onFail: function(err) { console.log(err) } }); } } } </script> ``` 后端代码: ``` javascript const axios = require('axios'); // 获取用户身份信息的接口 const API_URL = 'https://oapi.dingtalk.com/sns/getuserinfo_bycode'; async function getUserInfo(code, appId, appSecret) { const url = `${API_URL}?accessKey=${appId}&accessSecret=${appSecret}&code=${code}`; const response = await axios.get(url); return response.data; } // 在路由中处理钉钉扫描二维码的请求 app.get('/dingtalk/login', async (req, res) => { const { code } = req.query; const appId = '你的应用AppId'; const appSecret = '你的应用AppSecret'; try { const userInfo = await getUserInfo(code, appId, appSecret); // 将获取到的用户身份信息返回给前端 res.send(userInfo); } catch (err) { console.log(err); res.status(500).send('获取用户信息失败'); } }); ``` 需要注意的是,以上代码仅为参考示例,实际应用中还需要考虑一些安全性和错误处理的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值