摘要:發(fā)帖的功能只要理清思路,其實(shí)并不復(fù)雜,利用機(jī)器做內(nèi)容審查是關(guān)鍵,直接關(guān)系到小程序的整體安全。內(nèi)容檢查重點(diǎn)由于內(nèi)容安全對(duì)于小程序運(yùn)營至關(guān)重要,稍有不慎就容易導(dǎo)致小程序被封,所以在這塊的校驗(yàn)除了常規(guī)人工檢查外,我們還可以用到微信的內(nèi)容安全。
這次分享下“發(fā)帖功能”,這個(gè)功能其實(shí)風(fēng)險(xiǎn)蠻大的,特別是對(duì)一些敏感言論的控制,如果沒有做好可能導(dǎo)致小程序被封,所以除了必要的人工審核和巡查以外,我們需要一些微信安全監(jiān)測API的幫忙,在AI加持下,現(xiàn)在很多大公司對(duì)內(nèi)容和圖片的效率大大提高了。
這個(gè)DEMO僅是一個(gè)流程示例,由于涉及到云函數(shù)和“真”敏感圖,這里就有文字圖代替。
發(fā)帖的功能只要理清思路,其實(shí)并不復(fù)雜,利用機(jī)器AI做內(nèi)容審查是關(guān)鍵,直接關(guān)系到小程序的整體安全。
[toc]
用戶選擇手機(jī)圖庫或拍照let tempImg = 0; //代表已選擇的圖片 wx.chooseImage({ count: 3 - tempImg.length, //選擇不超過3張照片,去掉當(dāng)前已經(jīng)選擇的照片 sizeType: ["original", "compressed"], //獲取原圖或者壓縮圖 sourceType: ["album", "camera"], //獲取圖片來源 圖庫、拍照 success(res) { // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 let tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); //舉例:這里可以size 來判斷圖片是否大于 1MB,方便后面內(nèi)容檢查 if (res.tempFiles[0] && res.tempFiles[0].size > 1024 * 1024) { console.log("圖片大于1MB啦") } } })
這里用到的方法是chooseImage,它可以設(shè)置讓用戶選擇手機(jī)圖片庫和拍照獲得,需要注意的是考慮到后面要用微信自帶API做圖片安全檢查,圖片大小不能超過1MB,所以需要設(shè)置sizeType為compressed。
內(nèi)容檢查(重點(diǎn))由于內(nèi)容安全對(duì)于小程序運(yùn)營至關(guān)重要,稍有不慎就容易導(dǎo)致小程序被封,所以在這塊的校驗(yàn)除了常規(guī)人工檢查外,我們還可以用到微信的內(nèi)容安全API。
為什么用微信官方提供的API?
主要有二點(diǎn):有一定的免費(fèi)額度,基于企鵝大廠的專業(yè)AI檢查。
目錄結(jié)構(gòu)
├─checkContent │ config.json //云調(diào)用的權(quán)限配置 │ index.js //云服務(wù)器node 入口文件 │ package-lock.json │ package.json // NPM包依賴 │ ...
為什么要強(qiáng)調(diào)這個(gè)?
因?yàn)楸救艘婚_始在用云函數(shù)+云調(diào)用的時(shí)候,經(jīng)常會(huì)出現(xiàn)各種不明BUG,很多都是因?yàn)槟夸浝锩嫔賯魑募?,或者少配置?/p>
云函數(shù)內(nèi)容:
const cloud = require("wx-server-sdk"); cloud.init(); exports.main = async (event, context) => { console.log(event.txt); const { value, txt } = event; try { let msgR = false; let imageR = false; //檢查 文字內(nèi)容是否違規(guī) if (txt) { msgR = await cloud.openapi.security.msgSecCheck({ content: txt }) } //檢查 圖片內(nèi)容是否違規(guī) if (value) { imageR = await cloud.openapi.security.imgSecCheck({ media: { header: { "Content-Type": "application/octet-stream" }, contentType: "image/png", value: Buffer.from(value) } }) } return { msgR, //內(nèi)容檢查返回值 imageR //圖片檢查返回值 }; } catch (err) { // 錯(cuò)誤處理 // err.errCode !== 0 return err } }
這里主要用到security.msgSecCheck和security.imgSecCheck這2個(gè)微信開放云調(diào)用方法(需開發(fā)者工具版本 >= 1.02.1904090),以往我們還要在服務(wù)器上多帶帶寫個(gè)方法,現(xiàn)在變得十分的方便,直接在云函數(shù)中調(diào)用即可。
這里需要重點(diǎn)說2個(gè)點(diǎn)
圖片security.imgSecCheck 方法只能接收buffer,所以需要把temp的臨時(shí)圖片轉(zhuǎn)化為buffer的形式傳過去,我們這里用到 getFileSystemManager 的方法。
如果目錄文件中沒有config.json,需要自己建一個(gè),并且做一個(gè)授權(quán)的配置。
{ "permissions": { "openapi": [ "security.msgSecCheck", "security.imgSecCheck" ] } }2、檢查文字內(nèi)容安全
wx.cloud.callFunction({ name: "checkContent", data: { txt: "樂于分享,一起進(jìn)步" }, success(_res) { console.log(_res) }, fail(_res) { console.log(_res) } }) //返回值參考 { "errMsg": "cloud.callFunction:ok", "result": { "msgR": { "errMsg": "openapi.security.msgSecCheck:ok", "errCode": 0 }, "imageR": false }, "requestID": "77952319-b2b4-11e9-bdc8-525400192d0e" }
應(yīng)用場景舉例:
用戶個(gè)人資料違規(guī)文字檢測;
媒體新聞?lì)愑脩舭l(fā)表文章,評(píng)論內(nèi)容檢測;
游戲類用戶編輯上傳的素材(如答題類小游戲用戶上傳的問題及答案)檢測等。 頻率限制:單個(gè) appId 調(diào)用上限為 4000 次/分鐘,2,000,000 次/天*
通過wx.cloud.callFunction的方法調(diào)用checkContent的云函數(shù),檢查一段文本是否含有違法違規(guī)內(nèi)容。
3、檢查圖片內(nèi)容安全//獲取 temp臨時(shí)圖片文件的 buffer wx.getFileSystemManager().readFile({ filePath: tempImg[0], //這里做示例,所以就選取第一張圖片 success: buffer => { console.log(buffer.data) //這里是 云函數(shù)調(diào)用方法 wx.cloud.callFunction({ name: "checkContent", data: { value: buffer.data }, success(json) { console.log(json.result.imageR) if (json.result.imageR.errCode == 87014) { wx.showToast({ title: "圖片含有違法違規(guī)內(nèi)容", icon: "none" }); console.log("bad") } else { //圖片正常 } } }) } }) //返回值參考 { "errMsg": "cloud.callFunction:ok", "result": { "msgR": false, "imageR": { "errMsg": "openapi.security.imgSecCheck:ok", "errCode": 0 } }, "requestID": "c126353c2d-b40b-11e9-81c4d-525400235f2a" }
應(yīng)用場景舉例:
圖片智能鑒黃:涉及拍照的工具類應(yīng)用(如美拍,識(shí)圖類應(yīng)用)用戶拍照上傳檢測;電商類商品上架圖片檢測;媒體類用戶文章里的圖片檢測等;
敏感人臉識(shí)別:用戶頭像;媒體類用戶文章里的圖片檢測;社交類用戶上傳的圖片檢測等。 頻率限制:單個(gè) appId 調(diào)用上限為 2000 次/分鐘,200,000 次/天*(圖片大小限制:1M)
這里先要用 getFileSystemManager() 獲取臨時(shí)圖片的buffer(這個(gè)是重點(diǎn)),然后再通過wx.cloud.callFunction的方法調(diào)用 checkContent的云函數(shù)中security.imgSecCheck的方法,校驗(yàn)一張圖片是否含有違法違規(guī)內(nèi)容。
一開始本人調(diào)試的時(shí)候,也遇到無法上傳的問題,必須通過文件管理(getFileSystemManager)獲取buffer后才能上傳檢查圖片,耗費(fèi)了本人不少debugger時(shí)間。完整代碼
原本想做個(gè)實(shí)際的demo(代碼片段)分享給大家打開參考的,但是云函數(shù)必須是一個(gè)已注冊的APPID,無奈只能貼代碼。
這里主要還是提供一個(gè)整體思路,希望能幫助大家減少開發(fā)成本,更好的解決問題和完成任務(wù) ^_^
html部分:
{{content.length}}/200 提交 取消
JS部分:
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { titleDetail: "", //帖子title內(nèi)容 content: "", //發(fā)帖內(nèi)容 tempImg: [], //選擇圖片的縮略圖,臨時(shí)地址 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { wx.cloud.init(); }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 檢測輸入字?jǐn)?shù) * @param {object} e */ textareaCtrl: function (e) { if (e.detail.value) { this.setData({ content: e.detail.value }) } else { this.setData({ content: "" }) } }, /** * 選擇圖片 */ choosePhoto() { let self = this; let tempImg = self.data.tempImg; if (tempImg.length > 2) { return; } wx.chooseImage({ count: 3 - tempImg.length, //選擇不超過3張照片,去掉當(dāng)前已經(jīng)選擇的照片 sizeType: ["original", "compressed"], sourceType: ["album", "camera"], success(res) { console.log(res); // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 let tempFilePaths = res.tempFilePaths; tempImg = tempImg.concat(tempFilePaths); console.log(tempImg); self.setData({ tempImg }) wx.getFileSystemManager().readFile({ filePath: tempImg[0], success: buffer => { console.log(buffer.data) wx.cloud.callFunction({ name: "checkContent", data: { value: buffer.data }, success(json) { console.log(JSON.stringify(json)) console.log(json.result.imageR) if (json.result.imageR.errCode == 87014) { wx.showToast({ title: "圖片含有違法違規(guī)內(nèi)容", icon: "none" }); console.log("bad") } else { //圖片正常 } } }) } }) }, fail: err => { console.log(err) } }) }, /** * 刪除照片 */ removeImg(e) { let self = this; let index = e.currentTarget.dataset.index; console.log(e); let tempImg = self.data.tempImg; tempImg.splice(index, 1); self.setData({ tempImg }) }, /** * 發(fā)貼 */ submitPost(e) { let { titleDetail, content } = this.data; wx.cloud.callFunction({ name: "checkContent", data: { txt: content }, success(_res) { console.log(JSON.stringify(_res)) wx.navigateTo({ url: "/pages/postimg/result" }) }, fail(_res) { console.log(_res) } }) } })
往期回顧:
[[[打怪升級(jí)]小程序評(píng)論回復(fù)和發(fā)貼功能實(shí)戰(zhàn)(一)](https://segmentfault.com/a/11...
[[填坑手冊]小程序Canvas生成海報(bào)(一)](https://segmentfault.com/a/11...
[[拆彈時(shí)刻]小程序Canvas生成海報(bào)(二)](https://segmentfault.com/a/11...
[[填坑手冊]小程序目錄結(jié)構(gòu)和component組件使用心得](https://segmentfault.com/a/11...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/106322.html
摘要:往期回顧打怪升級(jí)小程序評(píng)論回復(fù)和發(fā)貼功能實(shí)戰(zhàn)二填坑手冊小程序生成海報(bào)一拆彈時(shí)刻小程序生成海報(bào)二填坑手冊小程序目錄結(jié)構(gòu)和組件使用心得 showImg(https://segmentfault.com/img/remote/1460000019733090?w=818&h=516); 在學(xué)習(xí)成長的過程中,常常會(huì)遇到一些自己從未接觸的事物,這就好比是打怪升級(jí),每次打倒一只怪,都會(huì)獲得經(jīng)驗(yàn),讓...
摘要:行爬取頂點(diǎn)全網(wǎng)任意小說掘金之前連續(xù)多篇文章介紹客戶端爬取平臺(tái),今天我們從零開始,實(shí)現(xiàn)爬取頂點(diǎn)小說網(wǎng)任意一本小說的功能。文件標(biāo)記所有文件我的后端書架后端掘金我的后端書架月前本書架主要針對(duì)后端開發(fā)與架構(gòu)。 30行js爬取頂點(diǎn)全網(wǎng)任意小說 - 掘金之前連續(xù)多篇文章介紹客戶端爬取平臺(tái)(dspider),今天我們從零開始,實(shí)現(xiàn)爬取頂點(diǎn)小說網(wǎng)任意一本小說的功能。 如果你還不知道客戶端爬取,可以先看...
摘要:行爬取頂點(diǎn)全網(wǎng)任意小說掘金之前連續(xù)多篇文章介紹客戶端爬取平臺(tái),今天我們從零開始,實(shí)現(xiàn)爬取頂點(diǎn)小說網(wǎng)任意一本小說的功能。文件標(biāo)記所有文件我的后端書架后端掘金我的后端書架月前本書架主要針對(duì)后端開發(fā)與架構(gòu)。 30行js爬取頂點(diǎn)全網(wǎng)任意小說 - 掘金之前連續(xù)多篇文章介紹客戶端爬取平臺(tái)(dspider),今天我們從零開始,實(shí)現(xiàn)爬取頂點(diǎn)小說網(wǎng)任意一本小說的功能。 如果你還不知道客戶端爬取,可以先看...
摘要:感謝大家一致對(duì)團(tuán)隊(duì)和產(chǎn)品的支持,我們在路上。擁有多個(gè)功能模塊,全方位覆蓋系統(tǒng)所需,微博朋友圈即時(shí)聊天直播論壇資訊活動(dòng)頻道圈子問答打賞等主流社交功能應(yīng)有盡有。價(jià)格梯度多樣,根據(jù)您的項(xiàng)目需求靈活選型運(yùn)用,支持深度靈活二次開發(fā)。 研發(fā)發(fā)布版本號(hào): V2.1.1 更新發(fā)布時(shí)間:2018年11月9日 發(fā)布類型:功能優(yōu)化、BUG修復(fù) ThinkSNS+最新體驗(yàn)demo:請于官網(wǎng)下載/安裝最新版或點(diǎn)...
摘要:用小程序云開發(fā)將博客小程序常用功能一網(wǎng)打盡本文介紹博客小程序的詳情頁的功能按鈕如何實(shí)現(xiàn),具體包括評(píng)論點(diǎn)贊收藏和海報(bào)功能,這里記錄下整個(gè)實(shí)現(xiàn)過程和實(shí)際編碼中的一些坑。考慮到小程序本身的大小限制,使用的方式是最佳的。 用小程序·云開發(fā)將博客小程序常用功能一網(wǎng)打盡 本文介紹mini博客小程序的詳情頁的功能按鈕如何實(shí)現(xiàn),具體包括評(píng)論、點(diǎn)贊、收藏和海報(bào)功能,這里記錄下整個(gè)實(shí)現(xiàn)過程和實(shí)際編碼中的一...
閱讀 1053·2021-09-13 10:29
閱讀 3400·2019-08-29 18:31
閱讀 2649·2019-08-29 11:15
閱讀 3025·2019-08-26 13:25
閱讀 1382·2019-08-26 12:00
閱讀 2329·2019-08-26 11:41
閱讀 3427·2019-08-26 10:31
閱讀 1499·2019-08-26 10:25