uniapp H5 微信网页授权
官方文档上已经写的很明白了 这里就简单记录下要注意的地方
背景
H5项目需要用户微信支付 微信支付要拿到微信用户的openid 而openid则需要进行微信授权拿到
用户同意授权,获取code
这一步需要前端直接打开一个链接,连接中携带着需要的参数,这里链接参考官方链接
1.授权方式scope
静默授权:snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid)
非静默授权:snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
2.回调地址redirect_uri
前提:回调地址的域名需要在公众号上进行配置,正式的域名,需要进行备案的,所以在测试期间,后端会有一个测试公众号,上面可以配置本地的域名,比如:192.168.xx.xx,配置的时候不需要加http。
回调地址就是用户同意授权之后会跳转的页面,页面链接会携带我们需要拿到的code参数
3.appid
appid要在关联的公众号里面拿到,测试公众号的appid和正式公众号的appid不一致,建议写在全局,方便修改
获取appid
const appid = import.meta.env.VITE_APP_ID
const redirect = encodeURIComponent(
`${window.location.origin}/fx/pages/my/index`
)
const openUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}
&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
window.open(openUrl)
授权成功获取code
上面参数配置成功的话,这一步就很简单了,回调地址后会跟着code参数,
注意:如果是直接在微信浏览器里面打开链接,在右上角点击复制链接后面是没有code的,其实是有code的,但复制链接就是没有,可能是微信这里做了限制,直接在页面上打印出来就是有了,拿到code之后调用后端接口就可以了
onLoad(async (options) => {
login_code.value = options.code
if (login_code.value) {
//业务逻辑处理
getLogin()
}
})