Vue:在Vue中实现微信网页授权和分享

前言

自己开始开发的时候也在网上搜过些教程,尤以segmentfault和脚本之家的两篇文章为甚,然后两篇文章都只是讲了自己的场景和如何使用,却没有讲述其中的原理。我不喜欢只会用的程度,如果不明白为什么这么做,每一步做的理由,所以写下这篇文章,分享一下我在开发中的心得。

前期准备

web开发者工具.png

你肯定不愿意每次都在手机上调试,因为不能console,所以你得准备这个渣渣开发者工具,mac下容易假死。有大佬改chrome,伪装成微信浏览器,我没试过,不知道能不能成功。

natapp.png

然后是natapp,或许大家会有疑问,我都有服务器了,还买这个穿透工具干啥?因为微信签证和当前浏览器URL有关(微信设置JS安全域名),你肯定不想每次打包后都拜托后台大哥传上去你再调试吧。但是本地的localhost 192.168.x.x是无效的,因此通过natapp把当前主机暴露到外网,这样可以临时设置JS安全域名到这里,就可以进行验签和授权了。

额外补充

我们知道,做Vue开发会通过express开启一个临时服务器,我试过natapp直接映射到这个服务器,前端请求会报错,content-length not match。所以我就用anywhere对打包后的文件又开了一个本地服务器,这样其实效率挺低的,希望哪位大佬告诉我解决方案。

渣渣mac

该问题存在于mac下,windows下无问题。

网页授权和分享

这俩货其实是不一样的,得分开实现,网页授权是一套机制。分享是另一套机制。我们先看看分享

微信分享

微信分享步骤.png

首先绑定域名,这个就填natapp的临时域名就好了。然后引入JS文件,npm上有现成的包import wx from 'weixin-js-sdk';,第三个就是最重要的了。debug参数开启了,你的验签信息,分享结果,成功与失败都会以alert形式的弹窗弹出来了。调试的阶段我们需要打开,接着几个参数都没太大的问题,唯一难点在于signature。签名

signature

这些参数都应该初始化过程中请求后台,由后台返回。值得注意的是signature,在附录中有详细的介绍。这个signature会和当前浏览器的URL有关,并且注册以后如果URL发生改变需要重新注册。什么意思呢? vue-router中如果mode设置为history模式,如果进入不同路由时,URL发生了变化,此时微信认为你的URL是不合法的,因此验签失效了,你就得必须重新验签。 如果每一个路由都重新验签对于我这种强迫症是受不了的。因此我们使用hash模式,这样路由会响应#号后面的变化,真正的地址没有发生变化。因此只需要一处验签,后面都不会受到影响。 下面是我的验签代码

验签.png

首先发出一段ajax请求,讲当前的URL传递给后台,后台会根据这个URL生成signature,注意这里使用的是window.location.href.split('#')[0]方法,不能写死。因为如果进行网页授权的话。query参数会出现在#号前面。比如http://xxx.xx.com/?xx=xx&xx=xx&/#/xxx,这个query参数将会伴随整个页面的生命周期。并且其中的参数是动态变化的,如果写死将会导致验签失败。ajax拿到后台数据后进行验签,成功后调试模式下会有提示。接着进行分享

分享.png

如果出现正确的图片和title,并且调试信息无误的话一个分享就成功了。值得注意的是,分享出去的URL必须和签名的URL一样,否则分享会失败(我试过分享授权的链接,失败了)。并且如果当前用户没有订阅的话,分享出去也只是title和一串URL地址,只有订阅用户才能分享出图片和描述。 在频繁改动appid的时候(测试需要),有的时候微信服务器会有缓存,导致正确的签名顺序也会报错误的验签,这个时候等等就好了。 目前只做了风险,验签和分享坑差不多就这些。

网页授权

这个其实很简单,就是诱导一个用户跳转到一个网页,这个网页的URL配置了一些参数,按照相关的要求由后台配好以后点进去就行了。静默授权,就是不获取用户的信息,表现就是链接跳出去又跳回来。获取信息就是用户点击一个确认授权,然后你就可以获取该用户的相关信息了。 这个示例链接是 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 其中的redirect_uri就是回调的URL,授权成功后,将转入这个页面,并且携带两个query参数,其中的code就是授权码,通过这个授权码获取该用户的openid。 这个授权码有时间限制,并且只能使用一次。将这个授权码发送给后台以后,后台请求openid,这个openid是唯一的,可以通过这个openid在数据库中绑定用户。之后的逻辑就和非微信环境没有太大区别了。

业务逻辑

整个业务逻辑就是,首先判断是不是微信环境(我们的网页要求移动端同样能用)

const isWechat = () => {
  let ua = window.navigator.userAgent.toLowerCase();
  return ua.match(/MicroMessenger/i) == 'micromessenger';
}

如果是微信环境,就对他进行验签。此时并未网页授权,网页授权和验签可以分开。

授权的逻辑放在开启探索这个按钮上 首先是判断当前是否存在code(因为这可能已经是授权后的页面,因此先检查是否有code,再判断是否需要跳转授权页)

const getQuery = name => {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
      return unescape(r[2]);
  }
  return null;
} 

如果code存在就把code发给后台,根据后台的返回结果处理自己的业务逻辑。code不存在则通过 window.location.href=xxxxx跳转到微信授权页,授权成功后又跳转到当前页面,此时code存在。 如果需要其他JSSDK服务,就让后台吧通过code获取的openid,accesstoken保存下来。有些用户已经使用过了网站服务,或者网站需要用户的手机号,获取code以后就跳转一个绑定页,要求用户绑定手机或者邮箱,这个地方根据自己的业务逻辑来。 因为要同时处理微信与非微信登录,所以这里的判断逻辑比较复杂,建议先草稿纸规划好,考虑到每一个情况再敲代码。不然到时候甩锅都甩不好。

结束

微信开发确实是一个不小的难题,并非代码多高深,主要难在调试的环境上。每一个域名绑定,授权都很复杂。相关的文档个人觉得也并不完善。并且最坑爹的是微信会缓存appid,这样在开发切换到生产环境的时候,微信服务器得appid并没有切换成功,导致验签失败。在你确认签名配置无误的时候,依旧发生验签失败,那么你就等等吧。 另外,未验签分享出去的title默认就是网页的title,也就是document.title。 :)就是这样

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

20分钟教你使用hexo搭建github博客

备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇...

12720
来自专栏张善友的专栏

MSDTC 故障排除

大多数 K2 blackpearl  运行时操作都需要 Microsoft 分布式事务处理协调器 (MSDTC) 支持,以确保操作事务性一致。如果没有 MSDT...

28260
来自专栏自由而无用的灵魂的碎碎念

Windows Server 2008 R2 到Windows 7的改造之路

与windows 7相比,windows server 2008 r2功能更为全面,开发人员也更喜欢使用win server 2008 r2进行开发。

18030
来自专栏移动端开发

iOS 封装.framework 以及使用

      这个问题相信做iOS的都知道答案。 在我们的日常开发中,经常会用到各种已经封装好的库,比如支付宝、微信SDK等等中的库,这些库可以给我们的开发带来很...

19950
来自专栏北京马哥教育

解决八种Linux硬盘问题的技巧

#1 - 错误: 设备上无剩余空间 当你的类UNIX系统磁盘写满了时你会在屏幕上看到这样的信息。本例中,我运行fallocate命令然后我的系统就会提示磁盘空间...

69560
来自专栏散尽浮华

Linux下快速迁移海量文件的操作记录

有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,...

32870
来自专栏我叫刘半仙

原帮你摆脱鼠标,提高工作效率的免费小工具

       一款只用键盘操作就能打开想要的软件的神器--ALTRun。在我刚开始学编程时,一次偶然的机会接触了ALTRun后,实在是爱不释手。它是一款快速启动...

44360
来自专栏网络

强大的开源网络侦查工具:IVRE

IVRE简介 IVRE(又名DRUNK)是一款开源的网络侦查框架工具,IVRE使用Nmap、Zmap进行主动网络探测、使用Bro、P0f等进行网络流量被动分析,...

39770
来自专栏张首富-小白的成长历程

强制编辑文件,文件属主和属组自动改变

为什么对文件的权限是r--权限 对文件所在目录的权限是rwx权限 我们也能强制保存文件,但是保存之后的文件属主和属主就变了? 猜想:因为我们文件所在目录有rwx...

17330
来自专栏散尽浮华

Netdata---Linux系统性能实时监控平台部署记录

通常来说,作为一个Linux的SA,很有必要掌握一个专门的系统监控工具,以便能随时了解系统资源的占用情况。下面就介绍下一款Linux性能实时监测工具-Netda...

94580

扫码关注云+社区

领取腾讯云代金券