Since the development is based on WeChat, of course, it is inseparable from the development documents of WeChat. Before we begin, I hope you can have a look at the "WeChat JS-SDK Description Document". So how can we make good use of the JSSDK of WeChat? The following basic steps are based on this document.
It should be noted that if my description below is a bit vague, I suggest you:
This paper reviews a series of historical basic articles on Xue reaction, especially the function and storage of altjs and the second pulse of Xue reaction, or/and:
Skip my description directly, download the latest source code at the back of the article, read the source code first, and then read the description of the article in turn when encountering problems.
Step 1: bind the domain name
Log in to the WeChat public platform first, enter the "Function Settings" of "WeChat Official Account Settings" and fill in the "JS Interface Security Domain Name".
Note: After logging in, you can view the corresponding interface permissions in the Developer Center.
In this binding, be careful not to put the front w', accessTokenUrlin.qq.com/cgi-bin/token', ticket URL:' com/CGI-bin/ticket/getticket',
}
exports.sign = function (url，callback) {？ var non centr = config . non centr，
Timestamp = math.floor (date.now ()/1000),//accurate to the second.
...
request(config.accessTokenUrl +'？ grant _ type = '+config . grant _ type+' & amp； appid = '+config . appid+' & amp； secret=' + config.secret，function(error，response，body){ if(！ Error & response.statuscode = = 200) {var token map = JSON.parse (body);
request(config.ticketUrl +'？ access _ token = '+token map . access _ token+' & amp； type=jsapi '，function(error，resp，json){ if(！ Error & response.statuscode = = 200) {var ticketmap = JSON.parse (JSON);
cache.put('ticket '，ticketMap.ticket，config . cache _ duration)； ? //Join the cache
Callback ({non centr:non centr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature: sha1('jsapi _ ticket ='+ticketmap.ticket+'&; non centr = '+non centr+' & amp； Timestamp ='+Timestamp+'&; url=' + url)
});
}
})
}
})
}
}
The process here is no different from what we just described. Firstly, the access_token of jsapi_ticket is obtained through appId and secret, and then the jsapi_ticket needed for signature is obtained through this access_token. It's not central. We filled it in casually in advance. The timestamp algorithm is also relatively simple.
Finally, through the method provided by the library sha 1, the jsapi_ticket, noncestr, timestamp and page url are signed by sha 1, and then the above information is returned to the upper calling function through the callback.
So let's look down at our upper calling function. Actually, this is our shortcut:
app.get("/api/signature "，function(req，RES){ const URL = req . query . URL . split(' # ')[0]；
signature.sign(url，function(signatureMap){
signature map . appid = we chat _ CFG . appid；
RES . send(signature map)；
});
})
According to the requirements of the WeChat development document, we first need to remove the data behind the incoming url anchor and keep the effective part in front.
Then call the sign method above to generate the signature. The json data finally passed in by the signature method above is the signatureMap here. We will eventually send this data back to the react client.
At the same time, through the example of wx.config above, we know that we need to use the appId of WeChat official account. So put it in the signatureMap and come back here.
So far, the data returned by the "/api/signature" of the react client calling the server is as follows:
{
non estr:' wm3 wzytpz 0 wzccnw '，
Time stamp: 1476873698,
Website:' com/? code = 00 1 kgsd 30 xcm 7 f 1 paff 305 uud 30 kgsdr & amp； state= '，
jsapi _ ticket:' sm 4 aovdwfpe 4d xkxges 8 vbqyvbs-TKGYp4d _ zsqa 0 q 5 wvwmupnq 6 xgpyecgkod _ xID _ grmcaalsmif 9 jbrgaog '，
Signature:' 9268FFAF4B9EB0D296FCFE3D2724118AA05E3'
}
3.？ The client obtains the signature information.
3. 1 Get the signature information and inject it into jssdk.
As before, we will create a new source file WechatSdkSource.js to call the "/api/signature" interface of the remote server:
var WechatSdkSource = {
fetchSignatureMap() { return {
? remote(state，URL){ return co(function *){？ Set signatureMap = null? const getSignatureMapUrl = `/API/signature `； ? Please try {let result = yieldrequest.get (getsignaturemaURL). Query ({URL: URL});
signatureMap = result.body
? } catch (e) {
signatureMap = null
? } ? //console.log("userInfo:"，userInfo)；
? Return to signatureMap
});
? },
? Local() {// never checks locally, but always gets it remotely.
Returns null
? }, ? Success: we chatsdkations. updatesignaturemap,? Error: wechatsdkations. getsignaturemapfailed,? Loading: wechatsdkiations. getsignaturemap,
}
}
};
The url passed in here is generated by the upper function that will be discussed below. There is nothing to say about the whole process. To put it bluntly, it is to send a query parameter request with url to the server through the corresponding library to request signature information. I believe that friends who pay attention to this series of articles are very clear.
When the final request is successfully returned, the action of updateSignatureMap of WechatSdkActions will be called.
var alt = require('../alt ')； Module. Export? = alt . generate actions(' updateSignatureMap '，' getSignatureMap '，' getSignatureMapFailed '，
);
And this action will trigger the callback of onUpdateSignatureMap of the monitored WeChat SdkStore.
Class WechatSdkStore {? Constructor () {this.signaturemap = []; This.errormessage = null this.ready = false this.bind actions (wechat dkactions); this . export async(WechatSdkSource)；