【内容安全】uniapp微信小程序校验文本和图片实战

前言

前段时间搞了个小程序之后,莫名收到了官方提醒,让我对接一下内容安全的检测接口才行。起初我并没有在意,但是有一天早上,我突然心血来潮去看了一眼数据库的图片,居然有一张官方测试黄图,吓我一跳,赶紧着手准备对接检测接口。

image.png

微信小程序

image.png

根据提醒信息中的链接点击到接口文档中,我们会发现,这是一个服务端的接口,用于检查一段文本是否含有违法违规内容。

如果是和后端开发人员进行合作,我们可以不用管这个接口文档写的啥,但是作为一个要用云开发的开发者来说,就得看看里面的内容了。

POST https://api.weixin.qq.com/wxa/msg_sec_check?access_token=ACCESS_TOKEN 

根据接口文档中的内容,它给我们提供了一个接口,这个接口还有一个参数access_token,那么就表示我们在调用这个接口之前,还得去获取我们的access_token才行。

检测一个文本,既然如此麻烦,那为啥不去找一个搬来直接用的呢?

006637F8.jpg

uni-sec-check 公共模块

在uniapp文档里面一顿翻查,终于找到了这个公共模块,可以快速搭建起检测图文的方法。

点击此处下载 uni-sec-check 插件

下载导入

image.png

image.png

点击下载并导入到Hbuilderx,然后选择一个项目即可导入了。

image.png

导入成功之后,我们就可以在unCloud下面的common文件夹里面看到所需的公共模块了,这里面会自动包含所需的其他模块。

配置

image.png

打开common文件夹下面的uni-config-center下面的uni-id下面的config.json文件

image.png

config中配置小程序的appidappsecret

配置这两个参数的原因是因为校验图文的公共模块是依赖另外一个uni-open-bridge公共模块的,这个公共模块主要是用来自动获取access-token的,配置之后,会在我们请求检测图文接口时,自动获取到所需的参数并执行。

场景

我这里使用的场景是在小程序用户信息编辑时进行检测

image.png

  • 当用户输入昵称时,马上校验是否通过,未通过时进行提示。

云对象开发

image.png

在项目中的uniCloud文件夹下面新建云对象

image.png

image.png

由于我们写的云对象要用到一些公共模块,所以在添加云对象的时候,需要把这些公共模块都添加进去哦~

image.png

新建好之后,就可以打开index.obj.js文件了

云对象的知识点,可以看我之前的文章,也可以点击这里看官方文档

// 引入uni-sec-check公共模块
const UniSecCheck = require('uni-sec-check');
// 引入uni-config-center公共模块
const configCenter = require('uni-config-center');
// 获取uni-id配置
const uniIdConfig = configCenter({
	pluginId: 'uni-id'
});
  • 首先在module.exports外层引入所需的公共模块及配置项
// 测试 - 检测文本
	async textSecCheck(obj) {
		let {
			content,
			openid,
			scene,
			version = 2
		} = obj;
		// 初始化实例
		const uniSecCheck = new UniSecCheck({
			provider: 'mp-weixin',
			requestId: this.getUniCloudRequestId(), // 云函数内则写 context.requestId
		});
		// 检测文本
		const checkRes = await uniSecCheck.textSecCheck({
			content,
			openid,
			scene,
			version
		})


		if (checkRes.errCode === uniSecCheck.ErrorCode.RISK_CONTENT) {
			return {
				errCode: checkRes.errCode,
				errMsg: '文字存在风险',
				result: checkRes.result
			}
		} else if (checkRes.errCode) {
			console.log(`其他原因导致此文件未完成自动审核(错误码:${checkRes.errCode},错误信息:${checkRes.errMsg}),需要人工审核`);
			return {
				errCode: checkRes.errCode,
				errMsg: checkRes.errMsg,
				result: checkRes.result
			}
		}
		return {
			errCode: 0,
			errMsg: ''
		};
	},
  • 然后我们在module.exports中新建一个检测文本的方法textSecCheck
  • checkRes接收的是一个对象,参数如下:
名称 类型 必填 说明
content String 文本内容,不可超过500KB
openid String 用户的小程序openid(用户需在近两小时访问过小程序) version=2时必填
scene Number 场景值(1 资料;2 评论;3 论坛;4 社交日志)
version Number 接口版本号,可选1或2,但1的检测能力很弱

页面使用

云对象封装好了之后,就可以在页面中进行使用了

引入

// 用于检测文本的云对象
const testUniSecCheck = uniCloud.importObject("test-uni-sec-check");
  • 在页面的js中引入云对象

检验

校验可以根据需求来定义,我这里是当点击提交按钮时再进行校验,校验通过之后才能提交成功。

// 文本是否校验通过
let isTextSuccess = false
if(this.nickname.trim()){
        // 检测文本
        let res = await testUniSecCheck.textSecCheck({
                content: this.nickname,
                openid: this.user.openid,
                scene: 1,
                version: 2, // 固定为2
                errMsg: '昵称存在违规,请修改后重试'
        });

        if (res.errCode) {
                uni.showModal({
                        title: res.errMsg,
                        content: `涉嫌 ${res.result.label}`,
                        showCancel: false
                })
        }

        if (res.errCode === 0) {
                // 表示检测文本通过了
                isTextSuccess = true
        }
} else {
        // 没有昵称的时候也表示通过
        isTextSuccess = true
}

效果

image.png

图片和音频校验

由于图片和音频的校验是异步的,所以没办法看到具体效果,可以直接复制下面代码到云对象里面即可。

// 测试 - 检测图片
async imgSecCheck(obj) {
        let {
                image,
                openid,
                scene,
                version = 2
        } = obj;
        // 初始化实例
        const uniSecCheck = new UniSecCheck({
                provider: 'mp-weixin',
                requestId: this.getUniCloudRequestId(), // 云函数内则写 context.requestId
        });
        // 检测图片
        let checkRes = await uniSecCheck.imgSecCheck({
                image,
                openid,
                scene,
                version
        });


        if (checkRes.errCode === uniSecCheck.ErrorCode.RISK_CONTENT) {
                image && await uniCloud.deleteFile({
                        fileList: [image]
                })
                return {
                        errCode: checkRes.errCode,
                        errMsg: '文件存在风险,已自动删除',
                        result: checkRes.result
                }
        } else if (checkRes.errCode) {
                console.log(`其他原因导致此文件未完成自动审核(错误码:${checkRes.errCode},错误信息:${checkRes.errMsg}),需要人工审核`);
                return {
                        errCode: checkRes.errCode,
                        errMsg: checkRes.errMsg,
                        result: checkRes.result
                }
        }
        return {
                errCode: 0,
                errMsg: '',
                traceId: checkRes.traceId
        }
},
// 测试 - 检测音频
async avSecCheck(obj) {
        let {
                mediaUrl,
                openid,
                scene,
                version = 2
        } = obj;
        // 初始化实例
        const uniSecCheck = new UniSecCheck({
                provider: 'mp-weixin',
                requestId: this.getUniCloudRequestId(), // 云函数内则写 context.requestId
        });
        // 检测音频
        let checkRes = await uniSecCheck.avSecCheck({
                mediaUrl,
                openid,
                scene,
                version
        });

        if (checkRes.errCode === uniSecCheck.ErrorCode.RISK_CONTENT) {
                mediaUrl && await uniCloud.deleteFile({
                        fileList: [mediaUrl]
                })
                return {
                        errCode: checkRes.errCode,
                        errMsg: '文件存在风险,已自动删除',
                        result: checkRes.result
                }
        } else if (checkRes.errCode) {
                console.log(`其他原因导致此文件未完成自动审核(错误码:${checkRes.errCode},错误信息:${checkRes.errMsg}),需要人工审核`);
                return {
                        errCode: checkRes.errCode,
                        errMsg: checkRes.errMsg,
                        result: checkRes.result
                }
        }
        return {
                errCode: 0,
                errMsg: '',
                traceId: checkRes.traceId
        }
},

总结

由于官方给的配置文档比较复杂,而校验的示例又比较简单,这里对官方的案例做了一下总结,并结合个人项目做了一些特殊处理。

由于配置时翻阅的文档一层又一层,比较繁琐,所以这里不写出来了。按照本文这些简单的配置即可完成检验操作,不需要做太多复杂的配置。

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MY24miDP' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片