vue ＋微信获取用户信息

vue ＋微信获取用户信息

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

微信网页授权

微信公众号网页授权配置，详见官网
关于网页授权的两种scope的区别说明（详细见官网）
－scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面，不需要用户操作
－scope=snsapi_userinfo 获取微信用户详细信息（昵称，头像等），需要用户手动点击授权，当点击允许时，会跳转业务页面（类似于关闭弹窗），点击拒绝时会推出页面，授权如图：

⚠️用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。
分享页面的实际链接：
⚠️ 当前页面的链接需要 encodeURIComponent( url ) 编码

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE
// APPID: 公众号的appid
// REDIRECT_URI：当前页面的链接，需要编码
// scope： snsapi_base / snsapi_userinfo
// 其他值均不用改动

点击允许后跳转的链接是 REDIRECT_URI + code=CODE&state=STATE。
⚠️ 此处的code可以用来调取接口获取微信用户的相关信息
⚠️ 每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
－官方说法code只能被使用一次，在H5页面中，如果有跳转的情况，再返回当前页面，微信会判断是否已经授权，如果授权过，则code返回的还是上一次的code，而你如果用code调取用户信息（code已失效）会报 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ]，所以在第一次获取用户信息的时候就可以将该用户信息存储在本地
需要获取用户信息，且二次分享的问题
虽然当前页面没有问题，但是当前微信用户使用微信进行二次分享，则微信会分享当前页面的链接（不包含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&amp;studentId=${this.$route.query.studentId}&amp;activityId=${this.$route.query.activityId}`let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&amp;redirect_uri=${encodeURIComponent(_nowUrl)}&amp;response_type=code&amp;scope=snsapi_userinfo&amp;state=STATE#wechat_redirect`window.location.href = _shareUrlreturn
}

// 处理微信用户信息handleWechatMsg(code) {// 调取 获取微信用户信息的接口（后端参考微信官方文档进行封装）   code－－参数api.getWechatInfo(code).then((res)=&gt;{if(res.data.code == 200) {// 返回的是json字符串let _data = res.data.contentlet _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，如果没有，可以展示微信公众号的二维码，供用户识别关注

⚠️－－－－－－－－－－－－－－－－－－－－

当前页面的域名，需要在公众号后台配置添加（详见官网）
如果页面存在＃，可能会出问题，可以使用nginx进行配置

来源：https://segmentfault.com/a/1190000018588151

vue ＋微信获取用户信息相关推荐

2.3 业务实现（微信获取用户信息详解）
在业务实现部分,我们主要介绍微信服务号获取用户信息授权机制以及如何通过该机制进行编程实现用户信息获取. 在微信服务号开发中,常常需要对用户的信息进行获取,以便程序能够识别用户的标识,并有针对性的与用户 ...
微信获取用户信息 ”微信用户“
微信获取用户信息 "微信用户" 微信小程序调用getUserProfile库的时候显示"微信用户" ,不显示微信头像和昵称的情况原因是: 由于版本太高选择低于 ...
企业微信获取用户信息响应40029(微信小程序与公众号出现类似问题应该是同样的原因)
企业微信获取用户信息响应40029 在对接企业微信的时候需要通过code去获取userId,但是会返回40029的error码,经过测试与验证原因是访问地址 https://open.weixin.q ...
微信获取用户信息访问授权管理
define( "WX_APPID" ,$appid); //公众号的appid define( "WX_SRC" , $screat ); 公众号seceat ...
java微信获取用户信息_SpringBoot中获取微信用户信息的方法
前言不知道你是否参加过拼多多上邀请微信好友砍价功能,这个功能实现首先需要考虑的就是获取微信用户的信息.获取用户信息就是获取公众号下微信用户的信息,今天我就来讲讲如何从公众号下获取微信用户信息. 需要 ...
【Chapter2】微信获取用户信息（昵称、头像、openid）
一.简介制作微信小程序,第一步就是获取使用者信息,这样保存在数据库里,可以更好地对用户信息进行管理.操作.因此我们需要用户一个独一无二的凭证,就像超市里给每个客户制作的超市优惠卡,每个卡号是顾客进入 ...
java微信获取用户信息接口_java微信接口之二—获取用户组
一.微信获取用户组接口简介 1.请求该请求也是GET方式请求.请求的url格式如下: https://api.weixin.qq.com/cgi-bin/groups/get?access_toke ...
H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)
开始开发最后更新:2019/08/08 企业微信提供了OAuth的授权登录方式,可以让从企业微信终端打开的网页获取成员的身份信息,从而免去登录的环节. 企业应用中的URL链接(包括自定义菜单或者消息 ...
微信公众号开发之获取用户信息
微信获取用户信息的方式有两种,静默授权(无需用户同意)和非静默授权(需要用户" 手动点击 "拉取授权,可以用户无需关注公众号即可获取用户信息) 整体的代码请查看最后,前边为原理介绍 ...

vue ＋微信获取用户信息

vue ＋微信获取用户信息相关推荐

最新文章

热门文章

vue ＋ 微信获取用户信息

vue ＋ 微信获取用户信息相关推荐

最新文章

热门文章

vue ＋微信获取用户信息

vue ＋微信获取用户信息相关推荐