实现钉钉扫码登陆

最新推荐文章于 2025-07-03 21:34:10 发布

网络部-陈泽宇

最新推荐文章于 2025-07-03 21:34:10 发布

阅读量985

点赞数 5

CC 4.0 BY-SA版权

文章标签：钉钉

本文链接：https://blog.csdn.net/weixin_60941411/article/details/139547722

在钉钉开放平台查看：实现登录第三方网站 - 钉钉开放平台

1、在开发者后台创建应用，创建完应用之后，拿到应用的AppKey和AppSecret。

2、添加接口权限

3、配置frp内网穿透：（当第四步使用回调域名的重定向地址时，这一步可以省略）

使用frp内网穿透工具生成一个公网域名用于教程测试

内网穿透：让内网或私有网络的服务能够被公网访问

FRP：帮助内网中的服务通过公网服务器进行转发，实现内网穿透。

4、在应用中的分享设置中，通过设置第三方网站的回调域名，设置一下重定向的地址

5、官网上说是搭建后端服务，我前端就没看，忽略

6、实现登录第三方网站，我是使用钉钉提供的页面进行登录授权的，根据钉钉提供的第三方网站访问地址来登录。

https://login.dingtalk.com/oauth2/auth?
redirect_uri=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.aaaaa.com%2Fauth
&response_type=code        //固定值为code,授权通过后返回authCode
&client_id=dingxxxxxxx   //应用的AppKey 
&scope=openid   //此处的openId保持不变,授权后可获得用户userid
&state=dddd
&prompt=consent

代码实现：

实现思路：1、设置根据钉钉提供的第三方网站访问地址定义的重定向地址，得到浏览器网址，

2、然后获取地址栏的参数authcode，然后把authcode作为参数调用后端接口，从而获取数据res，

3、并且把数据存储在localstorage中。

1、首先根据钉钉提供的第三方网站访问地址，设置重定向的地址，（这部分是钉钉提供的固定部分）。得到浏览器网址，并且赋值给浏览器

//获取要重定向的地址
redirectToDingTalk() {
      var redirectUrl =
        'https://login.dingtalk.com/oauth2/challenge.htm?                
         redirect_uri=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttp%2F127.0.0.1%3A8080%2F%23%2F
         &response_type=code
         &client_id=dinglyjekzn80ebnlyge
         &scope=openid
         &state=dddd
         &prompt=consent'
//在浏览器中进行页面重定向
      window.location.href = redirectUrl
    },

2、定义一个获取地址栏参数的方法，用于拿到调用接口所需要的数据authCode

    // 获取地址栏参数
    getUrlParam(name) {
      var temp = window.location.href.split('?')[1]
      var pram = new URLSearchParams('?' + temp)
      return pram.get(name)
    },

3、给定一个按钮，绑定点击事件scanLogin（）

// 扫码登陆
    scanLogin() {
      //获取充定向的地址
      this.redirectToDingTalk();

      // 获取地址栏参数
      let authCode = this.getUrlParam('authCode')
      if (authCode) {
        // 调用跳转接口
        reqRedirect(authCode).then((res) => {
          if (res.code == 0) {
            console.log(res, '扫码登陆')
            localStorage.setItem('authCode', authCode)
            localStorage.setItem('name', res.data.name)
            //把token也进行存储
            localStorage.setItem('token',res.data.auth_token)
            this.$router.push('/home/robotManage')
          } else {
            window.location.href = 'http://localhost:8080/#/'
          }
        })
      }
    }