网页授权 拿到code获取oppenId

网页授权

        如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

一、openId是什么？

          openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。

二、openId有什么用

        假如用户A在当前公众号下购买了一件商品，用户的下单信息肯定要存储到后台数据库，那根据什么进行存储呢？openId是用户在当前公众号下的唯一标识，通过openId和用户的下单购买信息进行键值对的数据绑定。那么我要查询该用户购买过什么商品，就能够通过openId去查询，并且数据是唯一的，不会和另外的用户数据有冲突。

三、怎么获取openId？

        1.登录微信公众平台后台，在基本配置中可以查看公众号开发信息，可以获取到公众号的AppId

       （这里AppSecret是后端调用微信接口时要用到的值，后端需要传正确的AppID和AppSecret，如果在调用接口获取openId的时候报错40029，一般都是这两个值不匹配导致的错误。）

       

      2.设置回调地址页面向导：开发 -> 接口权限 -> 网页服务 -> 网页授权 -> 修改。

            开发的项目需要放到已经解析好服务器域名的服务器下，同时把Mp***.txt文件放到服务器根目录下（回调域名是字符串不是url，不能有端口，不能包含http://或者https://）

        

     3.前端代码，配置的参数要一一对应，获取code，并调用后台接口，把code传给后台，获取后端返回的oppenId。

        let openid = localStorage.getItem('openid');		//获取用户openid 

		if(!openid){
			let code = getQueryVariable('code');		//获取微信返回code
			let appid = '此处存放公众号appid';								
			let redirect_uri = window.location.href;		//回调地址
			redirect_uri = encodeURIComponent(redirect_uri)
			let url1 = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
			if(!code){
				window.location.href = url1;		//如果没有code值，则跳转微信接口获取code
			}else{
				// 通过微信返回的code获取用户openid
				$.ajax({
					url: "此处存放后端接口",    //调用后端接口传给后端code获取后端返回oppenId
					data:{
						code,
					}, 
					type: "get",
					success: function(res) { 
						alert('res:'+JSON.stringify(res))
					},
					error: function(err) {
						alert('err:'+ JSON.stringify(err))
					}
				});
			}
		}else{
			alert('openid:'+openid);
		}

      //获取url地址里面的参数
      function getQueryVariable(variable) {
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == variable) {
					return pair[1];
				}
			}
			return (false);
		}

上述代码：

 从浏览器缓存中获取oppenid，如果没有oppenid，就要先获取微信返回的code，如果没有code，就要调用微信获取code的接口来拿到code，微信获取code的接口需要用到appid和回调地址(微信跳回来的地址)，这里注意，因为微信接口是跳转一个url地址，如果调用微信接口跳转到微信那边的页面去了，就离开自己的页面了，所以我们拿到code后还要跳回自己的页面，需要给微信方一个回调地址，告诉微信拿到code要跳回到哪里去，这里window.location.href就代表你当前的url，然后传给微信接口的时候这个地址要转码一下，不然传不过去。然后拿到code之后我们就可以调用后端接口传给后端code获取oppenid了，一般情况下是后端那边调用微信接口获取oppenid，前端调用后端方法获取即可。

更多学习可以去看官网文档，这里详解。网页授权 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0