浙政钉扫码登录（将政务钉钉登录二维码内嵌到自己页面中）

浙政钉API

在父组件中引入登录二维码组件

登录二维码组件

<template>
// 弹窗组件（用来绑定浙政钉）
     <Modal
        v-model="value"
        title="绑定浙政钉"
        @on-cancel="cancel"
        @on-ok="cancel"
        >
        // 通过两层嵌套div，隐藏了iframe返回内容的头部和底部的信息
        <div id="login_container" align="center" style="height: 260px;overflow: auto;">
            <span>手机扫码绑定</span>
            <div style="height: 200px;overflow:hidden">
                <iframe src="https://login-pro.ding.zj.gov.cn/oauth2/auth.htm?response_type=code&client_id=SOSTECH-SEA_dingoa&redirect_uri=http://59.202.53.117:20009/support/dingTalk/login&scope=get_user_info&authType=QRCODE&embedMode=true" frameborder="0" style="height:320px;margin-top:-80px" :key="timer" id="iframe"></iframe>
            </div>
        </div>
    </Modal>
    
    =========================================================================================
    
    
    // 展示iframe返回的内容
    <div id="login_container" align="center">
      <iframe src="https://login-pro.ding.zj.gov.cn/oauth2/auth.htm?response_type=code&client_id=SOSTECH-SEA_dingoa&redirect_uri=http://59.202.53.117:20009/support/dingTalk/login&scope=get_user_info&authType=QRCODE&embedMode=true" frameborder="0" style="height:320px"></iframe>
  </div>
</template>
<script>
import { bindZZD } from "@/api/system";
export default {
    data() {
        return {
            value: false,
            isSuccess: false
        }
    },
    props:{
        visible: {
            type: Boolean,
            default: false
        },
        timer: {
            type: Number,
            default: null
        }
    },
    watch:{
        visible(val){
            this.value = val
        }
    },
    mounted() {
    // vue中使用监听事件，不能使用箭头函数和匿名函数（无法移除监听），且第三个参数要为true
    // 而且使用箭头函数和匿名函数时，无法获取this
        window.addEventListener("message", this.getDingParams,true);
    },
    methods: {
        getDingParams(e){
            // 这里的event.data 就是登录成功的信息
            // 数据格式：{ "code": "aaaa", "state": "bbbb" }
            if (e.data.code){
                // 后台接口
                bindZZD(e.data.code).then(res=>{
                    if (res.success) {
                        this.$Message.success({content:res.msg,duration: 5,background: true,})
                        this.$emit('getVisible')
                    }else {
                        this.$Message.error({content:res.msg,duration: 5,background: true,})
                        this.$emit('getVisible')
                    }
                })
            }
        },
        cancel(){
            this.$emit('getVisible')
        }
    },
    beforeDestroy(){
        window.removeEventListener("message", this.getDingParams, true);
    },
}
</script>

样式： 弹窗组件

登录组件