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即可完成。

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

企业微信怎么输入服务器id,系统账号绑定企业微信成员id
原标题:系统账号绑定企业微信成员id 场景在白码系统中需要使用各种接口对接企业微信时,发现需要使用企业微信的成员id,比如创建日程.获取打卡数据等接口,所以在此之前需要先将成员id与白码系统中的用户 ...
系统账号绑定企业微信成员id
场景在白码低代码开发平台中需要使用各种接口对接企业微信时,发现需要使用企业微信的成员id,比如创建日程.获取打卡数据等接口,所以在此之前需要先将成员id与白码系统中的用户一一对应: 前期准备升级白 ...
易优cms 会员系统的绑定邮箱配置，在后台哪里调 Eyoucms快速入门
后台-基本信息-接口配置-邮箱配置
微信小程序与后台交互案例
1.写后台 2.绑定事件 3.编写事件 4.打印输出
微信小程序与后台服务器交互,微信小程序与后台交互----传递和回传时间
wxml代码日期选择器当前选择: {{date}} 提交返回的值:{{date2}} index.js代码 abc: function (e) {//该函数用于和后台交互 var that = ...
微信小程序与后台交互拿数据
首先这是一个主页面那个头像已经是获取到当前登录人当点击下面按钮的时候我需要调用Java端查到数据展示出来这是Java端的一个查询方法然后是页面展示 <!--pages/list/lis ...
《小程序》微信小程序绑定系统账号并授权登录之微信端
小程序登录小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系登录流程时序说明调用 wx.login() 获取临时登录凭证code ,并回传到开发 ...
从零开始开发微信小程序（四）：微信小程序绑定系统账号并授权登录之后台端...
2019独角兽企业重金招聘Python工程师标准>>> 1. 后台开发环境: 语言:java 框架:springboot 2. 代码示例: package com.zc.wechat ...
微信H5端网页授权流程（在H5中的openid获取，网页绑定微信）
说明:微信网页授权有两种 1.单独获取openid,属于静默获取,用于绑定微信(scope为snsapi_base) 2.获取用户的基本信息,需要用户点击同意(scope为snsapi_userinf ...
微信公众平台绑定微信用户OpenID与第三方业务账号
转自:http://www.abyssly.com/2013/09/20/wx_bind/ (原作者的思路蛮清晰的,赞一个!) 最近由于工作需要,接触了微信公众号的开发.业务上要求绑定微信用户和系统 ...

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

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

最新文章

热门文章