vue单页面应用如何在微信浏览器里进行网页授权获取用户信息

2020-10-11 20:01·知码

前言

在vue单页面应用比较流行的时代，如何把vue应用和微信公众号两者结合在一起也是比较常见的功能。如果仅仅是把一个vue应用放在公众号上，没有进行额外的微信功能开发，如：获取用户信息，支付，分享等功能。其实和放在普通浏览上没有任何区别，仅仅是把网页放在了浏览器显示而已。但现实往往是需要很多额外的功能开发，如一个很常见的功能：在微信浏览器中如果进行网页授权，而获取用户的信息。

下面就说一下笔者在开发这一功能的实现过程，当然，还有其它方式都可以实现，这里只是说一下个人的实现逻辑，如果有不好的地方请各位小伙伴们批评指正。

配置服务器和公众号信息

要想在微信浏览器里进行开发功能，首先要有一台服务器，没有的话可以去阿里去或者腾讯云购买。还需要有一个已经备案过的域名。以上材料都有了就需要注册一个微信公众号，这里笔者以服务号为例进行说明。具体的注册过程自行查阅资料，比较简单，这里不再缀述。

申请完公众号之后，需要进行网页授权域名配置


按上述提示配置好服务器文件和域名

这里假定都已经配置好所有的信息，如配置过程中出现问题需要多看文档，按步骤一步步来配置。

开发

这里说明一下这个微信授权地址具体的参数需查看官方文档：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

说一下几个比较重要的点：

  • appid: 公众号的唯一标识
  • redirect_uri: 授权后重定向的回调链接地址,请使用 urlEncode 对链接进行处理
  • scope: 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

开发之前一定要仔细阅读官方文档~~~！！！！

开发之前一定要仔细阅读官方文档~~~！！！！

开发之前一定要仔细阅读官方文档~~~！！！！

创建一个vue项目，这里不多说，看一下主要的逻辑代码：

router.beforeEach((to, from, next) => {
  // 判断要跳转的页面是不是需要授权
  if (noAuthPageList.includes(to.name)) {
    next()
  } else {
    // 判断当前页面是不是从微信回调回来的
    if (location.search && location.search.indexOf('code') !== -1) {
      handlerWeixinAuth(next)
    } else {
      if (userInfo.isLogin()) {
        if (userInfo.state.unionid) {
          next()
        } else {
          if (isWeiXin) {
            window.location.href = urlPath.weixinAuthUrl
          } else {
            next()
          }
        }
      } else {
        autoLogin(next)
      }
    }
  }
})

我把所有逻辑都放在了 vue-router里的 beforeEach 方法，当然也可以放在其它地方，看个人的心情~ 我比较喜欢这种方式。

说一下主要流程

  • 判断是不是需要授权的页面，有些页面是不需要进行授权的，如 登录注册等页面，如果是不需要授权的页面则直接放过。
  • 如果是进行需要授权的页面，则判断当前链接是不是从微信浏览器授权回调回来的，也就是说链接里面有否有code参数，如果有code则说明是从微信回调回来，则需要进行处理，把 code 发给后台，后台需要获取 access_token
  • 如果链接里面没有code，但是需要登录信息，则判断是不是在微信浏览器中，这里判断是不是微信浏览器主要是防止应用以后可能不仅仅在微信浏览器中使用。如果确定以后只在微信浏览器中使用，则可不判断，直接进行微信授权就好。当用户同意获取信息之后，微信浏览器会主动回调链接中的地址，也就是 redirect_uri对应的参数地址。

总结

这里笔者只是简单介绍了一下如何在微信浏览器里面获取信息的步骤，具体实现可能还要很多代码要写。对于vue单页面应用来说，微信授权是比较绕的，需要大家要不断测试理解，这里可以用微信开发的测试工具 微信开发者工具 去测试。

好了，有什么不明白的地方可以私信我，大家一起学习交流

举报
评论 0
    热门：