vue3 实现微信扫码授权登录 pc端

A 筱筱泽、

已于 2024-05-24 15:51:44 修改

阅读量1.8k

点赞数 5

文章标签：微信 javascript 前端 html5 vue.js

于 2024-05-24 15:48:56 首次发布

本文链接：https://blog.csdn.net/weixin_67255581/article/details/139176363

版权

一. 微信扫码登陆方式

1.外链跳转方式：（前端跳转到微信的登录页面，登录完成后微信会重定向回原网站，前端再通过 URL 参数获取授权信息，进行后续操作）；

2.网页内嵌二维码方式：（微信提供的 JS SDK，在网页中嵌入二维码组件，用户在网页上扫描二维码后，通过 JS 获取到code登录授权的相关信息。）

二.实现方式

1.外链跳转方式

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { api } from '/@/api/wechat/index.ts'
const state = reactive({
  wechat: {
    url: ''
  }
});
 
// 获取微信登录二维码
const getWechatCode = () => {
  api().then((res: any) => {
    if (res.code == 200) {
      state.wechat.url = res.data.url
    }
  });
}
 
// 页面挂载时
onMounted(() => {
  getWechatCode();
});

2.网页内嵌二维码方式

 <div id="ER_code"></div>  // 二维码容器

const wechatLogin = async () => {
  await nextTick();
    new WxLogin({
      self_redirect: false,
      id: "ER_code",
      appid: "wx1a1ddfe11f25528a",
      scope: "snsapi_login",
      // production(生产环境) -- development（开发环境）
      redirect_uri: encodeURIComponent( process.env.NODE_ENV === 'production' ? "http://192.168.1.199:5234/api/Login" :"http://localhost:5173/login"), // 编码重定向地址
      state: Math.ceil(Math.random() * 1000),
      style: "",
      href: "data:text/css;base64,LndlYl9xcmNvZGVfdHlwZV9pZnJhbWUge3Bvc2l0aW9uOiBhYnNvbHV0ZTtsZWZ0OiAxNiU7Ym90dG9tOiAtOCU7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjUwcHg7fQouaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ=="
    });
};
if (code) { 
  const ER_code = () => {
    const data = new URLSearchParams({
      code: code,
      state:state,
    });
    weixinER_code(data).then((res) => {
      console.log(res);
      localStorage.setItem('access_token', res.token)   
      useUser_Store.menu_tab = '/home';
      router.push('/home');
   
    })
  }
  ER_code()
}
onMounted(() => {
  wechatLogin();
 
});

此处href转换为base64，转换网站https://tool.oschina.net/encrypt?type=3

// 从 URL 中获取参数
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
// 获取 code 和 state 参数的值
const code = urlParams.get('code');
const state = urlParams.get('state');
// 打印参数值
console.log('code:', code);
console.log('state:', state);

三.其他

<script type='text/javascript' src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> // index.html页里

四.总结

1.外链跳转方式：对于前端相对简单，但需要跳转页面；

2.内嵌二维码方式：前端需要调用微信sdk显示二维码（博主暂未解决href改变样式后不能自适应的问题），但不需要跳转页面，二维码显示较慢；