![](https://private-user-images.githubusercontent.com/50656459/343173968-adc068d8-21e4-4210-8689-196f89c6950e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMjQxODYsIm5iZiI6MTcyNTIyMzg4NiwicGF0aCI6Ii81MDY1NjQ1OS8zNDMxNzM5NjgtYWRjMDY4ZDgtMjFlNC00MjEwLTg2ODktMTk2Zjg5YzY5NTBlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDIwNTEyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlhYTVlNzFkN2FiMmI2NTcwMTI4ZjYyYWJiMjdkZTlkYmE4ZmY4MmQ0ZTM5MjU0MDYzZWNjZGM5YWI0Y2NiMzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.9U0iy4PDHs2pigI0dDs-vJcQIB4rmE7jtIrvq76pHlg)
以下接口有微信的api请求形式和api工厂的sdk apifm-webapi调用形式;另外下文的access_token与基础支持的access_token不同 只是公众号的网页开发,不涉及微信公众号的其他接口
场景:如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。
首先要在公众后台增加回调域名,现在只有认证的服务号和测试号才能有权限调用这个功能,个人订阅号,个人订阅号未认证,未认证服务号都不能调用。在测试公众号的网页服务---网页账号---网页授权获取用户基本信息,修改回调页面域名
网页授权流程分为四步: 1. 引导用户进入授权页面同意授权,获取code 2. 通过code换取网页授权access_token(与基础支持中的access_token不同) 3. 如果需要,开发者可以刷新网页授权access_token,避免过期 4. 通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)
在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(已认证服务号,默认拥有scope参数中的snsapi_base和snsapi_userinfo 权限),引导关注者打开如下页面:
参考链接(请在微信客户端中打开此链接体验):
scope为snsapi_base:
scope为snsapi_userinfo:
前者是静默授权自动跳到回调页,后者需要用户手动同意授权
尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问
如果用户同意授权,页面将跳转至 {redirect_uri}/?code=CODE&state=STATE
。
这里的access_token同普通的access_token不一样,只能调用jssdk中的接口。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。该access_token过期时间同样是7200s
请求参数:
- appid
- secret: 公众号的appSecret
- code: 上一步返回的code
- grant_type: authorization_code
返回的JSON数据
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", // 用户唯一标识
"scope":"SCOPE",
"is_snapshotuser": 1,
"unionid": "UNIONID"
}
使用sdk:
WEBAPI.wxmpAuth({code: 'url中的code参数'})
// 返回data: openid, token, uid
同 用户管理 > 获取用户基本信息(UnionID机制)处的接口不同, ACCESS_TOKEN也不是一样的作用范围
需要网页授权作用域为snsapi_userinfo,拿上一步返回的ACCESS_TOKEN,openid请求接口
http:GET(请使用https协议):
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
返回数据
{
"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"
}
参数 | 描述 |
---|---|
openid | 用户的唯一标识 |
nickname | 用户昵称 |
sex | 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知 |
province | 用户个人资料填写的省份 |
city | 普通用户个人资料填写的城市 |
country | 国家,如中国为CN |
headimgurl | 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。 |
privilege | 用户特权信息,json 数组,如微信沃卡用户为(chinaunicom) |
unionid | 只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。 |
使用sdk:
WEBAPI.userWxinfo(token) // token 当前用户登陆凭证?应该是网页授权返回的token吧,
// 返回userId == 下面接口的base.id(后台里的用户编号), openId
WEBAPI.userDetail(token) // 这个是拉去的后台里面的用户信息;用户首次访问绑定过appId的公众号,会自动注册为用户
// 返回base.id, base.nick,base.userId != base.id
{
"code": 0,
"data": {
"unionid": "oFqSRwf0Bw2Qy2Dm3M0HIgbFRtHM",
"openid": "om3AQ0YaRp3RZtFuZ1Wgk0OdQjvA"
},
"msg": "success"
}
- 检验授权凭证access_token是否有效,需要传入access_token和openid
http:GET(请使用https协议):
https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID
WEBAPI.checkToken(token)
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
使用步骤
- 公众号设置 --- 功能设置,填写js安全域名
- 引入js,暴漏全局变量wx
- 调用wx.config,每个页面必须注入配置信息才能调用接口
- 通过wx.ready处理成功验证
wx.config其中涉及到加密,加密需要在后端执行
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: null, // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
如果使用api工厂的sdk,则
type SignType = {
appid: string // 小写吗?
timestamp: number,
noncestr: string,
sign: string
}
const res = await WEBAPI.jssdkSign('/jasonhuang/wx/jssdk/sign', 'post', postData)
const { code, data: SignType } = res
这样就可以调用wx js sdk的所有接口了,当然前提是你的公众号符号接口的调用资质
使用注意事项,在打开授权链接时,如果成功授权,则会跳到最终页面带上code参数,code只能使用一次,但是access_token有两个小时使用期,可以先缓存起来
WEBAPI.goodsDetail,即shop/goods/detail接口入参少了token参数
node版本:目前18.12.0可以运行
新建.env.local,配置VITE_APP_ID
- 解决微信开放平台二维码、头像canvas绘制跨域问题。html2canvas获取图片跨域 通过nginx反代
location ^~ /wechat_image/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified- Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
proxy_pass https://mp.weixin.qq.com/;
}
然后将获取微信二维码的地址由 [https://mp.weixin.qq.com/xxx] 改成[https://${域名}/wechat_image/xxx]