摘要:发帖的功能只要理清思路,其实并不复杂,利用机器做内容审查是关键,直接关系到小程序的整体安全。内容检查重点由于内容安全对于小程序运营至关重要,稍有不慎就容易导致小程序被封,所以在这块的校验除了常规人工检查外,我们还可以用到微信的内容安全。
这次分享下“发帖功能”,这个功能其实风险蛮大的,特别是对一些敏感言论的控制,如果没有做好可能导致小程序被封,所以除了必要的人工审核和巡查以外,我们需要一些微信安全监测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...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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博客小程序的详情页的功能按钮如何实现,具体包括评论、点赞、收藏和海报功能,这里记录下整个实现过程和实际编码中的一...
阅读 1043·2021-09-13 10:29
阅读 3393·2019-08-29 18:31
阅读 2635·2019-08-29 11:15
阅读 3013·2019-08-26 13:25
阅读 1372·2019-08-26 12:00
阅读 2300·2019-08-26 11:41
阅读 3379·2019-08-26 10:31
阅读 1489·2019-08-26 10:25