关于vue跨域名对接微信授权认证和APP授权认证

Posted ovocake

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于vue跨域名对接微信授权认证和APP授权认证相关的知识,希望对你有一定的参考价值。

这种情况一般也只会出现在前后端分离,跨域名授权的时候吧。耗费了一个前端+一个后台+一个网关,熬夜通宵了两天才整出来一套方法(你们见过凌晨6点的杭州吗,对,我下班的时候天黑了,到家天亮了。。。。),和开发APP第三方各种联系,各种百度、谷歌what、why...

技术分享图片

先说说和微信的授权认证吧,后台和网关直接的逻辑流程就不说了,就说前端的:前端业务逻辑是在加载页:

1.请求网关接口,获取用户授权状态。

2.如果授权过就直接跳转首页。

3.如果未授权过就去跳转微信授权页。

这一路上遇到过很多的问题,前端的主要问题就三个:

第一个是网关原本打算302重定向微信授权页,但是也许是微信跨域名的原因吧....失败了。我们果断换成了 window.location.href跳转授权。授权完成后重定向刷新当前页。 

第二个是AJAX跨域名请求发送cookie,一开始以为是cookie木有set进来,后来测试了几波后发现是跨域名发送cookie的时候需要对ajax的封装做处理加上

beforeSend: function (xhr) {
xhr.withCredentials = true
},

第三个是因为要对接五个后台,一开始没确定好数据的传输格式,导致AJAX不通,解决方法是将ajax提交的数据转成字符串,再在ajax封装里加上

headers: {
"Content-Type": "application/json; charset=utf-8",
"Accept": "application/json; charset=utf-8"
},

 

 接下来说一下APP的认证,APP的认证由于原先就和第三方商量好了所以流程上没有问题,就是遇到跨域名set-cookie失败。安卓端webView对方加了一串代码允许跨域名后,可以实现set-cookie了,ios的由于系统限制一直无法实现。经过测试,ajax跨域名set-cookie在IOS貌似搞不定,最后又换成了 window.location.href......

 233333第一次搞移动端授权认证,还是跨域名跨终端。还好最后都实现了,通宵两天也值了~

 






以上是关于关于vue跨域名对接微信授权认证和APP授权认证的主要内容,如果未能解决你的问题,请参考以下文章

vue+uni-app商城实战 | 第一篇:有来小店微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

企业微信授权oauth回调慢

微信支付配置参数:支付授权目录回调支付URL

用Java怎么实现微信支付?

用Java怎么实现微信支付

第三方App接入微信登录