Small program – Cloud development – How to filter sensitive words namely content security detection (1)

preface

Content security detection, is every small program main are facing the “headache” problem, light temporary access, heavy permanent closure, and even close small black room. This article will explain in detail how to detect the legitimate content of a piece of text in a small program to determine whether it contains illegal content.

This article focuses on telling you:

• Common application scenarios and solutions of content security detection

• Learn to use small programs · Cloud functions developed by cloud + request-Promise third-party library to realize content request verification

• Learn how to request cloud functions on the applet side (as opposed to the traditional wx.Request approach (similar to AJax))

• In the cloud function side of cloud development, the third-party HTTPS request library (REQUEST,request-promise) is used to obtain Access_token and send a request to the content detection interface provided by wechat for verification

• Cloud function side and small program side error code processing

background

Whether it is a small program or some self-developed software applications similar to social networking with user-generated content, such as instant messaging, community, forum, audio and video live broadcast, etc., it is very necessary to detect the security of access content.

For small procedures, this is very strict in the audit, purify words and deeds, do a law-abiding person is very important…

Malicious upload reactionary speech or upload some illegal content (text/pictures/videos, etc.), resulting in small programs or applications were removed from the market, or were banned permanently, or individuals and companies were called by the public security organs, about tea, etc., so that the gains outweighed the losses.

Application scenarios

• Detection of small program user personal text data violations
• Specific words (such as overly commercial and marketing words) can be filtered or blocked
• Automatic detection of user published information (including comments, messages, etc.) before the content is published

The solution

Around how to deal with content security detection, there are generally three methods:

Scheme 1: Introduce third-party interfaces to verify content (e.g., Baidu AI Content audit Platform, netease Yundun, etc.)

Scheme 2: The company’s background partners develop their own text, pictures, audio and video content audit interfaces

Scheme 3: API provided by the applets server for verification

Each approach has advantages and disadvantages, as detailed below.

The solution	advantage	disadvantage
1. Introduce a third-party interface to verify content	Front-end students only need to perform verification according to the third-party interface documents provided by the official, without background intervention, with powerful functions and wide coverage	The frequency of interface calls is limited and charged
2. The backstage partners of the company develop content review interfaces such as text, pictures, audio and video by themselves	Background partners build their own wheels and customize the content review mechanism according to their own business needs and user attributes	The development cycle is long, the cost is large, and it is difficult to cover comprehensively
3. Invoke the content security API provided by the applets server for verification	Simple, efficient	I can’t figure it out, because compared to the first two solutions, it’s a real boon for developers who don’t rely on back-end interfaces

Under the micro-program ecology of wechat, the authorities provide two ways to help users solve the problem of content detection, namely

• Using server development mode, calling over HTTPS
• Using applets · cloud development, through cloud functions or cloud calls to achieve.

Server development mode, I believe that we are relatively familiar with, here will not repeat. Next, we will focus on how to realize content security detection through the cloud function developed by small program · cloud

The content request verification is realized through the cloud function + request-Promise third-party library developed by cloud

Step 1: Layout the small program first: complete the static page. (The files under the Pages folder are small program front-end code, each folder directory represents a module, a page) small program front-end WXML code example

<view class="container">
  <textarea class="content" placeholder="Write some words..." bindinput="onInput" auto-focus bindfocus="onFocus" bindblur="onBlur">
  </textarea>
</view>

<view class="footer">
  <button class="send-btn" size="default" bind:tap="send"</button> </view>Copy the code

Small program front-end WXSS code example

/* pages/msgSecCheck/msgSecCheck.wxss */
.container {
  padding: 20rpx;
}

.content {
  width: 100%;
  height: 360rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  border: 1px solid #ccc;
}

.footer {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  background: #34bfa3;} .send-btn { width: 100% ! important; color:#fff;
  font-size: 32rpx;
}

button {
  width: 100%;
  background: #34bfa3;border-radius: 0rpx; } button::after { border-radius: 0rpx ! important; }Copy the code

After being written in WXML and WXSS, the UI ended up looking like this

Step 2: Complete the processing of small program side business logic

Small program side logic JS code example

/ / pages/msgSecCheck msgSecCheck. Js Page ({/ * * * * / data Page of the initial data: {textareaVal:' '}, /** * life cycle function -- listen to page load */ onLoad:function(options) {}, // onInput(event) {lettextVal = event.detail.value; This.setdata ({textareaVal: textVal})}, // Focus the focusonFocus() {
    console.log('In focus'); }, // Lose focus when onBlur(event) {console.log()"When you lose focus."); // The front end can perform manual weak verification, or send a request for text verification when the focus is lost, but the request is made once every time the focus is lost, which consumes cloud resources. In fact, it can do both verification when the focus is lost}, // publishsend() {
    console.log("Trigger publish button"Wx.cloud. callFunction({// request msgSecCheck1 cloud function name:'msgSecCheck1', data: {content: this.data.textareaval // The value that needs to be passed to the cloud function msgSecCheck1}}). Then (res => {// Response on success returns result console.log(res); }). Catch (error => {console.error(err); })}})Copy the code

Step 3: Server logic processing. Create a cloud function on the side of the applet cloud functionmsgSecCheck1, this name you can customize, and the small program front request name to keep consistent with it

request
request-promise
request-promise

npm install request
npm install request-promise
Copy the code

If you encounter an error similar to the following when you request cloud functions in the small program side, you can not find what XXX module, etc. First look at the error code, and then find the meaning of the error code in the official document

The following is the focus of this article!

Step 4: Realize content security detection through cloud function +request-promise

For applets, it is similar to Web development, binding events to elements, and then retrieving elements, but the applets do not have DOM and BOM. It is data-driven view, absorbing the advantages of Angular,Vue,React frameworks, and forming its own set of specifications.

If you have this aspect of development experience for small partners, smooth over to small program development, you will find that there will always be surprising similarities, with the language is JavaScript, but with web development or how much there are a lot of differences, here will not expand.

Without further ado, let’s get right to the code

Small program front-end logic code

// Click the send button to verify the input textsend() {
    wx.cloud.callFunction({
      name: 'msgSecCheck1'// The name of the cloud function data: {// The data to be passed to the cloud function is content: This.data.textareaval}}).then(res => {console.log(res); Catch (err => {// Error => {// error => {// error => {// error => {console. Error (err); })}Copy the code

The above code could also be optimized to encapsulate the code requesting the cloud function into a function.

As shown below, it’s ok not to encapsulate it, but I make a habit of encapsulating it so that if the cloud function is used elsewhere, I call it directly to avoid writing duplicate code.

Here is part of the core code that will request the cloud function:

/ / releasesend() {
    // 请求msgSecCheck1云函数,对文本内容进行校验
    this._requestCloudMsgCheck();
  },

  _requestCloudMsgCheck() {
    let textareaVal = this.data.textareaVal;
    wx.cloud.callFunction({
      name: 'msgSecCheck1'}). Then (res => {console.log(res); }). Catch (err => {// If the message fails, the user is prompted or the next operation is forbidden. Console. })}Copy the code

Whether to send the request when the focus event is lost or when the send button is clicked, you can do either. You can also customize text validation, and I personally feel that on the small program side, when you lose focus, you can customize weak validation for some general sensitive words, and strong validation when you hit the send button.

If it is placed in the loss of focus immediately request, so that the number of requests will increase, and click the send button to verify, to a certain extent can reduce the small program side frequent requests.

Next is the sample code for handling the cloud function side, using request-Promise request to request wechat content security interface.

/* * Description: use the third-party library request-promise to request wechat content security interface * * https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.msgSecCheck.html * WeChat text content security interface document Access_token Gets the call credential document https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html * * Request - promise to use the document: https://github.com/request/request-promise * * / const APPID ="wx21baa58c6180c2eb"; // Note that it is your own appid const APPSECRET =""; / / your applet appsecret / / security check interface const msgCheckURL = ` https://api.weixin.qq.com/wxa/msg_sec_check?access_token= `; Const tokenURL = const tokenURL = const tokenURL = const tokenURL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}// const cloud = require('wx-server-sdk') cloud.init() // invoke request-promise const rp = require('request-promise'); // cloud function exports.main = async(event, context) => {try {lettokenResponse = await rp(tokenURL); Parse // Get the token value, because the result is a string that needs to be converted to a JSON object using json.parseletgetAccessToken = JSON.parse(tokenResponse).access_token; // Request wechat content security interface,post request, return the final verification resultlet checkResponse = await rp({
      method: 'POST',
      url: `${msgCheckURL}${getAccessToken}', body: {content: event.content // where event.content is the value passed by the applet side,content is the content to check the content interface}, json:true
    })
    returncheckResponse; } catch (err) { console.error(err); }}Copy the code

When you enter text on the applet side, send a request, and view the results under the console, the functionality is fine.

Special 3456 book Yuuo DONGGUAN 6543 Li ZXCZ garlic 7782 FGNV class finished 2347 dfJI test 3726 asAD sense 3847 qWEz to knowCopy the code

You can test the test cases provided in the official documentation to see the specific results returned.

Step 5: Correct handling of error codes

In the interview, there are a lot of interviewers like to ask HTTP related status code questions, there are a lot of status code, really can not remember, but the common error HTTP status code still need to know, I think, know how to deal with specific, how to check the document is ok.

The purpose behind the real test is to determine what is wrong with the interface based on the status code returned by the back end, and to determine whether it is a front-end or back-end problem. This is a very common problem.

If you say that you do not know, have not dealt with, for the candidate, it is certainly not convincing, whether the state of success or failure, there should be a corresponding user prompt.

Complete text security verification sample code

Below is the complete cloud function side code

/* * * https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.msgSecCheck.html * WeChat text content security interface document Access_token Gets the call credential document https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html * * Request - promise to use the document: https://github.com/request/request-promise * * / const APPID ="wx21baa58c6180c2eb";
const APPSECRET = ""; const msgCheckURL = `https://api.weixin.qq.com/wxa/msg_sec_check?access_token=`; Const tokenURL = const tokenURL = const tokenURL = const tokenURL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}// const cloud = require('wx-server-sdk') cloud.init() // invoke request-promise const rp = require('request-promise'); // cloud function exports.main = async(event, context) => {try {lettokenResponse = await rp(tokenURL); Parse // Get the token value, because the result is a string that needs to be converted to a JSON object using json.parseletgetAccessToken = JSON.parse(tokenResponse).access_token; // Request wechat content security interface,post request, return the final verification resultlet checkResponse = await rp({
      method: 'POST',
      url: `${msgCheckURL}${getAccessToken}', body: {content: event.content // where event.content is the value passed by the applet side,content is the content to check the content interface}, json:true}) // It is necessary to determine whether the content is in violation of the error codeif (checkResponse.errcode == 87014) {
      return {
        code: 500,
        msg: "Content contains illegal content",
        data: checkResponse
      }
    } else {
      return {
        code: 200,
        msg: "Content" OK "to",
        data: checkResponse
      }
    }
  } catch (err) {
    if (err.errcode == 87014) {
      return {
        code: 500,
        msg: 'Content contains illegal content',
        data: err
      }
    } else {
      return {
        code: 502,
        msg: 'Error calling msgCheckURL interface',
        data: err
      }
    }
  }
}

Copy the code

In the cloud function side, after adding error code after the judgment, in the small program side sent the request, the return result

For example, some users are prompted to do some judgment operations before data is inserted into the database. Only when the content is compliant, the database is inserted into the next step of business logic processing.

_requestCloudMsgCheck() {
    let textareaVal = this.data.textareaVal;
    wx.cloud.callFunction({
      name: 'msgSecCheck1', data: { content: textareaVal } }).then(res => { console.log(res); const errcode = res.result.data.errcode; // Do some business when a text error is detectedif(87014 === errCode) {wx.showtoast ({// If the content is illegal, do some user prompt title:'The text you entered contains sensitive content, please re-enter it'})},else{// Perform other service operations on success}}). Catch (err => {// Perform some service logic operations on failure, such as warning the user or forbidding the next operation) console.error(err); })}Copy the code

When the input text has sensitive words, do the corresponding user prompt

Note that error code processing at the cloud function (back) end and small program end should be processed, the two should not be confused, the small program end of the final judgment of some business logic, according to the state returned by the back-end interface, finally decide what operation to do. At this point, the problem of text content verification is completed through the Request-Promise library.

The request/request-Promise library is a very useful and powerful library. It’s got,axios, and so on

conclusion

There are many solutions in applets. It is recommended to use the applets side request cloud to develop cloud functions. Whether the applets do not use cloud functions and have their own back-end services, the access_token should be returned from the back-end to the front-end.

The secret key AppSecret of the small program should not be placed on the small program side, as it is not safe. Whether in server development mode or small program · cloud development mode, it can not bypass the background to request the content security interface provided by wechat, and then return to the small program side

In fact, in the small program cloud development, also provides a more convenient method, that is, cloud call, it is the small program cloud development provides the ability to call wechat open interface in the cloud function, just a simple configuration can be done.

Due to lack of space, it will be introduced in the next section.

For more information, you can follow the wechat itclanCoder public account, a useful account that only delivers and shares enlightening wisdom to you