WebApp微信登录授权，获取用户信息

WebApp微信登录授权，获取用户信息

当然，如果你能自己看得懂微信API的文档是最好的了。
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

准备阶段

1. 微信公众号申请服务号或者订阅号 weixin.qq.com
2. 微信公众号的AppID和AppSecret以及绑定域名（先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。）

主要流程

1. 第一步：用户同意授权，获取code
2. 第二步：通过code换取网页授权access_token
3. 第三步：刷新access_token（如果需要）
4. 第四步：拉取用户信息(需scope为 snsapi_userinfo)
5. 附：检验授权凭证（access_token）是否有效

在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：

示例代码：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明：

实操案例：
1.前端封装wxapi.js（本案例是基于mui框架的写法，如需引用根据实际情况自行调整）

(function($, window) {
	window.wxApi = {
	    getCode:function(appid, redirect_uri){  // 此处的appid为所需绑定的微信公众号上已有的字段，redirect_uri为返回页面可以自定义，也可固定某个页面，此处由于注册、登录都需要引用所以定义了不同的回调。
			var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code"  + "&scope=snsapi_userinfo" + "&state=STATE#wechat_redirect";
			window.location = url;
	    },
	    getUnionid:function(code){ 
			var url = "http://后端的接口?code="+code; // 后端接口，即回到以后步骤2-4，然后返回用户基本信息。前后端分离会出现跨域问题，需要后端做好预处理
			$.ajax({
				type: 'GET',
				url: url,
				timeout:  app.timeout,
				dataType: "json",
				success: function(r) {
					app.setItem(app.localKey.userInfo,JSON.stringify(r));//缓存用户信息
					//param = JSON.parse(app.getItem(app.localKey.param));//配合本地缓存，让微信授权成功以后页面跳转到对应的页面。
					//if(param.loginBack){ 
						//window.location = param.loginBack;
					//}
				},
				error: function(xhr, type, errorThrown) {
					$.toast(app.ajaxErrorTip);
				}
			});
	    }
	   
	}
})(mui, window);

2.login.js
需要在login.html引入wxapi.js，本案例是运用vue框架实现的，下方的vm.可用this.替代。

getCode:function(){ // 获取code
	param = JSON.parse(app.getItem(app.localKey.param)); 
	if(!param){
		param = {}
	}
	param.loginBack = 'login.html'; //定义微信授权成功以后返回的页面
	app.setItem(app.localKey.param,JSON.stringify(param));
	
	vm.redirect_uri = window.location.origin + "/域名后的文件层级/index.html";//origin是自动获取当前的域名路径的前缀，[域名后的文件层级]是执行index.html的路径
	wxApi.getCode(vm.appid,vm.urlencode(vm.redirect_uri));
},
urlencode:function(str) {  //url转码，把字符串作为 URI 组件进行编码
    str = (str + '').toString();   
    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');  
}, 

3.index.js
需要在index.html引入wxapi.js，本案例是运用vue框架实现的，下方的vm.可用this.替代。

init:function() {
	if(vm.getRequest().code!=undefined){
			vm.getUnionid(vm.getRequest().code);
		}
	},
getRequest:function () {  //获取当前url的参数，判断是否是微信登录的回调。获取微信回调的code参数
  var url = location.search; //获取url中"?"符后的字串  
   var theRequest = new Object();  
   if (url.indexOf("?") != -1) {  
      var str = url.substr(1);  
      strs = str.split("&");  
      for(var i = 0; i < strs.length; i ++) {  
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
      }  
   }  
   return theRequest;  
},
getUnionid:function(code){ // 获取用户的基础信息，将unionid作为唯一标识
	wxApi.getUnionid(code);
},

基本思路是用户login.html页面，用户主动发起微信授权或者被动亦可，但是要接受授权。然后调用wxapi.js的getCode获取code返回index.html页面，带code通过ajax请求后端的接口，返回用户的基础数据。