前言
您將在本文中學習到通過雲調用的方式對一段文本進行檢測是否含有違規內容。
- 雲函數中進行簡單的配置一下,就可以實現文本內容的校驗。
- 小程序端進行文本內容的弱校驗,減少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
}
}
}
當您在小程序端進行測試,輸入一段違規的文本進行測試,如下所示,將會返回違規的狀態碼與信息提示。
（輸入一段違規的文本進行校驗,點擊圖片可查看）
當您輸入符合規則的文本時,便會返回成功時的狀態碼,以及對應合規的信息提示。
至此,通過雲調用小程序提供的內置安全接口,非常簡單容易的實現文本內容安全的校驗。
02
在小程序端對文本內容進行校驗
頻繁的請求雲函數接口,一定程度上會有損用戶體驗,造成小程序的卡頓等之類的情況，對於一些常規敏感詞,在小程序端是可以手動地進行自定義校驗的,有如下兩種處理方式
| 違規內容 | 違規內容 |
|---|---|
| 強制用戶不能輸入,發佈,或者評論等 | 針對敏感詞彙,用***號進行替代 |
(針對敏感詞彙,用***號進行替代)
那這個究竟是怎麼實現的呢?
事件的觸發應該是在失去焦點的時候,就進行常規自定義文本內容校驗。
/**
*
* 您也是可以單獨將自定義的違規詞彙放到一個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而已,這裏只是用於學習演示
(敏感詞測試校驗)
上面代碼中顯示的是,但凡遇到違規之類的詞,就用***處理,如果您想要出現多少個違規詞,就具體用多少個特殊符號處理，但是我個人覺得沒有必要。因爲對於敏感違規內容,要麼你不讓用戶輸入,要麼就用幾個特殊符號代替就可以了的
如果出現N多個違規詞,就要出現N多個特殊符號,這顯然是很浪費資源,佔用公共空間。怎麼處理呢？
一、我們可以在插入數據庫之前,通過前端弱校驗以及接口的強校驗,對內容進行檢測,若內容合規,就插入數據庫,不合規,就不讓走下一步。
對於違規詞的手動收集,也是可以單獨的弄一個接口的,在小程序端哪裏需要檢驗的,哪裏觸發事件,就在哪裏發起請求就可以的。
二、對於涉及到複雜的頁面,若很多個模塊涉及到用戶自發表內容,可以弄一個前端弱校驗敏感接口,一方面是方便運營人員,手動進行添加特殊敏感詞彙,另一方面是不用頻繁動代碼。
如果使用了接口,那麼就增加了API的請求,體驗流暢性就會降低,因爲請求接口,是需要時間的 。
如果把違規詞收集寫死放在小程序端,這種方式是不會請求API的,兩種方式各有利弊 適合自己的業務纔是最好的
不過在大型的項目裏,若軟件應用要求比較高,一般都是支持運營人員手動可以添加和刪除敏感詞彙的,類似下面這樣,形成一個閉環。
03
雲調用的優點
通過上面雲調用方式,在雲函數中進行簡單的配置一下,就可以完成在小程序端文本內容的安全校驗,是不是覺得超級方便,簡單呢?
雲調用是雲開發提供的基於雲函數使用小程序開放接口的能力，目前已經覆蓋以下幾個使用場景：
- 服務端調用
- 開放數據調用
- 消息推送
具體詳細介紹,您可以前往小程序官方文檔閱讀。
雲調用需要在雲函數中通過 wx-server-sdk使用。在雲函數中使用雲調用調用服務端接口無需換取access_token，只要是在從小程序端觸發的雲函數中發起的雲調用都會經過微信自動鑑權。
您會發現通過雲調用的方式,實現同樣一個功能,不需要知道APPID,以及APPSECRET祕鑰,也不需要獲取access_token,這樣簡直太方便了,沒有幾行代碼。
其實複雜的內部工作,都已經集成到wx-server-sdk當中了的,您只需要根據雲開發官方內置的接口,傳入所需要檢測的字段,它就會給您返回一個結果。
這就是雲開發魅力所在,當然前一種方式,https的方式,獲取access_Token之類的,也是要會的,如果後臺用的不是雲開發模式,有自己的後端服務,那麼就要走https那一套流程了。
結語
本文主要介紹了在小程序雲開發中,使用雲調用的方式實現了對文本內容安全的校驗,涉及到在雲函數端創建一個config.json文件進行配置一下,在主入口index.js中寫幾行雲函數JS代碼,就可以完成一個文本內容安全校驗功能。
在小程序端進行敏感文本的弱校驗,具體的時機是在失去焦點的時候,就進行文本的內容的弱校驗；
當遇到敏感詞彙時,進行特殊符號處理；
最後就是感受到了雲開發帶來的方便。