微信授权登陆nginx代理
server { listen 80; //监听的端口号 server_name wxh5.beta.hqjy.com; 本地访问的域名(host文件也要配置) location /{ proxy_pass http://wxh5.beta.hqjy.com:8080/; 代理的域名加本地项目启用的端口号->nginx服务会代理本地起的服务从而可以在wx开发者工具上调试,因为你的目的就是为了在工具调试本地的微信授权登录的流程 } location /sns{ # return 666; proxy_pass https://api.weixin.qq.com;微信公众号的域名 } # location /api/ { # proxy_pass http://10.0.99.32:8093/; # } }
host文件配置
127.0.0.1 wxh5.beta.hqjy.com
// 微信登陆 goWxLogin() { // TODO const url = encodeURIComponent(location.href.split('#')[0]); //获取#之前的当前路径 window.location.href = 'http://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+url+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect' }, mounted() { if (this.$route.query.code) { // 获取code var code = this.$route.query.code // 通过code 获取access_token&openid this.$axios.get('/sns/oauth2/access_token?appid='+this.appid+'&secret='+this.secret+'&code='+code+'&grant_type=authorization_code').then((res) => { console.log(JSON.parse(JSON.stringify(res)), '通过code 获取access_token&openid') var res = JSON.parse(JSON.stringify(res)) var access_token = res.data.access_token var openid = res.data.openid var refresh_token = res.data.refresh_token // 刷新access_token this.$axios.get('/sns/oauth2/refresh_token?appid='+this.appid+'&grant_type=refresh_token&refresh_token='+refresh_token).then((res) => { console.log(JSON.parse(JSON.stringify(res)), '刷新token延长失效时间') }) // 获取unionid this.$axios.get('/sns/userinfo?access_token='+access_token+'&openid='+openid+'&lang=zh_CN').then((res) =>{ console.log(JSON.parse(JSON.stringify(res)), '获取unionid') var res = JSON.parse(JSON.stringify(res)) // res = decodeURIComponent(encodeURIComponent(res)) //兼容微信昵称中文乱码问题 var unionid = res.data.unionid // 拿模数 this.$api.getRsaPublicKey().then(res => { if (res.code === 200) { var modulus = res.data.modulus // 拿模数和获取微信unionid登陆 const data = { clientType: 'h5', modulus: '', // 模数 unionId: '', versionCode: 1 } if (unionid) { this.$api.getWeChatLogin(data).then(res =>{ if (res.code === 200) { // 登陆成功-设置token到cookie this.$router.push({name:'textualResearch'}) } }) } } }) }) }) } },
记得线上也需要配置nginx代理,不然访问wx提供的接口肯定会报错的。
参考网站
https://blog.csdn.net/yuan_life/article/details/91820618
官方文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html