坑：

采用的Vue框架，前后端分离模式（vue工程仅作为客户端），用户通过域名访问的是客户端，但是微信授权中涉及签名和token校验依赖服务端
JS-SDK需要向服务端获取签名，且获取签名中需要的参数包括所在页面的url，但由于单页应用的路由特殊，其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

JS-SDK签名（wx.config）

对于签名，官方是这么说的

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用

vue中路由有history和hash两种模式；在history模式下，理想的设计方案是，当进入到需要用到JS-SDK组件时，获取以下当前url（也就是通过 location.href.split(‘#’)[0]获得到的地址）传递到服务端进行签名，应该就没问题了，但是IOS获取的url并不是调用微信js的时候所在页面的地址，而是进入到网站第一个页面的地址。

网上查询到一个方案是针对ios设备进入页面时先将当前url记录下来，到授权页面时将记录的url传递给服务端进行签名。该方案经实践是可行的，妈妈再也不用担心我的网址很丑很难看啦。

另外一个方案就是使用hash模式，这种模式下，url永远都只是主域名地址，省去了传递url的烦恼，也没必要处理兼容，所以如果不建议路由中有#的话，该方案应该是首选方案。

这里还有一个深坑，那就是如果授权方案采用了上述中的vue客户端处理回调的方式，那么ios将永远无法签名成功，为什么呢，因为这种方案路由通常是这样子的:

http://domain.com/?code=xxxxxx&stat=#/xxx

这种路由中带了参数的url是没法签名校验成功的！
这种路由中带了参数的url是没法签名校验成功的！
这种路由中带了参数的url是没法签名校验成功的！
重要的事情得说三遍啊

经过博主千辛万苦的搜索，路由在history下解决方案如下：

问题：

在微信授权之后，需要调用微信的jsSDK，这样根据刚才上面说的需要信息config配置之后才能吊起微信提供的服务，

wx的config如下

其中的签名有签名算法，看官网！算法如下

问题源头：

因为用的是vue单页spa，在单页spa方面vue的history在iOS中页面地址会始终为第一次进入的链接地址。
而这里的授权会有一个获取openId的过程，所以就会有在iOS中授权失败的问题。

解决思路：

将授权页的地址链接利用vuex保存下来，判断机型，
如果是iOS机型就将授权页的链接参数发送给微信权限校验接口，最后返回的结果是成功。

解决方法：

1、路由记录第一次进入时的路径

2、授权页面进行保存路径第一次进入ios的路径

3、调用wx.config进行配置，具体看官网算法，下面是url需兼容部分！

let url = /(Android)/i.test(navigator.userAgent) ?
location.href.split('#')[0] :
process.env.BASE_URL + process.env.AUTHO_URI + '?code=' + tools.getStorage('code') + '&state=' + encodeURIComponent(tools.getStorage('state'));

4、调用wx的各种jsSDK即可顺心开发了

采坑不易，自由转载，请注明出处！！！

微信公众号采坑之授权config相关推荐

微信公众号开发Django-网页授权
原文链接对于基础的微信公众号开发,网页授权,JSSDK,图片处理应该是最重要的三部分了根本上也是按照文档开发,技术含量并不高. (选Django=很多权限控制模块已经做好了,比较省力) 在开始之前 ...
ASP.NET MVC4 微信公众号开发之网页授权（一）：搭建基础环境
首先你得注册并认证一个个人或企业的微信公众号===服务号从而确保获得以下接口权限: 然后打开公众号设置里的功能设置里找到业务域名和网页授权域名分别填上你的域名(注:已备案的域名),如下图所示: 到这里 ...
微信公众号网页OAuth2.0授权登录并获取用户信息（SpringBoot实现）
微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 文章目录微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 准备工作开发思路具体代 ...
微信公众号开发系列-网页授权获取用户基本信息
OAuth2.0网页授权这个也是在做微信公众平台用到最多的,可以利用授权接口对自己平台内用户进行绑定,实现用户扫描码和微信分享.微信签到.微信商城购物等: 1.高级接口OAuth2.0网页授权设置 a ...
通过微信公众号实现H5登录授权
通过微信公众号实现H5登录授权一.相关配置 1.配置参数测试公众平台信息(测试号相关配置示例) 2.配置JS接口安全域名 3.扫码关注公众号 4.添加网页授权地址这里是指微信授权回调页面,同时发现 ...
Java微信公众号开发之网页授权获取用户基本信息
本篇博客讲解的网页授权只需要前端传递一个backUrl(回调地址) 到后台接口,后台接口会完成整个授权流程,无需前端做更多工作: 一. 前言微信公众号开发,需要用到网页授权获取用户信息,通过OAut ...
Vue项目对接微信公众号踩坑日记
之前做项目都是pc端的,还是第一次做移动端项目,而且上来就要接入app 和微信公众号两个平台,最终查阅多方文档,耗费几周时间还是完成了项目,这篇文章也算是记录一下自己的完成思路以及一些想法,希望能帮到 ...
公众号h5获取手机号权限_微信公众号开发之网页授权（获取用户信息）
这次暑假留在学校参与工作室的项目,对微信公众号比较感兴趣,所以参与这方面的学习研究. 昨天完成了关于网页授权,获取用户信息方面的功能,所以乘热打铁,写上一篇.实现本篇涉及的功能,还需要完成一些基础. ...
java的微信公众号开发零（授权登陆，版本一）
一.准备 1.一个微信公众号,也可以申请一个测试号. 测试号申请网址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 2.云 ...
微信公众号开发1-微信授权登录
说在前面的话关于微信公众号的项目也已经告落一段时间了,但是项目结束后又有参加了新的项目,导致一直没有时间分享项目经验,今天正好得空来分享一下本项目,本项目主要用到了微信公众号开发,百度地图api等, ...

微信公众号采坑之授权config

坑：

JS-SDK签名（wx.config）

经过博主千辛万苦的搜索，路由在history下解决方案如下：

采坑不易，自由转载，请注明出处！！！

微信公众号采坑之授权config相关推荐

最新文章

热门文章