app系统账号绑定微信openid，H5与后台交互

本博文解决问题：

在微信公众号中添加系统账号和微信账号绑定的功能。

PS：源码在审核中，完成后会放到此处。

 

先看流程图：

 

 

说明：

首先H5写一个输入账号的页面，页面中调用后台方法，查询是否在系统中注册过，范湖值需要有以下三种状态：

1、没有注册的用户，是不需要进行绑定的

2、已注册，但已绑定过微信openid的（看需求是否可以重新绑定）

3、已注册，没有绑定的用户（走绑定流程）。

我们主要说明的第3中状态。

 

未绑定的用户，由H5调用链接如下：

var s=("https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="+UrlEncode("回调地址)+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect=1");
window.location.href=s;

需要注意的是：

1、整体链接中，只有回调地址是需要UrlEncode进行编码的，整理链接不需要。

2、scope为snsapi_base不需要进行登录授权（但只能获取到openid）；scope为snsapi_userinfo时，会有登陆授权页面弹出，但也可以获取到更多的信息。看需要使用合适的即可。

3、微信的回调相当于打开一个新的链接地址，你发起页面的输入账号是没有的（别着急，下面又说到）

4、很多人在回调地址这里出错，详细说明一下：

如果在微信公众号中，的回调地址写的是：baoduu.com/wxopenid

PS：回调地址查看：开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息

链接中回调地址可以写：baoduu.com/wxopenid/***/***/***，这个***是你接收回调的H5页面，比如你的project是wxopenid，有html文件A、B、C，例如输入账号的页面为A.html，你想在A页面中回调回code，那么在A页面中发起了上述的请求连接，其中的回调地址需要写上A的链接地址：

var s=("https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="+UrlEncode("baoduu.com/wxopenid/A.html")+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect=1");
window.location.href=s;

那么在回调地址中，微信会自动把code凭借到链接后面，例如：baoduu.com/wxopenid/A.html?code=******

如果你想在B.html页面接收回调，需要写上B链接地址：

var s=("https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="+UrlEncode("baoduu.com/wxopenid/B.html")+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect=1");
window.location.href=s;

那么在回调地址中，微信会自动把code凭借到链接后面，例如：baoduu.com/wxopenid/B.html?code=******

你只需要在你写的回调页面中接收到code即可。

PS：微信这个回调还能再拼接参数，例如：

var s=("https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri="+UrlEncode("baoduu.com/wxopenid/B.html?loginName=100000000")+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect=1");
window.location.href=s;

那么在微信的回调页面，你会发现他是这样的：

baoduu.com/wxopenid/B.html?loginName=100000000&code=******

这里就解决了不知道是那个账号要绑定微信了，最终的请求链接也就是这样了，个人的建议是在另一个页面中接收回调，例如在A发起请求，B接收回调。

到这里示例图中的1、2、3、4就完成了

 

第5步，在B.html中截取code；

window.onload = function () {
	code = getQueryString("code");
	loginName = getQueryString("loginName");					
	if(code!=null){
		GetOpenid();
	}
}


function getQueryString(name){
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
	var r = window.location.search.substr(1).match(reg);  
	if (r != null) return unescape(r[2]); return null;              
}

第6步，请求后端接口，把code传过去，让后端同事，向微信发起获取openid请求，因为这里需要用到appid和secret，前端不建议存储，后端请求的链接为：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=替换为公众号的标识&secret=公众号的开发者密码&code=CODE&grant_type=authorization_code

其中：appid为公众号标识，secret为开发者密码，code就是我们截取到的code值，需要传给后端。

后端请求微信回调格式为：

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

其中的openid就是我们需要绑定的用户微信标识了。后端把openid传回到前端。

到此第8步完成。

 

前端接收到openid后，B页面输入密码或短信验证码之类的验证信息，把输入的账号、密码或验证码、openid通过后端接口请求过去，后端验证用户账号信息等，是否通过，通过后把账号和openid绑定到一起，返回给前端一个错过的标识，至此全部流程完成。

 

PS：完成流程后，想关闭微信浏览器咋办？？

1、引入

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2、WeixinJSBridge.call('closeWindow');

调用此方法就会关闭微信的浏览器，回到聊天页面。

 

 

之后测试通过后，在微信公众号中添加一个菜单栏，例如名称为：“绑定微信”，点击跳转链接到baoduu.com/wxopenid/A.html即可完成。