[JavaScript知识库]Vue企业微信扫码登录

根目录下引入JS文件

企业微信官方接口文档

index.html

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

在需要使用微信登录的地方实例JS对象

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