Vue企业微信扫码登录

企业微信官方接口文档

    <script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.5.js"></script> 

  new WwLogin({ 
             id: "QRcode_Area",    ///企业页面显示二维码DOM id     appid: '',           //企业微信CorpID，查看企业微信管理端     agentid: '',         /////授权方的网页应用ID，查看具体的网页应用程序     redirect_uri: '',     ///需要重定向地址UrlEncode     state: "",            ///用于保持请求和回调的状态，授权请求后带回企业。该参数可用于防止csrf攻击(跨站要求伪造攻击)，建议企业将参数设置为简单的随机数session进行校验     href: "",     lang: "zh",   }); 

<template>   <div class="loginBack">     <div class="company">       <div class="" @click="checkQrCode(true)">         <span class="icon_common company_selected_icon" v-if="isSzkj">/span></span> <span class="icon_common company_selecte_icon" v-else></span> <p :class="isSzkj ? 'company_selected_text' : ''">公司A</p> </div> <div class="" @click="checkQrCode(false)"> <span class="icon_common company_selected_icon" v-if="!isSzkj"></span> <span class="icon_common company_selecte_icon" v-else></span> <p :class="!isSzkj ? 'company_selected_text' : ''">公司B</p> </div> </div> <!-- 二维码展示区域 --> <div class="loginCode" id="QRcode_Area"></div> </div> </template> <script lang="ts" setup> import { 
            ref, PropType } from "vue"; interface IredirectUri { 
            URL1?: String; URL2?: String; URL3?: String; } const props = defineProps({ 
            appid: { 
            type: String, default: "", }, agentid: { 
            type: String, default: "", }, redirect_uri: { 
            type: Object as PropType<IredirectUri>, default: () => { 
            return { 
           }; }, }, href: { 
            type: String, default: "", }, state: { 
            type: String, default: "", }, lang: { 
            type: String, default: "zh", }, }); const isSzkj = ref<Boolean>(true); const checkQrCode = (val: Boolean) => { 
            isSzkj.value = val; new WwLogin({ 
            id: "QRcode_Area", appid: props.appid, agentid: props.agentid, redirect_uri: isSzkj.value ? "http://boriska.top:6666" : "http://boriska.top:1996", state: "", href: "data:text/css;base64,...", lang: "zh", }); }; </script> <style lang="less" scoped> .loginBack { 
            width: 354px; height: 429px; display: flex; flex-direction: column; align-items: center; } .loginCode { 
            width: 300px; height: 300px; } .company_selected_icon { 
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAD/UlEQVRIDdVVW2icRRT+5szsJSZpsgkhMVVyIdXaC22tqQ9e+qCoxEIpNkUUWvqgLSgUUkSNUFdqYkFtvVS00qK+FJtiUVS8xEstRWi0tiLRtuRilBLJbXeTTbL778wcZxObpD8LTemTAz//nDnfd86cM+fMAP/3IXIGEOWwoqHbLatGFnyPEKhyOMtMXULwN5bpCBYv+AWbhMnJn7N4uYNob1iqog2G1ZOQqh7WaLBJwFoPcFCBMFSoEDoTAOE7acxrhiPfIiqcPveYdRCNFSMgm8Hc5L4Jt+FPpJBfSsqczi8t7bcmQZND9gYDrjdE60DB+xzOwfQL6C56E++LVC4X0w72/p1HE4X7baBgC7yxH2G4GdGSk7kIU2vR75UUK+43JPa4iJaQTbfYvuLdeFdk/ByBKBNRoskGw3ug05+B6DE0Fw76gTnllxJ10PQBlFotvcmt5vnIhy6PLqzZQdCJKitphzPeA51qmrfxrI1ni7rA403urJIubU9h72hk1vT0jCjEm0GhSjLmdUTLe/yAK8q7Kk5RxnsPgdBKjNo7/Xhy5/QQ9OS4VfjBr5yvbEHtYHJBoN7PISFEHdiOo0j1+5XzliX1STNy1lWV9HMUs3UHSgUYCxQ65bAfMB952a21i7Qq78wkay90+wgkmNshg4VSZ1b6dPMXQyOP5kU6NxQUf7p+9c8IzCWSVeINgOOugXaidaxsrnI+cz6JpWskLuoMfnf1udaLY+1cHiHTf45MytVy+DZo/QwO8HVzAbnmrjAEn0IN/4qHEaQnGlP2SDqN7bB4jgQeqPmooQov8sIsd7qTX4lVCS9wkEVgFTITbyOWbMW+GydzGc+u8Rk0QGKnY1cjjVcxgEOiAenadhTloXJ515n2R9JeVY0kfWjagSOFdg8sSovQ51MXmy1eg9BoJZCJIL/0PEaQROdRgVV3lcCryOd18mlE7OOII4YSLBM1+GdmM62DN0HLswgvCEov+bW6pEibsl4hEzFmTpMc3mq12gFWhUjEBgSJBJbfS2xVMcT4UNvFjQc3BdoWYpgu6Hfszc7Gfw5YkIltthRKwpv4yWi9byYCvMz5YjL+B0tVBqNjrkFOgGycrVjqklIKSOsyPyAs/1Yt+vd3P7gkPv4FKPwnWtw70adStq1icW9kECVbLInDLvvn4P2VmHUQ5QJB8eNCBXus9t5CQXEHRsHId9keHKKpSK2xKJg0iFanL11qvF3dYYz+ynWxd17VHb4leHoXihbE3Rths5xZB1mpJVmOYDKJjvIUjl75tcpSuBFBHREdKsArjBYn1AG+rEyzmGseehs26m3U6/7r/cZmDtmvuBpZXo9jwN0fA8en0nI13GvG/gvpHqUmHTmj3AAAAABJRU5ErkJggg==); } .company_selecte_icon { 
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAADhUlEQVRIDdWVXUiTYRTHt3cfTlKalaQWqKQFWmRECTEnMqkhiYjlRYHhRXkjRHoRGIERhjfRh30gJNJNlHdBQbaZOCV0UQRRlkRSoJMZueFmc+6j3zPaePciNvGqBw7nPOf8zznPOc95n1el+t+XerUChoeHDRqNplytVp+ELGDyo9FoBP4VsofD4Sdut/tdY2NjeDV/uS4pgQis1WrrAbQS+BA8RGAvPCic0Blgmeh0yK+Qb87Ozg6RKGYXGOVKJCC4UafTdeDchvMSwKec9EUkEnkbCoVcBoNBQt4pSZJIfBw6KoKBvwKup6qqKiD2yhVLMDAwkJ6bm3sH4xmCv4Z3mEymMSU4vucwWlp4jGTd6EpI3DU5OXm1paVlJY6Jc3VnZ6dUXV3dxkm6Cf4M8Fmz2TwfB6zFSVRESx+COQg1V1RUPIZH5T7qkZGRQk7iQPkbsgL6Jgf8Sx4dHRXD8BzcD5/PV221Wn/JfYgtNQHIQ3lrvcFFIHwmqLofsSw9Pd0kdPIlEbwBhZ+LHJEb1iPTXhsU5rBiAJKWxK4Io59JcCVZ1rHB9zsHfU8cjdJNQjmPUc9UZCqNqe4Z72La9BH8lNJHVGCDMklQpjSuY3+a9tRz0Lre3l6d3E9UcBvyYGx3OBzZcmMq8tjYWCm4GWJ8gleWlJRUyv3UfGT6nJycLhK0Yrjn8Xgu19bWii95rSXGuwCfck5uZkD66UCQJEfQ7QoGgz04hywWy0zsSx4aGsrX6/UPMB4AdN/lcl3jfRHfxaqL4DUEbAdbAOD64uJiX01NzbLNZtvMqO5DdwpbIdQXSyCi4FTMacQHE6SKwxkZGXkkzFpaWvridDp9lK6m0i1MzCYu9SK4c9DCysrKXt6hOeTY4sPbjZ+YKD2Kl9q/ehVTME2CBYzLRqOxGf15KJPl5inx4iAGwsjT8BOsqHYH+ykq2QOPJxAHbgLrw/4GfiORgL6l4ZyLUlx0EQAHsge5FL4NHkHnRv4ATbAfxEdKS0vr4qLNyAO0OQv9Vu6kgcN+npub8yYSYBTZ3dA4Ae5yD87s7OwojppAICBOr+LJjoAL05JltrFHjckTz8QgbbuA3yO/339pfHzcwyMqflCqxB2Ijd1u306PfV6vN5DK30r4iCnkqXdS3X62Dp75pDEVmA0vqjhBm6bhdcpgSRUojanuaU0iDpXEWpeq74ZxfwDvOKD+yttkDgAAAABJRU5ErkJggg==); } .company { 
            display: flex; width: 280px; justify-content: space-around; } .icon_common { 
            width: 24px; height: 24px; display: inline-block; } .company_selected_text { 
            color: #247cea; } .company_selecte_text { 
            color: #000000; } </style>