微信公众号静默网页授权(前端开发、当地调试及上线)
首页，要在公众号后台进行配置用管理员/开发人员的账号，登录“微信公众平台”：https://mp.weixin.qq.com/
1、打开 【设置与开发】 -【开发者工具】 -【web开发者工具】
https://i-blog.csdnimg.cn/direct/ba1c87c5421c4cdaae453a73647fa186.png
2、配置网站域名，就是上线后的后端接口域名，下方图片中的业务域名、js接口安全域名、网页授权域名 ，都需要配置
https://i-blog.csdnimg.cn/direct/a209e68052274c75b209ef7e9843cad3.png
3、添加开发者微信号，然后必须在“微信开发者工具”登录这个账号，才气进行当地调试
要求要关注“公众平台安全助手”公众号，且不能开免打搅
https://i-blog.csdnimg.cn/direct/a5d4e222f7a24aa59f054128cdbdf6d7.png
当地调试(微信开发者工具)
配置公众号平台的测试账号、调试
在【设置与开发】-【开发者工具】-【公众平台测试账号】，点进去。
https://i-blog.csdnimg.cn/direct/1a475fb4219d4b4f9d185a2f559175c7.png
在这里，微信官方提供了一个测试号，当地调试的话，先这个测试号来调网页授权功能。后期部署到线上，再换成自己的公众号的appId和配置线上后端的域名，这是后面当地调试没问题了，再放到线上到这一步。
https://i-blog.csdnimg.cn/direct/ebab6ef7a46a4b4a90078db2828f5a2c.png
在下方找到【网站授权获取用户基本信息】，点修改，输入你当地启动的项目IP地址了，注意，只输入IP，不要输入http://，也不要端口，默认端口是80
这是因为微信重定向不支持带端口的访问域名，配置80端口，就可以只输入网址，所以启动的项目端口也必须设置成80端口
https://i-blog.csdnimg.cn/direct/3c3cf1131ea6403fbf525c095a93ef4b.png
https://i-blog.csdnimg.cn/direct/fb183b35ede4486f99db7ab2158a9779.png
末了一步，调试：打开微信开发者工具 -> 公众号网页项目 -> 在地址栏中输入启动后的地址
代码
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=测试号的appid&redirect_uri=" +
"http://192.168.03.130/${这里可以拼你要跳转的路由，不拼则默认跳到首页，例如/pages/home}" +
"&response_type=code&scope=snsapi_base#wechat_redirect";
参数阐明appid公众号的appidredirect_uri授权后重定向的回调链接地址，比方授权成功后，希望进入到绑定手机号的页面(假设是/pages/bindPhone)，就可以写http://192.168.03.130/pages/bindPhoneresponse_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就去授权
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]