一、实现步骤
2 第二步：通过code换取网页授权access_token
4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
二、准备材料
一个服务号(已认证)，确保网页授权权限已开通
三、实现步骤
1. 点击修改，跳转到公众号设置页，此处需要添加一个域名文件校验
2. 通过authorize获取的code
调用open.weixin.qq.com/connect/oau… 我这里写了一个简单HTML，用来发起调用接口:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
</head>
<style>
</style>
<body>
<div id="container">
</div>
<script>
window.appId = `${appId}`
//注意：此处redirect_uri需要使用encodeURIComponent(该方法浏览器自带)转义
let local = "http://xxx"
// 跳转到授权页面
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
window.appId +
"&redirect_uri=" +
encodeURIComponent(local) +
"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
</script>
</body>
</html>
3. 参数说明
snsapi_base与snsapi_userinfo属于微信网页授权获取用户信息的两种作用域
-
snsapi_base只能获取access_token和openId
-
snsapi_userinfo可以获取更详细的用户资料，比如头像、昵称、性别等，该种形式会唤醒授权页面
4. 调用接口获取access_token
api.weixin.qq.com/sns/oauth2/…
返回值如下
{
"access_token":"accesstoken",
"refresh_token":"refreshtoken",
"openid":"openId",
"scope":"snsapi_userinfo",
"expires_in":7200
}
5. 根据accessToken和openId查询用户信息
调用api.weixin.qq.com/sns/userinf…
返回值如下
{
"country":"",
"province":"",
"city":"",
"openid":"openid",
"sex":0,
"nickname":"sum墨",
"headimgurl":"xxx",
"language":"",
"privilege":[]
}
三、常见错误码发生情况
{
"errcode":40029,
"errmsg":"invalid code, rid: 620e3db2-410d5515-117f31ac"
}
这种问题一般都发生在code上，要检查code是不是有值并且是不是重复调用了
