webpc端 微信授权登陆 实例详解

mac2025-02-09  17

首先,看看微信官方文档,了解一下具体实现步骤

微信官方文档: 微信登陆开发指南

基本了解了微信登陆的流程后,然后我们再来一起踩坑

1、先去微信公众平台申请网站,appId,设置域名 2、调用微信地址生成二维码

// 微信登陆 usewxlogin() { let appId = 'wx515d8d1893f1e1f5' //公众号平台提供的appId let redirectURI = 'http://www.zdindin.com/' //扫码后回调地址 window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=' + redirectURI + '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect' },

值得注意的是,此时本地联通,但是域名只能是线上域名,而且,微信公众号平台,后台开发的回调地址都要统一,不然微信回调地址会报错,此时我们本地可以直接写线上地址。调试的时候,可以先在本地发起扫码,扫完码后,看看回调地址是不是线上你想要,就能实现困扰我很久的本地联通问题。

3、扫码后回调成功会返回带code的线上地址

例如我扫码后的回调:http://www.zdindin.com/?code=021IzkJJ0vzMX92lx7JJ0I15JJ0IzkJ6&state=STATE#/user/accountInfo

4、此时需要接受code,再把code传给后台获取token

// 封装个公用方法,截取浏览器参数 const getUrlKey = (name) =>{ return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null } export default { getUrlKey: getUrlKey } //调用方法截取code import indexApi from '@/assets/api/index.js' //引入封装的api import common from '@/assets/js/common.js' //引入公用方法 created() { // 微信授权登陆 let code = common.getUrlKey('code') if (code) { indexApi.weixinGoIndex(code).then(res => { if (res && res.code == 0) { localStorage.setItem('token', res.data.token) } }) } },

如此,微信pc端扫码授权登陆就完成了。

最新回复(0)