When you do WeChat login, you want to be able to test the login locally. The website application of WeChat of WeChat open platform is used here. Different from the WeChat public platform, the WeChat open platform does not provide the service of test number, so it will be very troublesome to debug. A more traditional approach is to test this interface exclusively on the test server on the deployment. But from the process, it will be more troublesome, not efficient enough. The next section will share the procedure for another type of testing.

The code

First introduce the JS file of WeChat into the page:

<script src="//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

Then instantiate the login object on the login page:

<! -- 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 receives an object whose properties are shown below. The appid, scope, redirect_uri, and state properties of the object are returned by back-end control.

parameter Whether must instructions
self_redirect no True: If the phone clicks “OK” to redirect_uri in the iframe, false: If the phone clicks “OK” to redirect_uri in the top window, it will redirect_uri in the top window Default is false.
id is The third party page displays the container ID of the QR code
appid is The unique identification of the application will be obtained after the application is submitted to the WeChat open platform for approval
scope is Application authorization scopes, which have multiple scopes separated by commas (,), web applications currently just fill in snsapi_login
redirect_uri is To redirect the address, you need to go to UrlEncode
state no Used to maintain the state of the request and callback, authorizing the request and bringing it back to a third party as is. This parameter can be used to prevent CSRF attacks (cross-site request forgery attacks). It is recommended that third parties bring this parameter. It can be set to a simple random number plus session for verification
style no Provide “black”, “white” optional, the default is black text description. See the FAQ at the bottom of the document
href no Custom style links allow third parties to override default styles according to their actual needs. See the FAQ at the bottom of the document

This method generates a QR code and mounts it on the specified container ID. When the user scans the QR code, the page will send a request to the WeChat server to wait for the user’s confirmation. After the user’s confirmation, the page will be redirected to the specified path (redirect_uri).

So now the question becomes: with WeChat redirection address set in the open platform redirect the domain name is consistent, that is to say we are in the local development on localhost: 8080 this is no good. At this point, we will want to change the hosts, but just change the hosts will not work, also need to change the port. This is where shistle comes in.

shistle

Whistle is a cross-platform Web debugging agent based on Node. It is mainly used to view and modify HTTP, HTTPS, WebSocket requests and responses. It can also be used as an HTTP proxy server. We can use it for forwarding:

Install Whistle via NPM:

# Whistle NPM install -g whistle # Whistle w2 start # Whistle w2 start -p 9000 # Whistle w2 start -p 9000

After the installation, the command line prompts you to enter Whistle’s console (the default startup URL is 127.0.0.1:8899), but you can’t capture the package directly at this time. You need to configure the agent to use it.

The proxy can be configured using either a global proxy or a browser proxy, with the latter being the preferred option. I am a Chrome browser user, so I can install the SwitchyOmega proxy plugin, fill in the configuration information of SHistle, and remember to switch the mode of the plugin after saving the configuration.

To block HTPPS requests, you also need to install the root certificate,

Next, go to Whistle’s console, click on Rules, and configure the address where you want to proxy or forward. This configuration rule is similar to setting hosts.

After setting up rules, the local development of http://localhost:8020/#/login with http://test.anran758:8020/#/login test login again, can get the user data after login.

The resources

  • whistle
  • Use WeChat to log in to the development guide

The original source: https://anran758.github.io/bl…