微信公众号 Hash模式授权

前言：

这几天使用vue写公众号页面，关于拿到OpenId的授权问题，在Hash模式下，百度了很多，都是nginx配置了顶级路由（location/），然后加上什么try_files等等的，但是，在现实中，很少直接配置顶级路由的，很多二级路由，甚至多级路由的情况下，获取OpenId就会出现很多问题。

问题一：比如少部分IOS手机（目前只发现少数苹果手机是这种情况），会出现白屏情况，这个的大概原因，应该就是腾讯默认（部分不）支持带“#”号的回调，导致回调回来的地址不对应，然后回调页无法访问就出现了白屏的情况。

问题二：假设使用History模式，还是会出现各种问题，比如在获取jssdk的时候，出现签名错误，这个问题主要是出现在IOS手机上，原因是IOS在vue-router跳转的时候，实际上地址是没变的，比如从“localhost/index”跳转到“localhost/index2”，实际上IOS在index2页面获取的地址是index的，所以jssdk授权就会出现签名错误。

解决方案：

这里只讲述Hash模式下，nginx、iis等代理在顶级、多级路由情况下正确获取微信公众号授权，获取到OpenId的方案。

首先，vue的配置都是正常配置，比如如下图：

vue.config.js内的publicPath配置"./"，既不影响调试，也不影响发布。

router的history依然是createWebHashHistory()，什么都不用变。

nginx的配置如下图（这里只配置二级路由，多级路由是一样的，只是location变了而已，比如：location /xx/xxx/xxxx/而已）

下面，就需要借助SSO，如果公司有的，就不用看了，如果没有的，有兴趣的可以继续往下看。

由于前端带#号是无法通过前端进行授权的，出现的问题上面也说过了（部分手机不支持）。那么我们就需要借助服务端进行授权。

大概的思路，就是前端，把绝对地址带到Auth接口上，然后Auth生成的state缓存起来，然后生成微信的回调地址，回调地址填自己服务端的（WxServiceAuthorize）接口，然后微信回调的时候会生成code和返回原来的state，通过state取到原先缓存的前端绝对地址，获取完OpenId之后，通过url的方式再把他带回到前端。这样就完成了授权。

注意：Auth、WxServiceAuthorize这两个接口都需要是返回页面的接口，而且还要是Get请求，否则腾讯无法请求到你的接口上。

请求地址：

在前端没有获取授权的时候请求这个接口，然后这个接口要生成一个重定向的地址，重定向的地址指向自己第二个微信回调地址，然后直接重定向到这个重定向地址中。

比如，我的获取授权地址是：www.ivw.com/webapi/Auth，然后里面要生成一个唯一的state，这个state在微信回调的地址上回调回来是会带过来的，我们就要根据这个state和code，进行获取OpenId，然后缓存起来，而这个Auth，会生成一个地址：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http://www.ivw.com/webapi/WxServiceAuthorize&&response_type=code&scope=snsapi_base&state=123#wechat_redirect

这个地址回调后就是回调到服务端的第二个地址，然后在那里进行获取openid等操作。

示例：

微信公众号 Hash模式授权相关推荐

微信公众号开发之授权登录（前端vue篇）
前序: 由于之前一直是后端直接调用微信授权后,拿到相关信息后再返回给我(就是以前的前后端不分离),所以对微信公众号开发的微信授权登录还一直处于懵逼情况,直到今天有一个项目需要前后端分离,要前端主动去获 ...
微信，支付宝支付，微信公众号小程序授权等
微信,支付宝支付,微信公众号小程序授权等前言微信支付微信授权 maven依赖(更新) 前言最近在公司也做了很多移动端项目,如今微信公众号,小程序又特别火爆,免不了要接触支付,授权这类的业务需求 ...
微信公众号的网页授权如何在本地调试？
调试微信公众号的网页授权时,要填写网页授权域名(如图1),否则授权的时候会提示redirect_uri参数错误(图2),可是我得在localhost先调试成功才能上传到实际的网站上吧,可是这里不支持l ...
python 微信公众号-回调模式验证url
回调模式 ###微信公众号回调模式之验证URL from flask import Flask,request from WXBizMsgCrypt import WXBizMsgCrypt impo ...
什么是php微信开发,php微信公众号开发模式详解
这篇文章主要介绍了php微信公众号开发者模式,通过后台服务器与微信关注用户实现更多的交互作用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下学习步骤:分四章来讲述这部分内容,下面是每章的大致内容. ...
微信公众号开发之授权
微信公众号开发之授权开发前准备首先准备自己的服务器资源,已有服务器的请忽略服务器资源. 我这里演示新浪云服务器环境搭建:(新注册号有免费云豆可用) 服务器资源(https://sae.sina.c ...
什么是微信公众号矩阵模式？
什么是微信公众号矩阵模式? 微信矩阵,多数是一个特定类型的同级兄弟微信公众号的集合.当然也有上级.下级微信公众号的集合.其直接意义可通过以下4点近而概括: 1.方便了网友寻找每个服务单位的微信公众号: ...
微信公众号基本设置服务器设置教程,最新最全的微信公众号开发者模式配置
微信公众号的开发分为编辑模式和开发者模式,那么最新最全的微信公众号开发者模式配置是什么呢,下面是学习啦小编收集整理的最新最全的微信公众号开发者模式配置,希望对大家有帮助~~ 最新最全的微信公众号开发者 ...
微信开发者模式php,php 开启微信公众号开发者模式
php 开启微信公众号开发者模式 /** * wechat php test */ header('Content-type:text'); //define your token //定义TOKEN ...
微信开发者模式php,PHP实现模拟微信公众号开发者模式
本文主要和大家分享PHP实现模拟微信公众号开发者模式,主要以代码的形式和大家分享,希望能帮助到大家.$url = 'http://xxxx.com/test/aaaa/index.php';//开发者 ...

微信公众号 Hash模式授权

微信公众号 Hash模式授权相关推荐

最新文章

热门文章