微信网页授权获取用户信息（测试号方法）

申请测试号

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

1. 填写授权回调域名

体验接口权限表—网页服务—网页账号—网页授权获取用户基本信息—填写授权回调域名[172.17.0.157:8080]

2.在测试号中取得appid和appsecret

3.扫码关注测试号

配置信息

在static目录下新建一个config.js文件，把appid，appsecret和授权回调域名添加到window对象中，这样可以全局使用

//appid和appsecret
const APP_ID = 'wx1b46c753363978f7';
const APP_SECRET = '86948bcc3a86c2db59e9fc1d329583d0';
//授权回调域名
const DO_MAIN = '172.17.0.157:8080'

window.APP_ID = APP_ID;
window.APP_SECRET = APP_SECRET;
window.DO_MAIN = DO_MAIN;

第一次登录通过微信接口获取code

//获得code
			getCode() {
				var principalId = this.getUrlCode('principalId')
				//填写授权回调域名
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + window.APP_ID +
					'&redirect_uri=' + encodeURIComponent("http://" + window.DO_MAIN + "/#/pages/index/index") +
					'&response_type=code&scope=snsapi_userinfo&state=' + principalId + '#wechat_redirect'
			},

//截取url中指定的字段
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
					.replace(/\+/g, '%20')) || null
			}

由于我的项目要必须携带一个principalId字段，所以把principalId存到state字段里面，微信会通过拼接字符串的方式把code，state拼接到授权回调域名里。

非第一次登录

由于第一次登录后会记录openid，所以第二次登陆就不需要获取code，直接跳转到主页即可

window.location.href = "http://" + window.DO_MAIN + "/#/pages/index/index?state=" + principalId

获取用户信息

跳转到主页之后，如果code为空或者缓存中openid不为空，那么就说明是第二种状况：该页面没有通过微信授权回调跳转

直接通过openid请求用户信息

if(code==null || uni.getStorageSync("openid").length!=0){
					var data1 ={
						"openId":uni.getStorageSync("openid")
					}
					API.loginWithOpenId(data1).then(res=>{
						if(res.data.data == null){
							uni.showToast({
								title:"微信授权失败，请重新打开网页！",
								icon:"none",
								duration:1500
							})
							return
						}
						this.username = res.data.data.username
						this.openid = res.data.data.userUniqueId
						this.data = this.openid
					})

如果code不为空，那么就说明是第一种情况，该页面是由微信授权回调域名跳转的，也就是第一次登录

var data2 = {
					"code":code
				    }
				// this.data = data2
				API.loginWithCode(data2).then(res=>{
					if(res.data.data == null){
						uni.showToast({
							title:"微信授权失败，请重新打开网页！！",
							icon:"none",
							duration:1500
						})
						
						return
					}
					this.data = res.data
					//把openid和username存起来
					this.openid = res.data.data.userUniqueId
					// alert(this.openid)
					uni.setStorageSync("openid",this.openid)
					this.username = res.data.data.username
					 uni.setStorageSync("username",this.username)
					 this.data = this.openid
				})

后端接口设计

接口1：通过code获取用户信息

前端发送code给后端，后端通过微信接口获取openid和accessToken，再通过openid和accessToken获取用户详细信息

//获取微信用户信息第一次
	loginWithCode:(data = {}) => {
		return $http("isp-cloud-system/third/wechat/mp/login", data, "POST", defaultHeader);
	},

接口2：通过openid获取用户信息

前端返送openid给后端，后端通过openid和accessToken获取用户详细信息

	//获取用户信息，有openid
	loginWithOpenId:(data = {}) => {
		return $http("isp-cloud-system/third/wechat/mp/refresh", data, "POST", defaultHeader);
	},

需要注意的问题

code只能用一次，五分钟内不用自动失效

openid是该公众号当中的用户唯一标识，即每个公众号对应每一个用户都有唯一的openid