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