微信公众号静默网页授权(前端开发、本地调试及上线)
诗思雅 2024-09-06 13:03:07 阅读 94
首页,要在公众号后台进行配置
用管理员/开发人员的账号,登录“微信公众平台”:https://mp.weixin.qq.com/
1、打开 【设置与开发】 -【开发者工具】 -【web开发者工具】
2、配置网站域名,就是上线后的后端接口域名,下方图片中的业务域名、js接口安全域名、网页授权域名 ,都需要配置
3、添加开发者微信号,然后必须在“微信开发者工具”登录这个账号,才能进行本地调试
要求要关注“公众平台安全助手”公众号,且不能开免打扰
本地调试(微信开发者工具)
配置公众号平台的测试账号、调试
在【设置与开发】-【开发者工具】-【公众平台测试账号】,点进去。
在这里,微信官方提供了一个测试号,本地调试的话,先这个测试号来调网页授权功能。后期部署到线上,再换成自己的公众号的appId和配置线上后端的域名,这是后面本地调试没问题了,再放到线上到这一步。
在下方找到【网站授权获取用户基本信息】,点修改,输入你本地启动的项目IP地址了,注意,只输入IP,不要输入http://,也不要端口,默认端口是80
这是因为微信重定向不支持带端口的访问域名,配置80端口,就可以只输入网址,所以启动的项目端口也必须设置成80端口
最后一步,调试:打开微信开发者工具 -> 公众号网页项目 -> 在地址栏中输入启动后的地址
代码
<code>window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=测试号的appid&redirect_uri=" +
"http://192.168.03.130/${这里可以拼你要跳转的路由,不拼则默认跳到首页,例如/pages/home}" +code>
"&response_type=code&scope=snsapi_base#wechat_redirect";
参数 | 说明 |
---|---|
appid | 公众号的appid |
redirect_uri | 授权后重定向的回调链接地址,例如授权成功后,希望进入到绑定手机号的页面(假设是/pages/bindPhone),就可以写http://192.168.03.130/pages/bindPhone |
response_type | 返回类型,就填code就可以了号 |
scope | 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 ) |
state | 重定向会带上state参数,可填a-zA-Z0-9,就是路由参数,例如state=123,那么在/pages/bindPhone 页面中就可以拿到这个参数了 |
#wechat_redirect | 必带 |
到最后会跳转到
/pages/bindPhone?code=CODE&state=123
我们做这些授权的目的就是为了得到code,code这个玩意就是得到access_token的敲门砖,code每次授权都不一样,每次的code只能使用一次,5分钟过期
拿到code之后,就可以跟后端换token了~
一般会把获取code 和 授权跳转到 https://open.weixin.qq.com
写在同一个页面的第一个生命周期里,有code时,就去换token,没有code就去授权
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。