Article Directory
1. Configure JS security domain name
1.Apply for a secure domain name
2. Go to the WeChat public platform to download MP_verify_WCdi1jnSEaGX59y0.txt, and transfer the file to the secure domain name, and ensure that this file can be accessed under the secure domain name, that is, http://xxxxxxxx/MP_verify_WCdi1jnSEaGX59y0.txt can be accessed
3. Bind the js security domain name
4. Add the IP list under the security domain name to the public platform - security center - set in development - basic configuration - IP white list
2. Service access
提交逻辑: WeChat will verify the filled token. If the verification is successful, WeChat will send four parameters to the url interface you filled in. The interface developer will verify the signature through the signature. If the verification is successful, the interface developer should return the echostr parameter content as it is , the access is successful
URL: it must be a bound js security domain name, and it is an interface (the interface logic is as above)
token: random, but it must be consistent with the backend
EncodingAESKey: randomly generated
【
接入文档】https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html
3. Import Js file
Method 1. Introduce the js file into the html page in the framework
Introduce the following JS file on the page that needs to call the JS interface, (support https): http://res.wx.qq.com/open/js/jweixin-1.6.0.js
To further improve service stability, when the above When the resource is inaccessible, it can be accessed instead: http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (supports https).
html页面引入jweixin-1.6.0.js
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
Method 2. Introduction of plug-in installation
npm install weixin-js-sdk # 或yarn add weixin-js-sdk
import wx from “weixin-js-sdk”; // 在需要的页面引入或者全局引入
4. Use wx.config for authority verification
This step is 必须的that only after authorization verification can you use WeChat's api.
1.在该方法之前需要调用后端接口将当前页面的url传递给后端
The url should take the address before #
let url = window.location.href.split('#')[0]
2.字段获取
The value of signature needs to be calculated by the backend.
The jsApiList front end can be written as needed. For example, = "jsApiList: ['scanQRCode', 'checkJsApi']
Other parameters can be generated by the backend or passed by the frontend.
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: ‘’, // 必填，企业微信的corpID
timestamp: , // 必填，生成签名的时间戳 —>单位：秒
nonceStr: ‘’, // 必填，生成签名的随机串—>长度一般不超过32，格式建议[0-9a-zA-z]
signature: ‘’,// 必填，签名，见 微信公众号开发文档附录JS-SDK使用权限签名算法
jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
wx.ready(function(){
//config权限验证成功会走
});
wx.error(function(){
//config权限验证失败会走
});
5. Case
import wx from 'weixin-js-sdk';
// 配置信息
getCofig() {
let url = window.location.href.split('#')[0]
const that = this;
let params = {
url: md5Libs.md5(url)}
getSingature(params).then(res => {
let data = JSON.parse(res.data)
that.wxConfig(data.timestamp,data.noncestr,data.signature);
}).catch(err => {
console.log('err', err)
})
},
wxConfig(timestamp, nonceStr, signature) {
wx.config({
debug: true, // 开启调试模式,
appId: '根据需要', // 必填，企业号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名
jsApiList: ['scanQRCode', 'checkJsApi'], // 必填，需要使用的JS接口列表
});
wx.ready(() => {
console.log('配置完成，扫码前准备完成')
})
wx.error(function(res) {
alert('出错了：' + res.errMsg); //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
});
},
6. JS-SDK configuration process (what needs to be done at the back end)
【1】Get access_token
1.appid: Official Account Platform-Settings and Development-Basic Configuration-Developer ID
2.AppSecret: Official Account Platform-Settings and Development-Basic Configuration-Developer Password
If it is not enabled, click Generate-Scan Code-Enter the 6 digits filled in when applying for the Official Account Count the passwords, and save them after you get the AppSecret.
If there is no problem with the passwords, but you have been unsuccessful, you can go to the WeChat community to find the administrator to solve the problem
3.: enter the correct appid and APPSECRET, visit https://api.weixin.qq.com/ cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET, an access will be generated——
if the token has an error, you can check the return code on the WeChat document to find the problem
【2】Get jsapi_ticket
Use the obtained access_token to request the jsapi_ticket via http GET (the validity period is 7200 seconds, and developers must cache the jsapi_ticket globally in their own services): https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token =ACCESS_TOKEN&type=jsapi
【3】Calculation signature
The backend calculates the signature according to jsapi_ticket and other information and returns the signature, timestamp, and nonceStr to the frontend
7. Reference website
Watch the video page, section p12-p22 [https://www.bilibili.com/video/BV11K4y1a7Yp/]