使用场景
在本地测试微信登录功能时,因为微信需要可以互联网访问的域名接口,所以本地使用花生壳做内网穿透,将前端服务的端口和后端服务端口进行绑定,获得花生壳提供的两个外网域名。
微信测试账号入口
绑定回调接口
回调接口的作用是,用户点击微信授权按钮,按钮会触发访问微信的一个链接,访问链接后微信会请求这个回调地址
微信的触发链接:
const weChatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
测试账号的配置:
上面是回调接口的地址,下面是改地址的域名,不需要写后面具体的接口和协议名称
然后,修改下方的网页授权获取用户基本信息 的接口地址,也修改为上面的安全域名
全部保存后,微信登录就没问题了。
问题解决
遇到两个问题:
一个是在上面设置回调接口,就是包含具体接口那块时,总是提示配置失败,打开该页面的开发者工具,发现在保存时其实是微信会调用该接口,而调用该接口失败了,提示:"errcode":-106,"errmsg":"token check fail",这个问题是因为,这个回调接口在默认的get方式下需要返回一个值,而这个值是这个get请求里面带的 echostr 参数,并且返回的值必须为int格式,这是一个Python示例:
另外一个问题是,在微信浏览器里面点击微信登录图标时,出现提示:redict_uri域名和后台配置不一致,错误码10003。出现这个的原因是因为 在测试账号页面的下面的网页授权获取用户基本信息没有配置回调域名,点击后面的修改,修改为上面填写过的回调域名,保存即可!