你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

微信公众号授权给h5

2021-11-25 14:13:13

首先放上官方文档

获取公众号授权可以获取到用户的openId,可以通过openId获取到用户的昵称、性别、所在地等信息

获取授权的流程:

首先需要用户打开或者跳转到授权页,用户点击统一后跳转到我们设置的回调页面(比如项目首页)
授权后跳转回来的页面,url上会有code,我们把code传到后端,换取openId
完成…
1、首先是配置网页授权域名
在微信公众平台中左侧菜单拉到底,选择公众号设置,然后下边有个网页授权域名,输入需要授权的域名后,不要忘了把设置页面中的文件扔给后端

2、跳转授权页
配置好域名后,通过https://open.weixin.qq.com/connect/oauth2/authorize…链接跳转到授权页面,获取授权后在url中拿到code传给后端就可以了

授权链接的详细配置:

var url = ‘https://open.weixin.qq.com/connect/oauth2/authorize?’ +
‘appid=你的公众号appId’ + // #1
‘&redirect_uri=获取授权成功后重定向的url’ + // #2
‘&response_type=code’ + // #3
‘&scope=snsapi_base或snsapi_userinfo’ + // #4
‘&state=跳转回redirect_uri后带的参数’ + // #5
‘#wechat_redirect’
1
2
3
4
5
6
7
解释:

#1 appid:直接传入你得公众号AppId就可以,AppId的保密等级不高,所以不用担心直接暴露在URL中
#2 redirect_uri:打开授权页面后,用户点击后,会回调到redirect_uri页面,需要使用encodeURIComponent方法对url进行处理
#3 response_type:固定填写字符’code’
#4 scope:scope有两个可选值 1、snsapi_base:不弹出授权页面,直接跳转,只能获取用户openId 2、snsapi_userinfo:出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息(如果用户关注了公众号,snsapi_userinfo也不会弹出授权页面)
#5 state:跳转回来以后url中所带的参数,只能填写a-zA-Z0-9的参数值,最多128字节 例:redirect_url填写的是百度,回调后地址http://www.baidu.com/?state=aaaaaaaaa
#6 #wechat_redirect: 必填
问题
1、传参问题
因为微信接口中只提供了state传参,所以导致我们跳转到redirect_uri对应的url后,需要的传参很多没办法传或者需要传的名字必须是某个值而不是state

解决办法 其实我们可以直接把参数拼接在redirect_uri地址的后边,比如我需要统计网页的进入渠道,需要在url上传参utm_source=xxxx,我们可以直接拼到redirect_uri后

比如CSDN的网站后边要拼接utm_source=baidu、userName=xuanxing
那么网站地址就是https://www.csdn.net/?utm_source=baidu&userName=xuanxing
不要忘了对地址进行转码encodeURIComponent(‘https://www.csdn.net/?utm_source=baidu&userName=xuanxing’) // https%3A%2F%2Fwww.csdn.net%2F%3Futm_source%3Dbaidu%26userName%3Dxuanxing
redirect_uri=https%3A%2F%2Fwww.csdn.net%2F%3Futm_source%3Dbaidu%26userName%3Dxuanxing
2、跳转问题
因为微信的授权是跳转到他的授权页面然后再跳转回来,虽然微信授权页的跳转是用的replace,但是在整个跳转过程(我们的页面 -> 微信授权页面 -> 我们的页面)中,还是会产生一次路由,即使我们跳转用的都是replace。这个问题会导致用户在首页后退时体验不太友好

这个问题我目前还没有找到最优的解决办法,各位大佬们如果有好的办法麻烦帮帮小弟,不过暂时有两个不太完美的解决方法
以放在公众号底部自定义菜单作为例子

不经过我们的页面,直接把页面地址配置成微信授权页面的地址,这样会直接进入微信授权的页面,微信授权页面 -> 我们的页面 这个过程中不会产生路由,可以解决跳转问题,缺点是需要配置的url过长,而且只适用与每次进入必须需要授权的页面
在这里插入图片描述

第一次获取到code并且和后端交互拿到token/openId后,存在localStorage中,在请求数据时,如果token过期,再跳转到微信授权页面,这样虽然还是会有两次跳转的问题,但是会极大的减少了用户不良体验的次数

------end------