微信公众号 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等操作。

                示例:

                

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>