1. Steps for using JS-SDK

1.1 Domain Name Binding

• Public Number Settings:
  • Domain names that need to be filled in must be verified by ICP filing
• Use WeChat Test Number
  • JS Interface Secure Domain Name:
  • Focus on Test Public Number

1.2 Introducing js files

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

1.3 Config Interface Injection Rights Verification Configuration

All pages requiring JS-SDK must first be injected with configuration information, otherwise they will not be invoked (the same url only needs to be invoked once, and web app s for SPA s that change url can be invoked every time the url changes)

wx.config({
    debug: true, // Turn on debugging mode, and the return values of all APIs invoked will be displayed in the client alert. To view the incoming parameters, you can open them on the pc side, and the parameter information will be printed through the log, only on the pc side.
    appId: '', // Required, unique identification of public number
    timestamp: , // Required, time stamp for signature generation
    nonceStr: '', // Required, generate a random string of signatures
    signature: '',// Required, Signature, Signature Generation Algorithms See Appendix 1
    jsApiList: [] // Required, list of JS interfaces to use, all JS interfaces listed in Appendix 2
});

1.4 Successful validation through read interface processing

wx.ready(function(){
    // The read method is executed after the config information is validated. All interface calls must be made after the config interface gets the result. Cong is an asynchronous operation of the client. If you need to call the related interface when the page loads, you must place the related interface in the read function call to ensure correct execution.For interfaces that are called when triggered by the user, they can be called directly without being placed in the read function.
});

1.5 Handling failure validation through error interface

wx.error(function(res){
    // Failure to verify config information executes error functions, such as signature expiration that causes verification to fail. The specific error information can be viewed either by opening config's debug mode or by returning the res parameter, where the SPA can update the signature.
});

2. Front End Generation Signature

2.1 Get access_token

• access_token explanation
  • Access_token is the globally unique interface invocation credential for the public number, which calls each interface using access_token.
  • access_token must be stored in at least 512 character spaces.
  • access_token is currently valid for 2 hours and needs to be refreshed regularly
  • Duplicate fetches invalidate access_token obtained last time.
• Interface Call Request Description
  • Public numbers can use AppID and AppSecret to call this interface to get access_token
  • Request: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    • APPID
    • APPSECRET
  • Return: {"access_token": "obtained credentials", "expires_in": 7200}

2.2 jsapi_ticket token

• access_token obtained in the first step requests jsapi_ticket via http GET (valid for 7200 seconds, developers must cache jsapi_ticket globally in their own service)
• Request: https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
  • ACCESS_TOKEN

2.3 Signature Algorithm

• The fields participating in the signature include
• noncestr (random string)
• Valid jsapi_ticket
• timestamp
• URL (URL of the current page, excluding #and the rest)
• Sort all parameters to be signed by ASCII code of field name from smallest to largest (dictionary order)
• Use the format of URL key-value pairs (that is, key1=value1&key2=value2...)Stitch into string string1:
• Sha1 algorithm encryption for string1 (js-sha1 package provides functionality) to get signature
• Package: npm i js-sha1
• Introduce:
• var signature = sha1(sigStr);

Code

//1. Get access_token first
//2. There is a jsapi_ticket token to invoke JS-SDK
// 3. Preparing for signature
        var option = {
            noncestr:'denghuoan',
            jsapi_ticket:'',
            timestamp:1414587457,
            url:location.href
        }
    // 4. ASCII sort all the fields participating in the signature
        var sigList = []
        for(var k in option) {
            // Save fields to be signed in an array as key=value
            sigList.push(k.trim() + "=" + option[k]);
        }     
        sigList.sort()  // Sort Arrays
    //5. Convert the array to a string like key=value&key=value
        var sigStr = sigList.join("&");
           
    //6. Sha1 algorithm encryption for sigStr strings (functions provided by js-sha1 package)
        // npm i js-sha1
        // Introduce: src="node_modules/js-sha1/build/sha1.min.js">
        var signature = sha1(sigStr);
   
    
        wx.config({
            debug: true, 
                // Turn on debugging mode, and the return values of all APIs invoked will appear in the client alert.
                // To view the incoming parameters, you can open them on the pc side, and the parameter information will be printed through the log, only on the pc side.
            appId: 'wxb8ccc4321140f639', // Required, unique identification of public number
            timestamp: option.timestamp, // Required, time stamp for signature generation
            nonceStr: option.noncestr, // Required, generate a random string of signatures
            signature: signature,// Required, Signature, Signature Generation Algorithms See Appendix 1
            jsApiList: [] // Required, list of JS interfaces to use, all JS interfaces listed in Appendix 2
        });