乐趣区

在本地测试微信登录

jiezi

在做微信登录的时候，希望能在本地能够测试登录。这里使用的是 微信开放平台 的网站应用微信登录, 与 微信公众平台 不同，微信开放平台 并没有提供测试号的服务，因此在调试起来会十分的麻烦。比较传统的方法就是部署上测试服务器上专门先测试这一个接口。但从流程上来说，会比较麻烦，不够高效。下文将分享另一种测试的过程。

代码编写

首先在页面引入微信的 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…

退出移动版