内容简介:在做微信登录的时候,希望能在本地能够测试登录。这里使用的是首先在页面引入微信的然后在登录页上实例化登录对象:
在做微信登录的时候,希望能在本地能够测试登录。这里使用的是 微信开放平台 的 网站应用微信登录 , 与 微信公众平台 不同, 微信开放平台 并没有提供测试号的服务,因此在调试起来会十分的麻烦。比较传统的方法就是部署上测试服务器上专门先测试这一个接口。但从流程上来说,会比较麻烦,不够高效。下文将分享另一种测试的过程。
代码编写
首先在页面引入微信的 js
文件:
<script src="//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
然后在登录页上实例化登录对象:
<!-- login.vuw --> <template> <div class="container"> <div id="login_container"></div> </div> </template> <script> // other code ... export default { // other code ... mounted() { APIs.login({ redirect_uri: Base64.encode('http://apitest.anran758.com') }).then(res => { /* eslint-disable no-new */ new WxLogin({ id: 'login_container', // appid: "", // scope: "", // redirect_uri: "", // state: "", // style: "", // href: "" ...res.data }); }) }, }; </script>
WxLogin
接收一个对象,对象属性如下所示。其中对象里的 appid
, scope
, redirect_uri
, state
四个属性是由后端控制返回的。
参数 | 是否必须 | 说明 |
---|---|---|
self_redirect | 否 | true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri,false:手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。 |
id | 是 | 第三方页面显示二维码的容器id |
appid | 是 | 应用唯一标识,在微信开放平台提交应用审核通过后获得 |
scope | 是 | 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可 |
redirect_uri | 是 | 重定向地址,需要进行UrlEncode |
state | 否 | 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验 |
style | 否 | 提供"black"、"white"可选,默认为黑色文字描述。详见文档底部FAQ |
href | 否 | 自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部FAQ |
该方法会生成一个二维码,并挂载到指定的容器 ID 上。用户扫描二维码时,页面会向微信服务端发送一个请求等待用户确认,用户确认完成后,就会将页面重定向至指定的路径(redirect_uri)。
那么现在问题就来了:重定向的地址要跟 微信开放平台 里设置的重定向的域名一致,就是说我们在本地开发起的 localhost:8080
这种是不行的。
这时我们就会想到了去修改 hosts
,但光改 hosts
是不行,还需要改端口。。这时就可以用到 shistle
了。
shistle
whistle 是基于Node实现的跨平台web调试代理工具,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用。我们可以使用它来进行转发:
通过 npm 来安装 whistle:
# 全局安装 whistle npm install -g whistle # 启动 whistle w2 start # 指定端口号来启动 whistle w2 start -p 9000
安装完毕后命令行提示我们可以进入 whistle 的控制台(默认启动的 URL 是 127.0.0.1:8899),但此时还不能直接抓包,还需要配置代理才可以使用.
配置代理可以使用全局代理或浏览器代理,比较推荐的做法是使用后者。我个人习惯使用 chrome
浏览器,因此可以安装 SwitchyOmega 代理插件,将 shistle 的配置信息填入,保存配置后记得切换插件的模式噢。
想要拦截 HTPPS
的请求的话,还需要 安装根证书 ,
接着进入 whistle 的控制台, 点进 rules , 配置需要代理或转发的地址。这个配置规则类似于设置 hosts.
设置好 rules 后,将本地开发的的网址 http://localhost:8020/#/login
替换为 http://test.anran758:8020/#/login
再进行测试登录,登录完毕后就能拿到用户数据了。
参考资料
以上所述就是小编给大家介绍的《在本地测试微信登录》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 渗透测试技巧:绕过SQL Server登录触发器限制
- Vue.js 实现用户登录退出和 e2e 测试
- beego实现用户未登录跳转到登录页面
- Django实现小程序的登录验证功能,并维护登录态
- 【Python3爬虫】破解时光网登录加密参数并实现模拟登录
- iTerm2结合 expect 脚本实现 ssh 登录跳板机后登录指定服务器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。