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文件

<script src="http://g.alicdn.com/ilw/cdnjs/zepto/1.1.6/zepto.min.js"></script>
<script src="https://g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js"></script>

 

第四步:发送ajax请求

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

 <div id="loginBtn" class="t-button">
      <span>确认登录</span>
 </div>

  

<script>
        var CORPID = '企业ID'
        var loginBtn = document.getElementById('loginBtn')
        var url = window.location.href
        var uuid = url.substring(url.indexOf('=') + 1)
        var code = ''

        dd.ready(function () {
            dd.runtime.permission.requestAuthCode({
                corpId: CORPID,
                onSuccess: function (result) {
                    code = result.code      //获取到免登码CODE
                },
                onFail: function (err) {
                    alert(JSON.stringify(err))
                }
            })
        })

        function confirm (code, uuid) {
            $.ajax({
                async: false,
                url: '/api/auth/token',
                type: 'GET',
                data: {
                    code:code,
                    uuid:uuid
                },
                success: function (res) {
                    window.location.href = '跳转地址'     //成功后手机跳转的页面,pc端进入你设置的跳转页面
                },
                error: function (xhr, errorType, error) {

                }
            })
        }

        loginBtn.addEventListener('click', function () {
            confirm(code, uuid)
        })
    </script>

 

posted @ 2018-09-28 22:57  王大师  阅读(9297)  评论(0编辑  收藏  举报