內(nèi)容安全檢測(cè),是每一個(gè)小程序主都面臨的“頭疼”問(wèn)題,輕則短暫性不可訪問(wèn),重則永久封號(hào),甚至關(guān)小黑屋。本文將為您詳細(xì)說(shuō)明,如何在小程序中對(duì)一段文本進(jìn)行合法內(nèi)容檢測(cè),以判斷是否含有違法違規(guī)內(nèi)容。
本文重點(diǎn)為你講述:
內(nèi)容安全檢測(cè)常見(jiàn)應(yīng)用場(chǎng)景及解決辦法
學(xué)會(huì)使用小程序·云開(kāi)發(fā)的云函數(shù)+結(jié)合request-promise第三方庫(kù)實(shí)現(xiàn)內(nèi)容請(qǐng)求校驗(yàn)
掌握如何在小程序端請(qǐng)求云函數(shù)(有別于傳統(tǒng)的wx.request的方式(類似AJax))
在云開(kāi)發(fā)的云函數(shù)端,利用第三方https請(qǐng)求庫(kù)(request,request-promise),獲取Access_token,以及向微信官方提供的內(nèi)容檢測(cè)接口發(fā)請(qǐng)求進(jìn)行校驗(yàn)
云函數(shù)端與小程序端錯(cuò)誤碼的處理
無(wú)論是小程序還是自行開(kāi)發(fā)的一些類似社交,帶有用戶自行產(chǎn)生內(nèi)容的軟件應(yīng)用,例如:即時(shí)通訊,社群,論壇,音視頻直播等,對(duì)于接入內(nèi)容安全的檢測(cè)是非常有必要的。
對(duì)于小程序而言,這一點(diǎn)在審核上是非常嚴(yán)格的,凈化言行,做一個(gè)知法守法的人很重要...
接入內(nèi)容安全檢測(cè),規(guī)避輸入一些違法違規(guī)低俗等內(nèi)容,避免辛辛苦苦開(kāi)發(fā)出來(lái)的應(yīng)用。
被惡意上傳反動(dòng)言論或上傳一些違規(guī)內(nèi)容(文字/圖片/視頻等),導(dǎo)致小程序或應(yīng)用被下架,或遭永久禁封,或個(gè)人及公司被公安機(jī)關(guān)打電話,約喝茶等,這樣的話,就得不償失了的。
每一種方法各有優(yōu)劣勢(shì),具體如下圖。
解決方案 | 優(yōu)勢(shì) | 劣勢(shì) | |
---|---|---|---|
1 | 引入第三方接口對(duì)內(nèi)容進(jìn)行校驗(yàn) | 前端同學(xué)只需按照官方提供的第三方接口文檔,進(jìn)行校驗(yàn)即可,無(wú)需后臺(tái)介入,功能強(qiáng)大,覆蓋范圍廣 | 接口調(diào)用的頻次有限制,收費(fèi) |
2 | 公司后臺(tái)小伙伴自行開(kāi)發(fā)文本,圖片,音視頻等內(nèi)容審核接口 | 后臺(tái)小伙伴自己造輪子,根據(jù)自己的業(yè)務(wù)需求以及用戶屬性,自定義內(nèi)容審核機(jī)制 | 開(kāi)發(fā)周期長(zhǎng),成本大,難以覆蓋全面 |
3 | 調(diào)用小程序服務(wù)端提供的內(nèi)容安全API進(jìn)行校驗(yàn) | 簡(jiǎn)單,高效 | 想不出來(lái),因?yàn)橄啾惹皟煞N方案,對(duì)于不依賴后端接口的開(kāi)發(fā)者來(lái)說(shuō),簡(jiǎn)直是雪中送炭 |
服務(wù)器開(kāi)發(fā)模式,相信大家都相對(duì)比較熟悉,在此就不再贅述。接下來(lái)為大家重點(diǎn)介紹,如何通過(guò)小程序·云開(kāi)發(fā)的云函數(shù)實(shí)現(xiàn)內(nèi)容安全檢測(cè)。
Step 1: 在小程序端先布局:完成靜態(tài)頁(yè)面。(pages文件夾下的文件都是屬于小程序前端代碼,每個(gè)文件夾目錄代表的就是一個(gè)模塊,一個(gè)頁(yè)面)
小程序前端wxml代碼示例
<view class="container">
<textarea class="content" placeholder="寫(xiě)點(diǎn)文字..." bindinput="onInput" auto-focus bindfocus="onFocus" bindblur="onBlur">
</textarea>
</view>
<view class="footer">
<button class="send-btn" size="default" bind:tap="send">發(fā)布</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;
}
經(jīng)過(guò)wxml與wxss的編寫(xiě)后,UI最終長(zhǎng)成這樣
小程序端邏輯JS代碼示例
// pages/msgSecCheck/msgSecCheck.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
textareaVal: '' // 頁(yè)面中需要顯示的數(shù)據(jù),初始化定義在data下面
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
},
// 監(jiān)聽(tīng)表單時(shí),數(shù)據(jù)有變化時(shí)
onInput(event) {
let textVal = event.detail.value;
this.setData({
textareaVal: textVal
})
},
// 聚焦焦點(diǎn)時(shí)
onFocus() {
console.log('聚焦焦點(diǎn)時(shí)');
},
// 失去焦點(diǎn)時(shí)
onBlur(event) {
console.log("失去焦點(diǎn)時(shí)");
// 前端可進(jìn)行手動(dòng)的弱校驗(yàn),也可以在失去焦點(diǎn)時(shí)發(fā)送請(qǐng)求進(jìn)行文本的校驗(yàn),但是每次失去焦點(diǎn)就請(qǐng)求一次,這樣是消耗云資源的,在發(fā)布時(shí)候與失去焦點(diǎn)做校驗(yàn)兩者都可以
},
// 發(fā)布
send() {
console.log("觸發(fā)發(fā)布按鈕")
wx.cloud.callFunction({ // 請(qǐng)求msgSecCheck1云函數(shù)
name: 'msgSecCheck1',
data: {
content: this.data.textareaVal // 需要向云函數(shù)msgSecCheck1傳入的值
}
}).then(res => { // 成功時(shí)的響應(yīng)返回結(jié)果
console.log(res);
}).catch(err => { // 失敗時(shí),返回的結(jié)果
console.error(err);
})
}
})
Step 3 :服務(wù)端邏輯處理。在小程序云函數(shù)端創(chuàng)建云函數(shù)msgSecCheck1,這個(gè)名字你可以自定義,與小程序前端請(qǐng)求的名字保持一致就可以了。
選中云函數(shù),右鍵并打開(kāi)命令行終端安裝request,request-promise,因?yàn)閞equest-promise依賴于request,兩個(gè)都要安裝,最后一鍵上傳部署就可以了
npm install request
npm install request-promise
如果遇到在小程序端請(qǐng)求云函數(shù)時(shí),遇到類似下面的錯(cuò)誤,找不到什么xxx模塊之類的 先看錯(cuò)誤碼,然后在官方文檔中找到該錯(cuò)誤碼代表的含義
一看錯(cuò)誤,沒(méi)有找到模塊,在云函數(shù)的目錄下的package.json中查看是否有安裝錯(cuò)誤中提示的包的,要是沒(méi)有的話,就安裝一下就可以了的,同時(shí)記得每次更改后都要上傳部署一下,也可以選擇云函數(shù)中文件的增量上傳
對(duì)于小程序開(kāi)發(fā),其實(shí)與web端開(kāi)發(fā)也是類似,給元素綁定事件,然后獲取元素,只是小程序端沒(méi)有DOM,BOM的那一套東西,它是數(shù)據(jù)驅(qū)動(dòng)視圖的,吸收了Angular,Vue,React的各個(gè)框架的優(yōu)點(diǎn),形成了自己的一套規(guī)范。
如果有這方面開(kāi)發(fā)經(jīng)驗(yàn)的小伙伴來(lái)說(shuō),平緩過(guò)度到小程序開(kāi)發(fā)當(dāng)中來(lái),你會(huì)發(fā)現(xiàn)總會(huì)有驚人的相似,用的語(yǔ)言都是JavaScript,但是與web開(kāi)發(fā)還是多少有很多差異的,這里就不拓展了。
廢話不多說(shuō),直接上代碼 :
小程序前端邏輯代碼:
// 點(diǎn)擊發(fā)送按鈕,對(duì)輸入的文本內(nèi)容進(jìn)行校驗(yàn)
send() {
wx.cloud.callFunction({
name: 'msgSecCheck1', // 云函數(shù)的名稱
data: { // 需要向云函數(shù)傳遞過(guò)去的數(shù)據(jù)
content: this.data.textareaVal // 具體要檢測(cè)的內(nèi)容
}
}).then(res => { // 成功時(shí),做什么事情
console.log(res);
// 檢測(cè)到文本成功時(shí),做一些業(yè)務(wù)
}).catch(err => { // 失敗時(shí),做什么事情
// 失敗時(shí),也就是違規(guī)做一些用戶提示,或者禁止下一步操作等之類的業(yè)務(wù)邏輯操作
console.error(err);
})
}
上面的代碼還可以在優(yōu)化一下,就是將請(qǐng)求云函數(shù)的代碼封裝成一個(gè)函數(shù)。
如下所示,不封裝也是沒(méi)事的,只是我習(xí)慣性封裝一下,如果其他地方也用到該云函數(shù),那么直接調(diào)用,避免寫(xiě)重復(fù)的代碼。
下面是將請(qǐng)求云函數(shù)的部分核心代碼:
// 發(fā)布
send() {
// 請(qǐng)求msgSecCheck1云函數(shù),對(duì)文本內(nèi)容進(jìn)行校驗(yàn)
this._requestCloudMsgCheck();
},
_requestCloudMsgCheck() {
let textareaVal = this.data.textareaVal;
wx.cloud.callFunction({
name: 'msgSecCheck1',
data: {
content: textareaVal // 這里可以使用官方文檔測(cè)試用例,特3456書(shū)yuuo莞6543李zxcz蒜7782法fgnv級(jí)
}
}).then(res => {
console.log(res);
// 檢測(cè)到文本成功時(shí),做一些業(yè)務(wù)
}).catch(err => {
// 失敗時(shí),也就是違規(guī)做一些用戶提示,或者禁止下一步操作等之類的業(yè)務(wù)邏輯操作
console.error(err);
})
}
至于是在失去焦點(diǎn)事件時(shí)發(fā)送請(qǐng)求還是在點(diǎn)擊發(fā)送按鈕時(shí)發(fā)送請(qǐng)求,兩種方式都可以。
您也可以自定義文本校驗(yàn),而我個(gè)人覺(jué)得在小程序端,失去焦點(diǎn)時(shí),可以自定義做一些常規(guī)敏感詞的弱校驗(yàn),而在點(diǎn)擊發(fā)送按鈕時(shí),做強(qiáng)校驗(yàn) 。
如果是放在失去焦點(diǎn)時(shí)就立馬請(qǐng)求,這樣請(qǐng)求次數(shù)會(huì)增多,而放在點(diǎn)擊發(fā)送按鈕時(shí)進(jìn)行校驗(yàn),一定程度上可以減少小程序端頻繁請(qǐng)求。
接下來(lái)就是處理云函數(shù)端,使用request-promise請(qǐng)求請(qǐng)求微信內(nèi)容安全接口的示例代碼。
/*
* Description: 利用第三方庫(kù)request-promise請(qǐng)求微信內(nèi)容安全接口
*
* 相關(guān)文檔鏈接:
* 微信文本內(nèi)容安全接口文檔https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.msgSecCheck.html
* access_token獲取調(diào)用憑證文檔
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
*
* request-promise使用文檔: https://github.com/request/request-promise
*
*/
const APPID = "wx21baa58c6180c2eb"; // 注意是你自己小程序的appid
const APPSECRET = ""; // 你自己小程序的appsecret
// 安全校驗(yàn)接口
const msgCheckURL = `https://api.weixin.qq.com/wxa/msg_sec_check?access_token=`;
// 向下面的這個(gè)地止發(fā)送請(qǐng)求,攜帶appid和appsecret參數(shù),獲取token認(rèn)證
const tokenURL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 引入request-promise
const rp = require('request-promise');
// 云函數(shù)入口函數(shù)
exports.main = async(event, context) => {
try {
let tokenResponse = await rp(tokenURL);
// 獲取token值,因?yàn)榉祷氐慕Y(jié)果是字符串,需要用JSON.parse轉(zhuǎn)化為json對(duì)象
let getAccessToken = JSON.parse(tokenResponse).access_token;
// 請(qǐng)求微信內(nèi)容安全接口,post請(qǐng)求,返回最終的校驗(yàn)結(jié)果
let checkResponse = await rp({
method: 'POST',
url: `${msgCheckURL}${getAccessToken}`,
body: {
content: event.content // 這里的event.content是小程序端傳過(guò)來(lái)的值,content是要向內(nèi)容接口校驗(yàn)的內(nèi)容
},
json: true
})
return checkResponse;
} catch (err) {
console.error(err);
}
}
當(dāng)你在小程序端輸入文本,發(fā)送請(qǐng)求時(shí),查看控制臺(tái)下的結(jié)果時(shí),功能是沒(méi)有問(wèn)題的。
特3456書(shū)yuuo莞6543李zxcz蒜7782法fgnv級(jí) 完2347全dfji試3726測(cè)asad感3847知qwez到
您可以根據(jù)官方文檔中提供的測(cè)試用例,進(jìn)行測(cè)試,看具體的返回結(jié)果的。
(控制臺(tái)錯(cuò)誤碼)
(合規(guī)內(nèi)容)
云函數(shù)請(qǐng)求成功,看看錯(cuò)誤信息的反饋,對(duì)于熟悉該錯(cuò)誤碼的人清楚該文本違規(guī)了,但是反饋不是很明顯,即使當(dāng)下自己很清楚,然而,在過(guò)幾個(gè)月在回來(lái)看代碼,你或許都不知道是啥意思。
對(duì)于處理錯(cuò)誤碼,返回具體的合適信息,對(duì)于調(diào)試代碼,排查問(wèn)題,也是非常重要 。
這些錯(cuò)誤碼具體的含義,在官方文檔里都有對(duì)應(yīng)的解釋,不用去記,去查文檔就行。
在面試中,有很多面試官喜歡問(wèn)http相關(guān)狀態(tài)碼的問(wèn)題,狀態(tài)碼有很多,也真的記不住,但是常見(jiàn)的錯(cuò)誤http狀態(tài)碼還是要知道的,我覺(jué)得,具體知道怎么處理,怎么查文檔就可以了。
真正考驗(yàn)背后目的是,對(duì)于根據(jù)后端返回的狀態(tài)碼,判斷接口哪里出了問(wèn)題,定位是前端問(wèn)題還是后端問(wèn)題,這是一個(gè)非常常見(jiàn)的問(wèn)題。
如果你說(shuō)你不知道,沒(méi)有處理過(guò),對(duì)于候選人,那肯定是沒(méi)有信服力的,無(wú)論是成功狀態(tài)還是失敗狀態(tài),都是應(yīng)該有對(duì)應(yīng)的用戶提示。
/*
*
* 相關(guān)文檔鏈接:
* 微信文本內(nèi)容安全接口文檔https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.msgSecCheck.html
* access_token獲取調(diào)用憑證文檔
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
*
* request-promise使用文檔: https://github.com/request/request-promise
*
*/
const APPID = "wx21baa58c6180c2eb";
const APPSECRET = "";
const msgCheckURL = `https://api.weixin.qq.com/wxa/msg_sec_check?access_token=`;
// 向下面的這個(gè)地止發(fā)送請(qǐng)求,攜帶appid和appsecret參數(shù),獲取token認(rèn)證
const tokenURL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 引入request-promise
const rp = require('request-promise');
// 云函數(shù)入口函數(shù)
exports.main = async(event, context) => {
try {
let tokenResponse = await rp(tokenURL);
// 獲取token值,因?yàn)榉祷氐慕Y(jié)果是字符串,需要用JSON.parse轉(zhuǎn)化為json對(duì)象
let getAccessToken = JSON.parse(tokenResponse).access_token;
// 請(qǐng)求微信內(nèi)容安全接口,post請(qǐng)求,返回最終的校驗(yàn)結(jié)果
let checkResponse = await rp({
method: 'POST',
url: `${msgCheckURL}${getAccessToken}`,
body: {
content: event.content // 這里的event.content是小程序端傳過(guò)來(lái)的值,content是要向內(nèi)容接口校驗(yàn)的內(nèi)容
},
json: true
})
// 有必要根據(jù)錯(cuò)誤碼,確定內(nèi)容是否違規(guī)
if (checkResponse.errcode == 87014) {
return {
code: 500,
msg: "內(nèi)容含有違法違規(guī)內(nèi)容",
data: checkResponse
}
} else {
return {
code: 200,
msg: "內(nèi)容OK",
data: checkResponse
}
}
} catch (err) {
if (err.errcode == 87014) {
return {
code: 500,
msg: '內(nèi)容含有違法違規(guī)內(nèi)容',
data: err
}
} else {
return {
code: 502,
msg: '調(diào)用msgCheckURL接口異常',
data: err
}
}
}
}
在云函數(shù)端,經(jīng)過(guò)添加錯(cuò)誤碼的判斷之后,在來(lái)看看小程序端發(fā)送的請(qǐng)求,返回的結(jié)果。
(這與沒(méi)有添加錯(cuò)誤碼判斷,是不一樣的,有具體的錯(cuò)誤信息內(nèi)容)
至此,我們?cè)谛〕绦蚨丝梢愿鶕?jù)這個(gè)返回的錯(cuò)誤碼或成功碼,進(jìn)行一些業(yè)務(wù)邏輯處理的,比如給一些用戶提示,在數(shù)據(jù)插入數(shù)據(jù)庫(kù)之前就做一些判斷操作,只有內(nèi)容合規(guī)時(shí),才插入數(shù)據(jù)庫(kù),進(jìn)入下一步的業(yè)務(wù)邏輯處理。
_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;
// 檢測(cè)到文本錯(cuò)誤時(shí),做一些業(yè)務(wù)
if (87014 === errcode) {
wx.showToast({ // 當(dāng)內(nèi)容違規(guī)時(shí),做一些用戶提示
title: '您輸入的文本內(nèi)容含有敏感內(nèi)容,請(qǐng)重新輸入',
})
}else {
// 成功時(shí)做其他業(yè)務(wù)操作
}
}).catch(err => {
// 失敗時(shí),也就是違規(guī)做一些用戶提示,或者禁止下一步操作等之類的業(yè)務(wù)邏輯操作
console.error(err);
})
}
(當(dāng)輸入的內(nèi)容有違規(guī)時(shí),給一些用戶提示或者阻止下一步操作等的)
注意在云函數(shù)(后)端處理錯(cuò)誤碼與小程序端都是要進(jìn)行處理的,兩者不要混淆了的,小程序端最終的一些業(yè)務(wù)邏輯判斷,是根據(jù)后端接口返回的狀態(tài),最終決定要做什么操作的。
至此,通過(guò)request-promise庫(kù)就完成了文本內(nèi)容校驗(yàn)的問(wèn)題。
這個(gè)request,request-promise庫(kù)非常實(shí)用,功能也非常強(qiáng)大,類似這種庫(kù),常見(jiàn)什么got,axios等之類的,都是支持promise風(fēng)格的 處理方式大同小異,大家可以去npm或github上閱讀相關(guān)使用文檔的。
在小程序中有多種解決方案,推薦使用小程序端請(qǐng)求云開(kāi)發(fā)云函數(shù)的方式,無(wú)論是不使用云函數(shù)方式,自己有后端服務(wù),獲取access_token都應(yīng)該是從后端返回給前端的。
而小程序的秘鑰 AppSecret是不應(yīng)該放在小程序端的,那樣不安全的,無(wú)論是服務(wù)器開(kāi)發(fā)模式還是小程序·云開(kāi)發(fā)模式,都繞不過(guò)后臺(tái)請(qǐng)求微信提供的內(nèi)容安全接口,然后在返回給小程序端 。
其實(shí)在小程序·云開(kāi)發(fā)中,還提供了一種更簡(jiǎn)便的方法,那就是云調(diào)用,它是小程序·云開(kāi)發(fā)提供的在云函數(shù)中調(diào)用微信開(kāi)放接口的能力,只需簡(jiǎn)單的進(jìn)行配置一下就可以了。
限于篇幅所致,放在下一節(jié)介紹。
reference:方案1參考鏈接:
微信內(nèi)容安全:
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.msgSecCheck.html
云調(diào)用
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html#%E4%BA%91%E5%87%BD%E6%95%B0
百度文本審核
https://ai.baidu.com/tech/textcensoring
網(wǎng)易云盾
https://dun.163.com/product/text-detection
公眾號(hào):騰訊云云開(kāi)發(fā)
騰訊云云開(kāi)發(fā): https://cloudbase.net
云開(kāi)發(fā)控制臺(tái): https://console.cloud.tencent.com/tcb?from=12304
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)