How to set up Wechat JS SDK?

Photo by Daria Nepriakhina on Unsplash

Want to do let your user login through WeChat on your website?

Want to sell something through WeChat on your website?

You might need to implement WeChat JSSDK. In case you’re still wondering if you need it, click here.

Prerequisites:

A WeChat Official Account, Subscription/Service/WeChat Work

If you’re just dabbling, Sandbox account

WeChat Web Developer Tool (For debugging)

Official Document

What is WeChat JSSDK doing anyway?

It enables your website to access WeChat’s native mobile capabilities, such as getting user’s GPS location, sharing, scanning QRcode, etc.

Preparation before Coding

1. AppID and AppSecret (Either from the sandbox account or official account’s Basic Configuration)
2. Whitelist Domain Name

• Write domain without http or https.
• For example: http://test.com, only write test.com

For Sandbox account:

You can use IP address or localhost for sandbox account

For the actual account:

Tips for the production environment:

Server IP also needs to be whitelisted.

The domain name needs to have ICP

Add the .txtfile provided at the location shown above at root level for Tencent to confirm your ownership of the website

Backend

Business-server is your backend server

This could be even more complicated if you have to generate the signature and parse the XML response from Wechat server. That’s why we will use a library.

JasonBoy/wechat-jssdk

Steps to get it up and running

1. Clone the code: https://github.com/davidyu37/WeChat-JSSDK-Backend
2. Do npm install or yarn install
3. Create a .env file on the same directory level of app.js
4. Add your AppID and AppSecret there

APP_ID=somealphabetsandnumbers
APP_SECRET=somealphabetsandnumbers

5. Do npm start or if you have nondemon run npm run dev for auto-restart

6. If nothing horrible went wrong, you should have a route /get-signature running on your localhost:4000

Frontend

Below is the code for the original WeChat JSSDK. The parameters in bold are the params that we will get from our backend server /get-signature

wx.config({

    debug: true, // turn on debug mode, call all return value of api, which will be in alert in client's end. To view the incoming parameters, this cane be opened on a pc, the parameter information will be displayed through a log, only to be printed on a pc.
    appId: '', // Required
    timestamp: , // Required
    nonceStr: '', // Required, Random String
    signature: '',// Required
    jsApiList: [] // Required, required JA interface list, all JS interface list, see Appendix 2

});

The most important points for front-end implementation:

// Make sure it's the url that you have whitelisted in WeChat Official Account Dashboard
const url = window.location.href.split('#')[0];
// If you want to test on your device, be sure to use your IP address instead of localhost
// Use encodeURIComponent so special characters don't mess up your url
const YourBackEndUrl = `http://localhost:4000/get-signature?url=${encodeURIComponent(url)}

If you happen to use React, you can clone the demo here: https://github.com/davidyu37/WeChat-JSSDK-Frontend

If you like original flavor, here’s the link to WeChat JSSDK source code: http://res.wx.qq.com/open/js/jweixin-1.2.0.js

How to debug?

Download WeChat Web Developer Tool

Conclusion

There are a lot more to WeChat related development. If you would like to learn more about it, I put together a free WeChat glossary just for you.