前端vue+后台node实现获取微信用户基本信息+调用微信JS-SDK（上篇）

最新推荐文章于 2024-07-23 09:33:44 发布

2401_84616533

最新推荐文章于 2024-07-23 09:33:44 发布

阅读量347

点赞数 4

分类专栏：程序员文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/2401_84616533/article/details/138607562

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

将内网穿透生成的域名粘进弹出窗口的输入框中。注意,这里的域名不要加Http://这种前缀

完成上述两项配置，并保证后台服务启动的情况下，我们就可以进行测试啦：

在微信里找个群或好友发送微信授权链接：

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=123#wechat_redirect（示例链接）

让用户点击示例链接进行授权。授权成功的话，后台写好的接口应该就会收到微信服务器返回的code~，至此完成第一步！

接下来进入第二步：通过code换取网页授权access_token

此步骤需要注意的是网页授权的access_token不是公众号开发接口的access_token，两者相互独立。

考虑到获取access_token需要给微信服务器发送APPSecret这种敏感性参数，因此通过code换取网页授权access_token这步由服务端（后台）来完成。

编写获取access_token的后台方法：

function getOauthAccessToken(CODE) {

return new Promise(async (resolve, reject) => {

const uri = https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=APPSECRET&code=${CODE}&grant_type=authorization_code;

resolve(await getRequest(uri));

})

}

修改微信授权后跳转的接口：

// 网页授权里的access_token 和微信公众号里的access_token不是一个东西

app.get(‘/weapp_qauth_code’, async (req, res) => {

const OAuthData = await getOauthAccessToken(CODE);

console.log(OAuthData);

})

正常情况下就可以获取到access_token了。

OAuthData这个对象里就包含access_token.下面为OAuthData对象的内容：

{

“access_token”:“ACCESS_TOKEN”,

“expires_in”:7200,

“refresh_token”:“REFRESH_TOKEN”,

“openid”:“OPENID”,

“scope”:“SCOPE”

}

接下来就进入第三步：刷新access_token（如果需要）

第二步中微信服务器返回的获取用户基本信息的access_token的有效时间为7200秒（2小时）。过期后需要再次获取。而且微信这边对获取accessToken操作有上限限制，因此我们需要在数据库中缓存accessToken.并在access_token即将过期之前，调用微信提供的刷新access_token的方法利用refresh_token刷新access_token.当然，refresh_token也有有效期，目前是一个月，当一个月之后，我们就需要重新获取access_token了

编写刷新access_token的后台方法：（大写字母请替换为具体的值）

function refreshToken() {

return new Promise(async (resolve, reject) => {

const uri = https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN;

resolve(await getRequest(uri));

})

}

然后在需要刷新的接口里调用该方法即可。

下列代码是微信服务器返回的refresh_token内容：

{

“access_token”:“ACCESS_TOKEN”,

“expires_in”:7200,

“refresh_token”:“REFRESH_TOKEN”,

“openid”:“OPENID”,

“scope”:“SCOPE”

}

接下来进入第四步：第四步：拉取用户信息(需scope为 snsapi_userinfo)")

通过第二步的access_token和openID来拉取用户的基本信息：

编写获取用户基本信息的方法：

function getOauthAccessUserInfo(accessToken,openID){

return new Promise(async (resolve, reject) => {

const uri = https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openID}&lang=zh_CN;

resolve(await getRequest(uri));

})

}

修改之前的接口：

// 网页授权里的access_token 和微信公众号里的access_token不是一个东西

app.get(‘/weapp_qauth_code’, async (req, res) => {

console.log(req.query);

const CODE = req.query.code;

console.log(CODE);

const OAuthData = await getOauthAccessToken(CODE);

console.log(OAuthData);

const userInfo = await getOauthAccessUserInfo(OAuthData.access_token, OAuthData.openid);

console.log(userInfo);

res.send(JSON.stringify(userInfo));

})

微信返回获取到的用户基本信息有:

{

“openid”: “OPENID”,

“nickname”: NICKNAME,

“sex”: 1,

“province”:“PROVINCE”,

“city”:“CITY”,

“country”:“COUNTRY”, “headimgurl”:“https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46”,

“privilege”:[ “PRIVILEGE1” “PRIVILEGE2” ],

“unionid”: “o6_bmasdasdsad6_2sgVt7hMZOPfL”

}

至此引导微信用户授权，获取用户基本信息的操作完成!

整合一下后台完整代码如下：