作为未上线的产品,我们如何让用户点击授权链接后可以拿到code呢?
不可能搞个服务器,把代码部署上去进行测试吧,这也太麻烦了。。
有问题就会有解决方案~:
在本地开发阶段,我们可以使用内网穿透工具将本地服务转换为外网可以访问的网址~
这里挂一个我目前在用的内网穿透工具:NATAPP -
有需要的自行配置。
接下来,我们就可以借助内网穿透的工具来获取微信用户授权后,微信服务器返回的code啦~
在后台,编写接收code的接口:
// 网页授权里的access_token 和 微信公众号里的access_token不是一个东西
app.get(‘/weapp_qauth_code’, async (req, res) => {
console.log(req.query);
const CODE = req.query.code;
const state = req.query.state;
console.log(CODE);
})
本地启动后台,然后使用内网穿透工具将本地后台服务转换为外网可访问的接口。
比如原来是:
借助内网穿透工具后,外网可访问的链接就为:
http://reh37g.natappfree.cc/jsApi
当然,不是所有的链接让微信用户授权的链接都能让微信服务器正确返回code。
我们需要将服务器的ip填写在测试号页面的指定位置才可以:
在后台服务启动的情况下,将使用内网穿透生成的域名填写在如下两个地方:
(1)接口配置信息修改模块
点击修改,填写URL和token。token可以随便写。
填写完点击提交,正常情况下是提示配置成功。
如果失败了,有可能是以下两个原因:
-
后台服务没启动
-
url填写错误,建议直接粘贴,不要手动输入
(2)点击网页服务-网页账号-修改
将内网穿透生成的域名粘进弹出窗口的输入框中。注意,这里的域名不要加Http://这种前缀
完成上述两项配置,并保证后台服务启动的情况下,我们就可以进行测试啦:
在微信里找个群或好友发送微信授权链接:
让用户点击示例链接进行授权。授权成功的话,后台写好的接口应该就会收到微信服务器返回的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));
})
基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-SEetR6bQ-1714560325264)]
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
[外链图片转存中…(img-UWpjCeCs-1714560325265)]
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。