vue3+vite(4.3.9) 实现web网站微信扫码授权登录--内嵌

小牛学前端

已于 2024-12-25 15:57:25 修改

阅读量1.1k

点赞数 4

文章标签：微信前端 anti-design-vue

于 2024-06-21 10:58:34 首次发布

本文链接：https://blog.csdn.net/aidhdjdi/article/details/139853568

版权

首先具体流程如下：

1. 需要在自己的页面上生成微信的二维码（如何生成？）

2. 微信扫码授权后，会在页面地址上返回一个code（如何拿到，并一直在当前的页面？）

3. 拿到以后就可以去调用后端的接口，并把code 传过去，后端就会根据code 去调用微信官方的接口去换取微信用户信息。

前提条件：需要去微信开放平台-网站应用（创建网站应用并通过），资质认证也需要通过哦~

微信开放平台地址：微信开放平台

废话不多说，流程解析开始：

1.需要在自己的页面上生成微信的二维码（如何生成？）

首先我这边的话，为了方便后续的操作，我这里是把生成微信二维码封装成了组件

appid：开放平台中申请的网站应用的appid

redirect_uri：授权后返回的地址（使用的域名必须要和授权回调域里面填写的域名一致才可以，或者可以尝试模拟微信公众号的重定向操作）

href：必须使用base64格式（当前代码样式为：宽200px;高200px）

<template>
  <!-- 微信登录二维码 -->
  <div class="header">
    <div id="weiXin"></div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted } from 'vue';
  import Config from '@/settings';

  const props = defineProps({
    permission: {
      type: String, //类型字符串
      default: () => {
        return '';
      },
    },
  });

  onMounted(() => {
    shows();
  });

  const WxLogin = function (e: any) {
    let r = 'default';
    !0 === e.self_redirect ? (r = 'true') : !1 === e.self_redirect && (r = 'false');
    let n = document.createElement('iframe') as any;
    let i =
      'https://open.weixin.qq.com/connect/qrconnect?appid=' +
      e.appid +
      '&scope=' +
      e.scope +
      '&redirect_uri=' +
      e.redirect_uri +
      '&state=' +
      e.state +
      '&login_type=jssdk&self_redirect=' +
      r +
      '&styletype=' +
      (e.styletype || '') +
      '&sizetype=' +
      (e.sizetype || '') +
      '&bgcolor=' +
      (e.bgcolor || '') +
      '&rst=' +
      (e.rst || '');
    (i += e.style ? '&style=' + e.style : ''),
      (i += e.href ? '&href=' + e.href : ''),
      (i += 'en' === e.lang ? '&lang=en' : ''),
      (n.src = i),
      (n.frameBorder = '0'),
      (n.allowTransparency = 'true'),
      (n.sandbox = 'allow-scripts allow-top-navigation allow-same-origin'),
      (n.scrolling = 'no'),
      (n.width = '300px'),
      (n.height = '400px');
    let s = document.getElementById(e.id) as any;
    (s.innerHTML = ''), s.appendChild(n);
  };

  const shows = () => {
    // 'http://xingchi-trade.liangpiao.net.cn/#/weixinLogin'

    // 父页面传过来的参数
    const DDNSResolution = encodeURIComponent(props.permission);

    var obj = new WxLogin({
      self_redirect: false,
      id: 'weiXin',
      appid: Config.data.appIdWei,
      scope: 'snsapi_login',
      redirect_uri: DDNSResolution,
      state: Math.random(), //建议使用时间戳+随机数，具体看你
      style: 'black', // 提供"black"、"white"可选。二维码的样式
      href: 'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZS5saWdodEJvcmRlciB7DQogICAgd2lkdGg6IDIwMHB4Ow0KfQ==',
    });

    // console.log(obj);
  };
</script>
<style lang="scss" scoped>
  .header {
    width: 100%;
    display: flex;
    justify-content: center;
  }
</style>

把封装好的组件直接引入到自己想展示的地方，再把需要的数据赋值就会正常显示如下图：

2. 微信扫码授权后，会在页面地址上返回一个code（如何拿到，并一直在当前的页面？）

首先，我的思路是这样的

（1）微信开放平台的微信回调域，填写必须是域名，不能是ip地址。所以会引发一个问题：测试的时候需要发布到服务器上才可以测试这个功能。（除非会把本地ip 转为代理域名，这样就可以在本地进行测试）

（2）可以自己在项目中随便创建一个vue文件，写到自己的router里面（如果是登录之前，进行操作，则需要将该文件的路由，放到自己的路由白名单中。如果是账号密码登录后，则可放可不放），并在路由全局前置守卫中，加一下判断，如果要跳入到该文件页面时，则将code 取下，并存入store中，然后让其再next() 到显示二维码的页面。

如下图：

至于白名单就需要看各位小伙伴自己的逻辑是怎么写的了

NProgress.start(); 不需要管