使用微信开发者工具调试微信网页授权登录-react

转：https://www.jianshu.com/p/9ced1a297c95

1.使用localhost本地调试

1. 使用微信开发者工具, 选择微信网页授权, 微信团队为广大的开发者提供了一个测试账号。该帐号无需公众账号，快速申请接口测试，直接体验和测试公众平台所有高级接口。这么好用的功能，只需要要你有一个手机，手机上安装了一个微信即可。
   地址：
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
   登录后，会得到一个微信号，和测试好的相关信息。appID,appsecret。
2. 扫描测试号二维码, 并关注公众号.在网页服务的网页账号中点击修改,填入127.0.0.1:8080(没有http)
3. 组装授权Url.
   https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
   把参数替换成自己的参数, appid填入测试号的appid, REDIRECT_URI填入 经过encodeURIComponent()的参数,SCOPE填入snsapi_userinfo, state=#wechat_redirect即可 eg:https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef450dbeb79f6c72&redirect_uri=http://5ed286c2.ngrok.io/wx/mp&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect
4. 把组装后的url填入微信开发者工具地址栏中就可以发起授权弹窗了

2.使用ngrok映射本机ip使外网可以访问.

1. 申请ngrok账号(https://ngrok.com), 经过官网四步后,生成一个可在外网访问的域名
2. 在测试账号的域名中添加自己生成的域名(不要加http和端口)
3. 组装url 访问调试

作者：sologuy
链接：https://www.jianshu.com/p/9ced1a297c95
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。