vue + 微信猎取用户信息

vue + 微信猎取用户信息

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

微信网页受权

  1. 微信民众号网页受权设置,详见官网
  2. 关于网页受权的两种scope的区分申明 (细致见官网)
    -scope=snsapi_base 猎取微信用户openid,猎取后直接跳转营业页面,不须要用户操纵
    -scope=snsapi_userinfo 猎取微信用户细致信息(昵称,头像等),须要用户手动点击受权,当点击许可时,会跳转营业页面(类似于封闭弹窗),点击谢绝时会推出页面,受权如图:
    《vue + 微信猎取用户信息》
  3. ⚠️用户管理类接口中的“猎取用户基本信息接口”,是在用户和民众号发生音讯交互或关注后事宜推送后,才依据用户OpenID来猎取用户基本信息。这个接口,包括其他微信接口,都是须要该用户(即openid)关注了民众号后,才挪用胜利的。
  4. 分享页面的现实链接:
    ⚠️ 当前页面的链接须要 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
    // 其他值均不必修改
  5. 点击许可后跳转的链接是 REDIRECT_URI + code=CODE&state=STATE。
    ⚠️ 此处的code能够用来调取接口猎取微信用户的相干信息
    ⚠️ 每次用户受权带上的code将不一样,code只能运用一次,5分钟未被运用自动逾期。
    -官方说法code只能被运用一次,在H5页面中,假如有跳转的状况,再返回当前页面,微信会推断是不是已受权,假如受权过,则code返回的照样上一次的code,而你假如用code调取用户信息(code已失效)会报 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ],所以在第一次猎取用户信息的时刻就能够将该用户信息存储在当地
  6. 须要猎取用户信息,且二次分享的题目
    虽然当前页面没有题目,然则当前微信用户运用微信举行二次分享,则微信会分享当前页面的链接(不包括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举行设置
    原文作者:桃小妖
    原文地址: https://segmentfault.com/a/1190000018588151
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞