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>