微信H5公众号获取openid爬坑记

前要： 之前做过的公众号授权一般是在登录时的，最近遇到一个直接微信打开企业微信发过来的链接进去预约页面，需要进来时查询当前微信的用户有没有预约过对应的申请，如果有就跳转到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_base&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中的codeif (!wx_code) {//回来的地址中会在redirect基础上携带拼接上一个code重定向回来的window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base&state=#wechat_redirect`;    } else {this.getOpenId(wx_code); //把code传给后台获取用户openid}
},
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协议就可以了！

微信H5公众号获取openid爬坑记相关推荐

php微信获取openid_微信公众号获取openid（php实例）
微信公众号获取openid 公众号获取openid的方法跟小程序获取openid其实是一样的,只是code获取的方式不一样小程序获取code: 用户授权登录时调用wx.login即可获取到code ...
微信公众号获取OpenId（未授权）（需要关注公众号）
文章的一开始,我先解释下微信公众号的openId. openId是微信对于用户的唯一辨识,只要有用户关注你的公众号,微信会通过公众号和用户微信号通过一种算法生成一种唯一标识码,也就是openId,用数 ...
JAVA版微信公众号获取openId,微信用户信息
一. 前端页面js 1.获取页面传来的数据 function GetQueryString(name) {var reg = new RegExp("(^|&)" + na ...
根据微信的公众号获取公众号的二维码根据公众号获得二维码的图片
最近在维护一个老项目,就是根据微信的公众号,也就是英文数字那串的公众号来获得公众号的二维码的,我看了下,之前的代码是用的这个网址 http://open.weixin.qq.com/qr/code/ ...
微信公众号获取openid（java后端+html实现）
准备工作: 1.认证通过的微信公众号 2.获取微信公众号的appid和secret 3.配置回调地址:开发>接口权限>网页服务>网页授权>修改该示例为用户静默状态下获取ope ...
微信公众号获取openid（vue）
export default {created () {this.page= (this.getUrlParam("page")===null)?this.getUrlParam( ...
微信公众号获取openid失败
前提:微信公众号设置中的"网页授权域名"已经配置好. 现象:获取code成功,但是通过code获取openid失败,报错 : {"errcode":40029, ...
uniapp微信H5公众号授权与支付
目录前言准备工作配置回调域名授权方式参数完整代码前言网页授权微信官方文档:网页授权 | 微信开放文档如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基 ...
微信H5公众号chooseImg上传图片
公司公众号项目,之前是使用Vant框架构建.一期的时候上传图片使用Vant提供的Uploader组件,当时没有提到要为客户提供多图上传这个功能,且测试的小姐姐当初的iphone很给力 ,几乎没什么 ...

微信H5公众号获取openid爬坑记

微信H5公众号获取openid爬坑记相关推荐

最新文章

热门文章