做好内容安全检测，和风险说「再见」（下）！

Posted 2021-02-19 cloudbase

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了做好内容安全检测，和风险说「再见」（下）！相关的知识，希望对你有一定的参考价值。

前言

您将在本文中学习到通过云调用的方式对一段文本进行检测是否含有违规内容。

云函数中进行简单的配置一下,就可以实现文本内容的校验。
小程序端进行文本内容的弱校验,减少API的请求。
如何将涉及违规的文本内容用*号代替,进行过滤处理。
云函数调用方式的优点解析(推荐使用)。

本文重点在于

学会如何在小程序云开发中的云调用进行配置,实现文本内容的校验。
小程序端在什么时机进行弱校验,为什么有必要这么做。
遇到违规文本内容如何用特殊字符替代。

技术图片

在前面一文中通过在小程序端请求云函数msgSecCheck1,通过request,request-promise请求微信提供的内容安全接口以及获取access_token,实现了对小程序端输入文本内容安全的检测。

如果您之前有动手实践过的话,您依然发现,这个过程仍然很复杂,分别要请求两个接口,还要拼接字段,还要手动的去查找小程序的APPID,以及APPSECRET秘钥。

在如今的云开发中,通过云调用的方式,在云函数端,只需要简单的配置一下就可以。下面就来看一下是如何简单地实现。

01.在云函数端创建云函数

小程序端的代码几乎不用怎么变,这里为了区别上一节代码,在云函数端重新创建一个msgSecCheck2的云函数

小程序端wxml

<!--pages/msgSecCheck/msgSecCheck.wxml-->
<view class="container">
  <textarea class="content" placeholder="写点文字..." bindinput="onInput" auto-focus bindfocus="onFocus" bindblur="onBlur">
  </textarea>
</view>

<view class="footer">
  <button class="send-btn" size="default" bind:tap="send">发布</button>
</view>

小程序端wxss

/* 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;
}

最终呈现的UI如下所示

技术图片

小程序端的JS逻辑代码

// pages/msgSecCheck/msgSecCheck.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textareaVal: ‘‘
  },
  // 监听表单时,数据有变化时
  onInput(event) {
    let textVal = event.detail.value;
    this.setData({
      textareaVal: textVal
    })

  },

  // 聚焦点时
  onFocus() {
    console.log(‘聚焦点时‘);
  },

  // 失去焦点时
  onBlur(event) {
    console.log("失去焦点时");
    // 前端可进行手动的弱校验,也可以在失去焦点时发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云请求的,其实在发布时候与失去焦点做校验两者都可以


  },

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

  _requestCloudMsgCheck() {
    let textareaVal = this.data.textareaVal;
    wx.cloud.callFunction({
      name: ‘msgSecCheck2‘, // 只是把这个云函数名替换了一下的,其他并没有什么变化
      data: {
        content: textareaVal
      }
    }).then(res => {
      console.log(res);
      
    }).catch(err => {
      // 失败时,也就是违规做一些用户提示,或者禁止下一步操作等之类的业务逻辑操作
      console.error(err);
    })
  }

})

在小程序云函数端msgSecCheck2目录下创建config.json文件,这个文件名称是固定的,添加如下配置即可,若是其他接口支持云函数的,也是如法炮制。

{
  "permissions": {
    "openapi": [
      "security.msgSecCheck"
    ]
  }
}

在主入口index.js文件中,按照官方文档,填写下面几行代码就可以了。

// 云函数入口文件
const cloud = require(‘wx-server-sdk‘)

cloud.init()

// 云函数入口函数
exports.main = async(event, context) => {
  try {
    const result = await cloud.openapi.security.msgSecCheck({
      content: event.content // 小程序端传过来的值,content字段接收
    })
    return result;
  } catch (err) {
    return err;
  }
}

你会发现在小程序端检测一段文本是否违规,就这么几行云函数代码,就完成了这个文本内容校验功能。

其实这个openapi.security.msgSecCheck已经集成到wx-server-sdk当中了的,对外您只需提供要传入检测的文本就可以了。

最终会返回一个成功与失败的结果,当然跟上节一样,仍需要对错误码进行处理的,无论是在云函数端还是小程序端,代码如下所示

// 云函数入口文件
const cloud = require(‘wx-server-sdk‘)

cloud.init()

// 云函数入口函数
exports.main = async(event, context) => {
  try {
    const result = await cloud.openapi.security.msgSecCheck({
      content: event.content
    })

    if (result.errCode === 87014) {
      return {
        code: 500,
        msg: ‘内容含有违法违规内容‘,
        data: result
      }
    } else {
      return {
        code: 200,
        msg: ‘内容ok‘,
        data: result
      }
    }
  } catch (err) {
    // 错误处理
    if (err.errCode === 87014) {
      return {
        code: 500,
        msg: ‘内容含有违法违规内容‘,
        data: err
      }
    }
    return {
      code: 502,
      msg: ‘调用msgSecCheck接口异常‘,
      data: err
    }
  }
}

当您在小程序端进行测试,输入一段违规的文本进行测试,如下所示,将会返回违规的状态码与信息提示。

技术图片

（输入一段违规的文本进行校验,点击图片可查看）

当您输入符合规则的文本时,便会返回成功时的状态码,以及对应合规的信息提示。

技术图片

至此,通过云调用小程序提供的内置安全接口,非常简单容易的实现文本内容安全的校验。

在小程序端对文本内容进行校验

频繁的请求云函数接口,一定程度上会有损用户体验,造成小程序的卡顿等之类的情况，对于一些常规敏感词,在小程序端是可以手动地进行自定义校验的,有如下两种处理方式

违规内容	违规内容
强制用户不能输入,发布,或者评论等	针对敏感词汇,用***号进行替代

技术图片

(针对敏感词汇,用***号进行替代)

那这个究竟是怎么实现的呢?

事件的触发应该是在失去焦点的时候,就进行常规自定义文本内容校验。

/**
 *
 * 您也是可以单独将自定义的违规词汇放到一个utils文件,单独js文件当中,通过export的方式导出来,在想要使用的地方引入进去也是可以的
 */
const g_reg = /好贱|操|杀|贱|傻|疯|炮|奸|猪|笨|屁|麻痹|滚犊子|婊/gm

// 手动对敏感词检测
  _hasSensitiveWords(str) {
    if (str == ‘‘ || str == ‘undefined‘) return false;
    if (g_reg.test(str)) { // 如果检测有违规,就返回true
      return true;
    }
  }

// 失去焦点时
  onBlur(event) {
    console.log("失去焦点时");
    // 前端可进行手动的弱校验,也可以在失去焦点时发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的,其实在发布时候与失去焦点做校验两者都可以
    const textVal = event.detail.value;
    if (this._hasSensitiveWords(textVal)) {
      wx.showToast({
        title: ‘含有敏感词,敏感词将会用*号处理‘,
      })
      this.setData({
        hasSensitiveWords: textVal.replace(g_reg, "***")
      })
      console.log(this.data.textareaVal);
    } else {
      this.setData({
        hasSensitiveWords: textVal
      })
      console.log(this.data.textareaVal);
    }

  }

以下是完整的示例代码

/**
 *
 * 你也是可以单独将自定义的文本放到一个js文件当中,通过export的方式导出来,在想要使用的地方引入进去也是可以的
 */
const g_reg = /操|杀|贱|傻|疯|炮|奸|猪|笨|屁|麻痹|滚犊子|婊/gm


// pages/msgSecCheck/msgSecCheck.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textareaVal: ‘‘,
    hasSensitiveWords: ‘‘
  },
  // 监听表单时,数据有变化时
  onInput(event) {
    let textVal = event.detail.value;
    this.setData({
      textareaVal: textVal
    })

  },

  // 聚焦焦点时
  onFocus() {
    console.log(‘聚焦焦点时‘);
  },

  // 失去焦点时
  onBlur(event) {
    console.log("失去焦点时");
    // 前端可进行手动的弱校验,也可以在失去焦点时发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的,其实在发布时候与失去焦点做校验两者都可以
    const textVal = event.detail.value;
    if (this._hasSensitiveWords(textVal)) {
      wx.showToast({
        title: ‘含有敏感词,敏感词将会用***号处理‘,
      })
      this.setData({
        hasSensitiveWords: textVal.replace(g_reg, "***")
      })
      console.log(this.data.textareaVal);
    } else {
      this.setData({
        hasSensitiveWords: textVal
      })
      console.log(this.data.textareaVal);
    }

  },

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

  _requestCloudMsgCheck() {
    let textareaVal = this.data.textareaVal;
    wx.cloud.callFunction({
      name: ‘msgSecCheck2‘,
      data: {
        content: textareaVal
      }
    }).then(res => {
      console.log(res);

    }).catch(err => {
      // 失败时,也就是违规做一些用户提示,或者禁止下一步操作等之类的业务逻辑操作
      console.error(err);
    })
  },

  // 手动对敏感词检测
  _hasSensitiveWords(str) {
    if (str == ‘‘ || str == ‘undefined‘) return false;
    if (g_reg.test(str)) { // 如果检测有违规,就返回true
      return true;
    }
  }

})

而wxml只是新增加了一个字段hasSensitiveWords而已,这里只是用于学习演示

技术图片