前要: 之前做过的公众号授权一般是在登录时的,最近遇到一个直接微信打开企业微信发过来的链接进去预约页面,需要进来时查询当前微信的用户有没有预约过对应的申请,如果有就跳转到index的列表页,没有的话留在当前的预约页!所以需要用到微信用户访问微信内部的小程序/公众号产生的用户唯一标识openid来查询有没有对应的数据列表
其实在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID
准备工作:
1、已经认证的公众号(企业号可以,个人号是不能绑定H5的),并且获取公众号的appid
2、https认证域名,没有认证的域名微信中不能配置回调地址,并且公众号后台配置网页授权的相关域名,要不会报redirect_uri域名还是与后台配置不一致 10003
3、微信公众平台认证通过,并创建app
4、逻辑图:
实现步骤:
1、最终需要拼接成的地址:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect
2、进来微信获取code,只能在微信客户端中发起,其中有两种方式,scope=snsapi_base(只能获取openid,并且是静默获取的,没有弹窗),scope=snsapi_userinfo(有弹窗,不仅仅可以获取openid,还可以获取用户微信的基本信息)
3、获取code成功后对链接进行截取!使用code去和后端换取openid!
最终代码:
onLoad(options) {
//这要兼容其他业务逻辑必须要处理的一层判断
var isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); // 是否手机端
var isWx = /micromessenger/i.test(navigator.userAgent); // 是否微信
var isComWx = /wxwork/i.test(navigator.userAgent); // 是否企业微信
if (options.id) {
this.id = options.id;
this.getDetail(options.id)
} else if (!options.id && !options.type && isWx && isMobile) {
this.getCode()
}
}
getCode() {
let appid = "XXXXXXXX"; //个人开发者appid
let redirect = encodeURIComponent(`https://XXXXXXX.com/pindex.html#/visitor/appointment/appointment`); //重定向回来的地址
let wx_code = this.getUrlParam("code"); // 截取url中的code
if (!wx_code) {
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`;
} else {
this.getOpenId(wx_code); //把code传给后台获取用户信息
}
},
getUrlParam: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
踩坑总结:
1、第一次会犯的错:没有配置后台域名、appid写错、redirect 写错会重定向不回来、每一次进来不对wx_code进行判断会不断得闪…
2、480001:api功能未授权:scope=snsapi_base时是静默的,不弹出授权界面,只能获取用户openid,此时api未获得用户授权,所以你要拉取用户信息,就会弹出480001.如果要拉取用户信息请用snsapi_userinfo,当用户进入页面会弹出授权确认界面
3、获取openid时请求的后端域名是http的,安卓系统可以调后台的接口,并且可以获取openid回来!但是在苹果系统中会请求超时的!对比了大半天,所有参数一样的,后来改回https协议就可以了!