专栏首页考拉阅读前端团队vue + 微信获取用户信息

vue + 微信获取用户信息

vue + 微信获取用户信息

本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要关注公众号才会有该字段)传给后端,记录点赞人的相关信息

微信网页授权

  1. 微信公众号网页授权配置,详见官网
  2. 关于网页授权的两种scope的区别说明 (详细见官网) -scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面,不需要用户操作 -scope=snsapi_userinfo 获取微信用户详细信息(昵称,头像等),需要用户手动点击授权,当点击允许时,会跳转业务页面(类似于关闭弹窗),点击拒绝时会推出页面,授权如图:
  1. ⚠️用户管理类接口中的“获取用户基本信息接口”,是在用户和公众号产生消息交互或关注后事件推送后,才能根据用户OpenID来获取用户基本信息。这个接口,包括其他微信接口,都是需要该用户(即openid)关注了公众号后,才能调用成功的。
  2. 分享页面的实际链接: ⚠️ 当前页面的链接需要 encodeURIComponent( url ) 编码 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect // APPID: 公众号的appid // REDIRECT_URI:当前页面的链接,需要编码 // scope: snsapi_base / snsapi_userinfo // 其他值均不用改动
  3. 点击允许后跳转的链接是 REDIRECT_URI + code=CODE&state=STATE。 ⚠️ 此处的code可以用来调取接口获取微信用户的相关信息 ⚠️ 每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。 -官方说法code只能被使用一次,在H5页面中,如果有跳转的情况,再返回当前页面,微信会判断是否已经授权,如果授权过,则code返回的还是上一次的code,而你如果用code调取用户信息(code已失效)会报 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ],所以在第一次获取用户信息的时候就可以将该用户信息存储在本地
  4. 需要获取用户信息,且二次分享的问题 虽然当前页面没有问题,但是当前微信用户使用微信进行二次分享,则微信会分享当前页面的链接(不包含https://open.weixin.qq.com...),新用户点击则不会进行授权,但是微信的二次分享会在当前链接加上 &from= ,可以在vue created的生命周期里进行参数获取并判断,如果有from参数,则跳转 https://open.weixin.qq.com/co... 链接,让用户授权 ⚠️ 二次分享样式显示问题可以查看我的另一篇文章 vue + 微信二次分享/自定义分享

代码如下

// created 周期
if(this.$route.query.from) {  // 判断链接中是否有from参数,下面的studentId,activityId项目需要
  let _nowUrl = window.location.href.split('?')[0] + `?resource=1&studentId=${this.$route.query.studentId}&activityId=${this.$route.query.activityId}`
  let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
  window.location.href = _shareUrl
  return
}
    // 处理微信用户信息
  handleWechatMsg(code) {
    // 调取 获取微信用户信息的接口(后端参考微信官方文档进行封装)   code--参数
    api.getWechatInfo(code).then((res)=>{
      if(res.data.code == 200) {
        // 返回的是json字符串
        let _data = res.data.content
        let _personMsg = JSON.parse(_data)
        this.wechatMsg = _personMsg
        // 本地存储微信用户信息,防止页面被刷新,code失效
        window.localStorage.setItem('wechatMesssage', _data)
      } else if (res.data.code == 400) {  //  400-code失效,400是后端返回,具体看后端返回哪个码
        let msgs = window.localStorage.getItem('wechatMesssage')
        this.wechatMsg = JSON.parse(msgs)       
      } else {
        this.$Message.message(res.data.message);
      }

    })
  },
  • 如果需要获取微信unionid,则需要引导用户关注公众号,可以在返回的用户信息中判断是否含有unionid,如果没有,可以展示微信公众号的二维码,供用户识别关注

⚠️--------------------

  1. 当前页面的域名,需要在公众号后台配置添加(详见官网)
  2. 如果页面存在#,可能会出问题,可以使用nginx进行配置

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【算法解析LeetCode by Javascript】23. 合并K个排序链表

    我们只需要把相邻列表进行合并,这样的话我们只需要进行logN次操作就可以把列表归并成一个有序列表

    super.x
  • 简单粗暴的react路由

    super.x
  • 记录一次开发微信网页分享

    最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的。在做的过程中遇到了一些坑的地方,所...

    super.x
  • 微信社交,我们是否被强关系绑架?

    用户1756920
  • Vue+abp微信扫码登录

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了。分享给需要的人,也作为自己的一个笔记。后端系统是基于ABP的,所以部分代码直接使用了ab...

    用户6362579
  • 使用Kubernetes管理Docker集群

    Kubernetes是一个来管理容器化应用程序的开源平台。如果您使用Docker将应用部署到多个服务器节点上,Kubernetes集群就可以管理您的服务器和应用...

    苏易北
  • 【iOS 开发】ViewController 减负记录

    最近在重构一个以前写的老项目,在尝试给之前的 ViewController 减负,尽量抽离代码到其他文件。 想记录一些东西,看看以后返回来再看能不能有更好的想...

    KyXu
  • 尼尔森交互原则

    用户2025931
  • 极客公园 & 腾讯大讲堂 [ 走进腾讯 ] 活动精华回顾

    [核心提示] 微信表情背后有着怎样的发展沿革?产品如何通过交互设计来把理念传达给用户? 编者注:7 月 19 日,由极客公园联合腾讯大讲堂开办的公开课「走进腾...

    腾讯大讲堂
  • 跨平台开发之~ VSCode开发第一个C程序

    VSCode的安装就不讲了,可以参考这个(http://www.cnblogs.com/dunitian/p/6661644.html) 写一个简单的C,然后F...

    逸鹏

扫码关注云+社区

领取腾讯云代金券