vue中，使用手机钉钉扫描二维码登录

最新项目要做一个，使用手机钉钉扫描二维码登录pc系统的功能，手机扫码二维码后，会弹出一个确定登录的页面，点击确定之后，pc端就会登录进去

 

第一步：查看钉钉开发平台

钉钉开发平台（钉钉官网）

从官网中了解到：

使用钉钉js-api提供的获取免登授权码接口获取CODE，此jsapi无需鉴权

然后通过CODE，获取用户身份信息

 

第二步：pc页面

npm install v-qrcode --save

并在页面中注册引入    

其中  qrcode是二维码内容，在data中定义，

调用后端接口，获取钉钉登录二维码，此二维码含有唯一标识uuid，通过截取可获取到该uuid

export default {
  name: 'login',
  data () {
    return {
      qrcode: '',
      uuid: '',
      scanOK: false // 等待扫描结果
    }
  },
  created () {
    this._getQrcode()
  },
  methods: {
    // 获取钉钉登录二维码
    _getQrcode () {
      getQrcode().then(res => {
        this.qrcode = res.data.data.url
        this.uuid = this.qrcode.substring(this.qrcode.indexOf('=') + 1)
        this._login()
      })
    },
    // 钉钉扫码登录
    _login () {
      if (this.scanOK) return
      login(this.uuid).then(res => {
        if (res.data.errcode === 0) {
          this.successLogin(res.data.data)
          this.scanOK = true
        } else if (res.data.errcode === 70002) {
          setTimeout(() => {
            this._login()
          }, 2500)
        }
      })
    },
    successLogin (user) {
      sessionStorage.setItem('$user', JSON.stringify(user))
      setTimeout(() => {
        this.$router.push('/data-show')
      }, 500)
    }
  },
  components: {
    Qrcode
  }
}

　　

　

第三步：H5页面

让后端进行配一下，然后前端手机扫码后，会跳转到一个登陆页面

跟该项目的index.html同级建一个dingding.html页面，此页面就是钉钉扫码后的跳转页面，

 

页面样式自己写，引入dingtalk的JS文件

 

第四步：发送ajax请求

dingding.html页面有一个确定按钮，点击发送ajax请求，代码如下：

 

      确认登录
 

　　

 

转载于:https://www.cnblogs.com/wangdashi/p/9721404.html