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

Posted 2021-01-09 wangdashi

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

 

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

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

从官网中了解到：

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

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

 

第二步：pc页面

npm install v-qrcode --save

并在页面中注册引入    

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

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

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.waitSCan()
                })
            },
            //钉钉扫码登录
            waitSCan () {
                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 === 40083){
                        setTimeout( () =>{
                            this.waitSCan()
                        },2500)
                    }
                })
            },
            successLogin(user){
                bus.$emit(‘user‘, true)
                localStorage.setItem(‘$user‘, JSON.stringify(user))
                setTimeout(() => {
                    this.$router.push(‘/book‘)
                }, 500)
            }
        },
        components: {
            Qrcode
        }

　

第三步：H5页面

手机扫码后，会跳转到一个登陆页面

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

引入

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

 

并把该dingding.html写入到 build的 webpack.dev.conf.js 和 webpack.prod.conf.js  中

 

第四步：发送ajax请求

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

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

　　

<script>
        var CORPID = ‘ding1084a57cdb71d21335c2f4657eb6378f‘
        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 = ‘http://www.ibook.tech‘     //成功后手机跳转的页面，pc端进入你设置的跳转页面
                },
                error: function (xhr, errorType, error) {

                }
            })
        }

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