微信网页授权

官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

1、配置公众号回调域名

在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。

2、关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)。
2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

前端步骤

.用户进入网页链接,若未授权则跳转到登录页,如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。

let getQueryVariable = (variable) => {
	          let query = window.location.search.substring(1);
	          let vars = query.split("&");
	          for (let i = 0; i < vars.length; i++) {
	              let pair = vars[i].split("=");
	              if (pair[0] == variable) {
	                  return pair[1];
	              }
	          }
	          return "";
	  };	  
//login.page
		onLoad() {
			let code = this.getQueryVariable("code"); //获取code
			let uri = window.location.href.split('#')[0];//获取redirect_uri
			if (!code) { //注意链接的参数顺序,这里用encodeURIComponent对uri编码
				window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx********&redirect_uri=" +
					encodeURIComponent(uri) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect"
			} else {
				uni.setStorageSync('code', code)
				this.httpUtil.login().then(res=>{ //返回用户信息
						this.$router.go(-1)
				})

			}
		}

你可能感兴趣的:(微信网页授权)