vue 钉钉扫码登陆 / 钉钉二维码登陆

 

<template>
    <div id="app">
        <div id="login_container"></div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: 'App',
        components: {},
        data() {
            return {
                appid: '<钉钉应用APPID>',
                redirectUrl: '<扫码跳转URL(使用当前URL,我们会处理跳转后回调URL的CODE)>',
                apiUrl: '<用户信息接口,把redirectUrl回调获取的CODE给后端用于获取扫码用户信息>',
                dingCodeConfig: {
                    id: 'login_container',
                    style: "border:none;background-color:#FFFFFF;",
                    width: "365",
                    height: "400"
                }
            }
        },
        computed: {
            getRedirectUrl() {
                return encodeURIComponent(this.redirectUrl)
            },
            getAuthUrl() {
                return `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.getRedirectUrl}`
            },
            getGoto() {
                return encodeURIComponent(this.getAuthUrl)
            },
            getDingCodeConfig() {
                return {...this.dingCodeConfig, goto: this.getGoto}
            }
        },
        created() {
            this.initDingJs()
        },
        mounted() {
            this.addDingListener()
            this.initDingLogin()
            this.getUser()
        },
        methods: {
            initDingJs() {
                !function (window, document) {

                    function d(a) {
                        var e, c = document.createElement("iframe"),
                            d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto;
                        d += a.style ? "&style=" + encodeURIComponent(a.style) : "",
                            d += a.href ? "&href=" + a.href : "",
                            c.src = d,
                            c.frameBorder = "0",
                            c.allowTransparency = "true",
                            c.scrolling = "no",
                            c.width = a.width ? a.width + 'px' : "365px",
                            c.height = a.height ? a.height + 'px' : "400px",
                            e = document.getElementById(a.id),
                            e.innerHTML = "",
                            e.appendChild(c)
                    }

                    window.DDLogin = d

                }(window, document);
            },
            addDingListener() {

                let self = this

                let handleLoginTmpCode = function (loginTmpCode) {
                    window.location.href = self.getAuthUrl + `&loginTmpCode=${loginTmpCode}`
                }

                let handleMessage = function (event) {
                    if (event.origin == "https://login.dingtalk.com") {
                        handleLoginTmpCode(event.data)
                    }
                }

                if (typeof window.addEventListener != 'undefined') {
                    window.addEventListener('message', handleMessage, false)
                } else if (typeof window.attachEvent != 'undefined') {
                    window.attachEvent('onmessage', handleMessage)
                }

            },
            initDingLogin() {
                window.DDLogin(this.getDingCodeConfig);
            },
            getUser() {

                let getQueryString = function (name) {
                    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
                    var r = window.location.search.substr(1).match(reg)
                    if (r != null) {
                        return unescape(r[2])
                    }
                    return null
                }

                let code = getQueryString('code')

                if (code !== null) {
                    axios
                        .get(`${this.apiUrl}?code=${code}`)
                        .then(response => {
                            console.log(response)
                        })
                        .catch(error => {
                            console.log(error)
                        })
                }
            }

        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>