发布：2020/6/28 9:22:06作者：管理员 来源：本站 浏览次数：972
必要条件
已经认证的公众号（企业号可以，个人号是不能绑定H5的）
https认证域名，没有认证的域名微信中不能配置回调地址
微信公众平台认证通过，并创建app
步骤
获取code （需要配置选取scope=snsapi_base模式，code五分钟过期，使用过一次过期）
通过code就可以配置参数获取openId（注意这个openId和access_token是一起获取的）
没错，只需要两部就可以初步获取用户的唯一标识openId，下面介绍具体的配置
详细
1、 获取code
这个code只能在微信中发起请求，也就是说使用微信H5发起请求，原因下面介绍，这里先明确这个请求是从微信客户端中通过H5的链接请求的，只能在微信客户端中发起。
1.1参数说明
在这里插入图片描述
1.2拼接后的url
注意：url中的回调地址需要进行urlEcode处理，而且scope=snsapi_base模式不能改，改掉之后第二步只能获取到access_token。
https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号的应用标识&redirect_uri=回调地址&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
1
1.3如何发起url请求code
在我们H5相应界面中js的方法中使用window.location.href发起url请求，再次强调这个请求必须是从**微信的移动客户端（手机）**上发出！
window.location.href = "已经拼接的url"
1
1
1.4响应是什么？
redirect_uri/?code=CODE&state=STATE
1
回调地址+查询字符串（包含code和state），那么接下来的问题是，我们如何接收这个查询字符串中的code呢？目前我是用截取的方式
1.5截取code
从当前地址栏中截取出code
// 从地址栏的url中截取code
var url_str = location.href // 获取整个地址栏的url_str
var num = url_str.indexOf("?")
url_str = url_str.substr(num + 1) // 获取url中的参数
var arr = url_str.split("&") // 获取url参数数组
// 获取code
for(var i=0;i<arr.length;i++){
num = arr[i].indexOf('=')
if(arr[i].substring(0, num) == 'code'){
this.code = arr[i].substr(num+1)
}
}
到此code通过this.code存起来了，用于下一步获取openId使用。
1.6解释为什么必须微信发出
通过url我们不难发现，整个url中只有我们自己公众号app的相关id信息，关于用户的信息并没有拼接到url中，所以我们从浏览器中发起url请求时，微信服务器并不能区分哪一个微信用户发起获取code的请求。而通过微信客户端发起，微信就可以通过微信客户端中的一些默认字段区分用户，并返回用户的code信息。
2、获取openId
公众号获取网页授权access_token。获取code的url中的scope=snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。
2.1参数说明
在这里插入图片描述
2.2拼接后的url
登录微信公众平台：开发 >> 基本配置 >> 开发者密码
https://api.weixin.qq.com/sns/oauth2/access_token?appid=替换为公众号的标识&secret=公众号的开发者密码&code=CODE&grant_type=authorization_code
1
现在有了url我们怎么发起请求呢？谁来发这个请求呢？
2.3如何发起请求，谁来发起请求
如何发起请求呢？前端H5不能发么？能！但是不用！原因：用户的access_token和openId我们不希望前端给我们后端发送，很难想象前端被破解之后发送过来千奇百怪的openId,后端又不具备校验能力，只能存储！所以最终我们使用的openId需要在后端服务器上获取，之后发送到前端做本地化存储！
在这里插入图片描述
后端怎么请求这里不重点做介绍，简单说只是写一个接口，对微信服务器发起请求，获取微信服务器的返回值，并对openId做存储，紧接着就要写返回参数，将openId返回给前端。
2.4H5怎么获取openId
H5想要从自己服务器中获取openId想必已经很简单，只需要使用axios向自己后端接口发起请求即可。
总结
至此我们总算是完成了H5获取openId，需要提醒的是这个openId只用作用户的唯一标识，并不能获取用户的头像、用户名等重要信息，如果想要获取重要的用户信息，还需要使用access_token继续请求微信服务器。而且需要注意的是从第一步开始的scope要设置为snsapi_userinfo，才会有后文 。具体的还要自己阅读微信官方文档。
参考文档：微信开发文档
