Shulou(Shulou.com)06/01 Report--

The purpose of this article is to share with you how to use the Wechat JS-SDK signature interface. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First of all, let's take a look at the official account developer's instructions on the use of Wechat JS-SDK, as shown in the figure:

Generally speaking, the first step is for the backend engineer to configure a secure domain name. Wechat stipulates that Wechat's JS-SDK can only be called under the configured domain name. Where can I set it?

As shown in the figure:

Note: fill in the domain name instead of URL,URL is with the protocol, that is, with http://, but the domain name is not required.

Then there is the second step, introducing Wechat's js-sdk into the page, needless to say.

The third step is to verify the configuration by injecting permissions through the config interface.

Don't you look stupid? What is the config interface, what is the injection permission, what is the authentication configuration. In a state of ignorance, click on the link to see the information shown in the picture:

Through careful reading found that when the page introduced Wechat's js-sdk, there will be a global wx object, similar to the page introduced jquery will have a $object, the same reason. Here there is a property on the wx object that is config, the value of this property is a function, and this config function can also be called an interface.

So what is the configuration of injection permission verification later?

Injection permission verification configuration refers to passing the specific parameters shown above in the config function, and then calling this function, which verifies whether the current page can use Wechat's JS-SDK.

So let's take a look at the specific parameters? As shown in the figure:

There are six of them:

The first one is to turn on the debug switch. The development environment is generally set to true and changed to false after launch.

The second is the appId of the official Wechat account.

The third timestamp that generates the signature. The timestamp is a string of numbers representing time. What the heck is this signature? don't worry about continuing to read it.

The fourth random string that generates the signature, the random string is the random string, and the signature is mentioned here.

The fifth signature, the question is, how did the signature come from?

The sixth list of js interfaces you need to use. What is this for? To put it simply, you need to use the functions of Wechat js-sdk, such as calling scan, camera, and so on, just put the strings that represent the functions into the array.

The main question above is how did the signature come from? Let's take a look at the document. When we look at step 3, there is actually a link to the signature information as shown in the figure:

Look at Appendix 1 carefully and click on the connection as shown in the figure:

The document is so long that you don't have to read it. Let me describe the information of the document in the shortest possible words:

First, if you want to get a signature, you need to get jsapi_ticket first.

Second, if you want to get jsapi_ticket, you must first get access_token.

The above two steps are usually completed by the back-end engineer. After completion, the front-end engineer provides an interface to the front-end engineer. The front-end engineer can get the jsapi_ticket by requesting the interface, and then calculate the signature according to the signature algorithm of the document.

But for convenience, the step of calculating the signature is also completed by the back-end engineer, and the front-end engineer directly requests the signature interface to obtain a series of information such as signature, timestamp, random string, and so on.

The title of this article is: Wechat JS-SDK signature interface use and development, the previous mainly about the use of Wechat JS-SDK signature interface, if only the use of the previous article is basically enough, then the following will talk about the development of Wechat JS-SDK signature interface.

We need to design three interfaces:

The first request API returns access_token

The second request interface returns jsapi_ticket

The third request interface returns signature, that is, the signature, and of course there is a list of other information, appid, timestamp, random string.

First, let's take a look at the documentation on getting access_token:

It is very detailed, but it is also very verbose. Here, let me explain to you in big vernacular: to get access_token, you need to request a url address by get request, and you need to pass three parameters: grant_type, appid, and secret. Grant_type is a fixed value of "client_credential", and appid and secret can be seen on the official Wechat account.

Then look at the response parameters:

Access_token and expires_in, the former is the obtained access_token, and the latter is the time that the acquired access_token can be cached. What does it mean? that is to say, after obtaining the access_token for the first time, you do not need to retrieve the access_token within the expires_in time, but can directly use the cached access_token. This means that we can store the access_token. When we need to use access_token, we can first determine whether the time has expired. If it does not expire, we will directly take out the access_token in the storage medium. If it expires, request the access_token again, and then update the expiration time. Update the access_token in the storage media, and the flow chart for obtaining the access_token is as follows:

Here the code demonstration is stored in the local json file, does not use the database, the amount of data is very small, in the real project, you can also use the local file storage. First of all, two functions are implemented, reading and writing files:

Then, the method of obtaining access_token. Here, the obtained access_token is separated into two functions, and the access_token obtained directly from Wechat server is extracted into the getNewToken function:

At this point, the access_token is obtained. Here is how to obtain the jspai_ticket. See the official documentation:

It is still very verbose. To put it simply, send a get request to another url. With the parameters access_token and type,type, the value "jsapi" is fixed. Access_token is the access_token; obtained above. The completed url is as follows:

The returned parameter is an object with four properties, as shown in the figure:

There are two main items: ticket and expires,ticket: the jsapi_ticket,expires_in to be obtained is the cache time, and this ticket can also be cached for 7200 seconds, so the acquisition process of ticket is roughly the same as that of access_token, except that there is one more judgment to determine whether the access_token expires. Because the acquisition of ticket depends on access_token, the flow chart of obtaining ticket is as follows:

The code is implemented as follows:

In the same way as access_token, it is divided into two functions, except that there is one more step in the getTicket function to request the asynchronous operation of access_token.

So far we have obtained the ticket, and this ticket can also be returned to the front end as an interface.

The final step is to calculate the signature. Take a look at the signed document:

Here, please read it carefully. I will not take you to read it. I will directly summarize the main points: several parameters are needed to calculate the signature:

1. Noncestr (random string)

2. Effective jsapi_ticket

3. Timestamp (timestamp)

4. Url (the URL of the current web page, excluding # and its following parts)

Let's first implement the functions that get timestamp and noncestr:

Then you need to get it from the code above in ticket,ticket. For url, you need to transfer data from the front end to the back end. Here is the code to obtain the api of the signature interface in development:

First, get the url passed from the front end, then get the timestamp and the random string, then connect the above items in the form of key-value pairs, note that the order is fixed, and then encrypt the string with sha1. Here the encryption uses the crypto library, or you can install the sha1 library directly with npm, and directly call the method of sha1 library to encrypt. After encryption, you will get the signature. Finally, the signature, timestamp, random string and appid are returned to the front end in the form of json.

The following is the flow chart of obtaining ticket in integrated front-end separation mode:

Thank you for reading! This is the end of the article on "how to use Wechat JS-SDK signature interface". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.