Wechat webpage local development jsSDK interface debugging configuration

Test no.

Wechat configuration address

Use wechat login to obtain

• appId
• appsecret

Filling in the Server Configuration

Verify that the message is indeed from the wechat server

Configuration Guide Address

Configure URL and Token to respond to Token authentication sent by wechat

Server Configuration

The demo address is at the bottom of the article

Wechat server will send a GET request to the filled server address URL, with parameters as shown in the following table:

Local development configuration

Local development can be done in a way that does not require backend coordination

Preparing the server

• Write your own Node server
• Write a GET interface using the callback address configured above
• The interface implementation does not strictly follow the validation in the access guide, since the local configuration returns success and parameters

Callback interface code

Pass directly without verifying correctness

export const checkSignature = (query) = >{
  const {signature, timestamp, nonce, echostr} = query;
  return echostr;
}
Copy the code

Verify parameter correctness

const config = require('config-lite')(__dirname);
import sha1 from 'crypto-js/sha1';

export const checkSignature = (query) = >{
  const {signature, timestamp, nonce, echostr} = query;
  const token = config.wxToken;
  const tmpArr = [token, timestamp, nonce].sort();
  //3. Concatenate the three parameter strings into one string for SHA1 encryption
  var tempStr = tmpArr.join(' ');
  const hashCode = sha1(tempStr).toString(); // Create an encryption type
  if(hashCode === signature){
    // Compare whether the encryption is consistent
    return echostr
  }else {
    return false}}Copy the code

JS Interface security domain name

Development of the document

After configuring the domain name, you can call the JS interface opened by wechat in this domain name

The local server generates the config

1. Access token

HTTPS request method: GET api.weixin.qq.com/cgi-bin/tok…

2. To get the ticket

Api.weixin.qq.com/cgi-bin/tic…

3. Generate signature signature

The rules for signature generation are as follows: the fields participating in the signature include noncestr (random string), valid jsapi_ticket, timestamp (timestamp), and url (the url of the current web page, excluding # and the following part). After sorting all parameters to be signed in alphabetical order according to the ASCII code of the field name, use the FORMAT of URL key-value pairs (key1= Value1 &key2=value2…). Concatenated to the string string1. Note that all parameter names are lowercase characters. Sha1 encrypts string1, using the original field name and value, without URL escape.

The signature = sha1 (string1). Example:

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
Copy the code

Step 1 Sort all parameters to be signed in alphabetical order based on the ASCII characters of field names, and use the URL key-value pair format (key1= ValuE1&key2 =value2…). Concatenated to the string string1:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0w zccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
Copy the code

Step 2. Create sha1 signature for string1.

0f9de62fce790f9a083d5c99e95740ceb90c27ed
Copy the code

Some code examples:

const config = require('config-lite')(__dirname);
import sha1 from 'crypto-js/sha1';
import http from '.. /.. /utils/http'
import {randomString} from '.. /.. /utils'

const {
  token,
  appId,
  secret
} = config.wx;
let accessToken = ' '; / / WeChat token
let accessTicket = ' '; / / WeChat ticket

// Check the jsApi callback
export const checkSignature = (query) = > {
  const {
    signature,
    timestamp,
    nonce,
    echostr
  } = query;
  const tmpArr = [token, timestamp, nonce].sort();
  //3. Concatenate the three parameter strings into one string for SHA1 encryption
  var tempStr = tmpArr.join(' ');
  const hashCode = sha1(tempStr).toString(); // Create an encryption type
  if (hashCode === signature) {
    // Compare whether the encryption is consistent
    return echostr
  } else {
    return false}}// Get the wechat JsAPI token
export const getToken = async() = > {if(accessToken ! = =' ') {
    return accessToken;
  }
  const res = await http.get('https://api.weixin.qq.com/cgi-bin/token', {
    grant_type: 'client_credential'.appid: appId,
    secret,
  });

  const {
    access_token,
    expires_in
  } = res;
  accessToken = access_token;

  setTimeout(() = > {
    accessToken = ' ';
  }, expires_in)

  return accessToken;
}

// Obtain wechat jsAPI ticket
export const getTicket = async (accessToken) => {
  if(! accessToken) {throw new Error('Access_token cannot be null');
  }
  const res = await http.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket', {
    access_token: accessToken,
    type: 'jsapi'});const {
    errcode,
    ticket,
    expires_in,
    errmsg
  } = res;
  if (errcode === 0) {
    accessTicket = ticket;
    setTimeout(() = > {
      accessTicket = ' ';
    }, expires_in)

  } else {
    throw new Error('Obtaining ticket failed${errcode}: ${errmsg}`)}return accessTicket;
}

// Get wechat configuration
export const getConfig = async (query) => {
  const token = await getToken();
  const ticket = await getTicket(token);
  const {
    url
  } = query;
  const nonceStr = randomString(16);
  const timestamp = ~~(new Date(a) /1000);
  const str = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`
  const signature = sha1(str).toString();

  return {
    signature,
    timestamp,
    nonceStr,
    appId,
  }
}
Copy the code

Local development configuration

• Host Indicates the local domain name. (The domain name rule must match the previously configured security domain name.)
• Vue. Config. js devServe public specifies the domain name pointed to by host
• You can use wechat developer tools for local development testing

Demo address (nodejs)

wechat-web-server