在本地测试微信登陆

在作微信登陆的时候，但愿能在本地可以测试登陆。这里使用的是微信开放平台的网站应用微信登陆, 与微信公众平台不一样，微信开放平台并无提供测试号的服务，所以在调试起来会十分的麻烦。比较传统的方法就是部署上测试服务器上专门先测试这一个接口。但从流程上来讲，会比较麻烦，不够高效。下文将分享另外一种测试的过程。

代码编写

首先在页面引入微信的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再进行测试登陆，登陆完毕后就能拿到用户数据了。

参考资料

• whistle
• 网站应用微信登陆开发指南

原文出处： https://anran758.github.io/bl...