实现钉钉扫码登陆

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

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

2、添加接口权限

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

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

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

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

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

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

6、实现登录第三方网站,我是使用钉钉提供的页面进行登录授权的,根据钉钉提供的第三方网站访问地址来登录。
https://login.dingtalk.com/oauth2/auth?
redirect_uri=https%3A%2F%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=http%3A%2F%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/#/'
          }
        })
      }
    }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值