早睡早起,方能养生!
Sleep early rise early, square can preserve one's health!

uniapp项目使用微信云开发security.imgSecCheck云函数进行图片违法违规内容检测

super
2021-10-05 19:04
views 88

使用uniapp写了个项目 ,  是微信小程序相关的项目 ,  被微信通知需要对小程序内容进行安全检测

 

 

开始的时候是使用的uniapp的云函数 ,  但是发现使用uniapp的云函数 还需要使用ACCESS_TOKEN也就是说他们是通过HTTPS调用的 ,  但是我觉得不管是他们主动获取ACCESS_TOKEN还是由我的服务端传ACCESS_TOKEN都比较麻烦 ,  而且会造成资源浪费 , 就研究了一下微信小程序自带的云开发 , 以下是操作步骤

 

注 :  我在开发中参考了以下文章

 

https://blog.csdn.net/YNEWA/article/details/106019518

 

https://blog.csdn.net/lyandgh/article/details/105889857

 

https://blog.csdn.net/weixin_43452622/article/details/115374339

 

步骤 :

 

  1. 1)进入小程序管理平台 开通云开发

 

 

2)小程序部分

 

① 创建 云开发环境

 

 

官方文档: https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/quickstart.html#_2-%E5%BC%80%E9%80%9A%E4%BA%91%E5%BC%80%E5%8F%91%E3%80%81%E5%88%9B%E5%BB%BA%E7%8E%AF%E5%A2%83

 

② 在小程序编辑器中, 修改project.config.json

 

 

③ 底部新增代码,并保存

 

"cloudfunctionRoot": "./cloudfunctions/"

 

 

④ 查看项目根目录是否自动创建了 cloudfunctions  文件夹,如果没有自动创建,在手动创建此文件后,查看文件夹是否有云朵标志

 

 

云函数目录创建成功 !

 

2)uniapp部分

 

① 在你的uniapp项目根目录创建 cloudfunctions 文件夹

 

创建此文件的目的是 在Hbuilder编辑器中编写我们的微信云函数

 

② 在 cloudfunctions 文件夹下创建 new_file.css 文件

 

目的是为了后面的copy测试

 

③ 打开uniapp根目录的 manifest.json 切换为 源码视图

 

④ 找到 mp-weixin 新增如下代码,  指定云开发目录

 

"cloudfunctionRoot": "./cloudfunctions/",

 

 

3)在项目内初始化云环境

 

① 打开App.vue

 

② 在 onLaunch 中添加以下代码

 

if (!wx.cloud) {
	console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
	wx.cloud.init({
		//   env 参数说明:
		//   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
		//   此处请填入环境 ID, 环境 ID 可打开云控制台查看
		//   如不填则使用默认环境(第一个创建的环境)    
		//   env: '你的环境ID',
		env: 'fb001-3gqdwdqwdqw0b7',
		traceUser: true,
	})
}

 

 

③ 配置 cloudfunctions 文件夹下的文件同步到小程序项目包

 

因为 cloudfunctions 文件夹不属于uniapp的默认目录 ,  所以在编译时不会被打包进/unpackage/dist/dev中小程序项目包

 

使用webpack包管理工具的复制工具自动将根目录的 cloudfunctions 复制到打包后的 unpackage/dist/dev 中 (为了省时省力 ,  当然你可以每次手动复制进去)

 

④ 安装copy-webpack-plugin

 

安装代码是 npm install -save copy-webpack-plugin

 

此方式安装会默认安装最新版本的工具,经过测试,使用最新版copy-webpack-plugin在代码编译时会报错,经查阅发现是 由于此工具在6.1.1版本中官方配置有改动,所以建议安装5.1.1版本的依赖

 

npm install -save copy-webpack-plugin@5.1.1

 

如果你已经安装过最新版,再次运行5.1.1版本的安装代码即可,(需要多等待几分钟的时间)

 

⑤ 在根目录创建vue.config.js文件

 

⑥ 将以下代码复制到文件中

 

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, 'cloudfunctions'),
                    to: path.join(__dirname, 'unpackage/dist', 'dev', process.env.UNI_PLATFORM, 'cloudfunctions')
                }
            ])
        ]
    }
}

 

在配置好后,你在根目录的 cloudfunctions 中的文件就会被自动复制到 unpackage/dist/dev 中的小程序包中

 

⑦ 重新编译后,打开微信开发者工具,在 cloudfuntions 文件夹后出现你的环境名称,即为 环境初始化完成

 

 

4)云函数

 

① 对着小程序开发者工具 cloudfunctions 文件夹右键,点击 新建Node.js 云函数,取名为 check

 

 

 

 

详见官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html

 

② 对着 check 文件夹右键,在资源管理器中打开

 

 

将check目录复制到uniapp中根目录下的 cloudfunctions 中

 

 

此后编写云函数 只需要在uniapp 编辑器中编写即可

 

③ 配置云函数API权限 

 

cloudfunctions 下 check 下 config.json

 

 

{
  "permissions": {
    "openapi": [
		"security.msgSecCheck"
    ]
  }
}

 

④ 在index.js中编写云函数代码

 

以下为检测图片是否违法或违规的代码

 

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

exports.main = async(event, context) => {
  const wxContext = cloud.getWXContext()

  try {
    const result = await cloud.openapi.security.imgSecCheck({
      media:{
        contentType:event.media.contentType,
      	value:Buffer.from(event.media.buffer,event.media.encode)// Buffer.from()是必须的
      }
    })
    // result 结构
    // { errCode: 0, errMsg: 'openapi.templateMessage.send:ok' }
    return result
  } catch (err) {
    // 错误处理
    // err.errCode !== 0
    return err
  }
}

 

⑤ 如何在页面中使用云函数?

 

在用户选择图片后 , 调用会函数进行检测 ,  根据云函数返回的结果 ,  判断用户上传的图片是否合规

 

/**
 *  选择图片
 */
chooseImage() {
	let self = this;
	uni.chooseImage({
		count: 1, // 默认9
		sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
		sourceType: ['album', 'camera'],
		success: function(res) {
			let tempImagePath = res.tempFilePaths[0];
			self.imageCheck(tempImagePath, self.loadRecImageOrStartToCrop);
		}
	});
},
imageCheck: function(tempImagePath, callback) {
	if (!getApp().globalData.enableSecurityCheck) {
		callback(tempImagePath);
		return;
	}
	let _this = this;
	uni.compressImage({
		src: tempImagePath,
		quality: 1,
		success: res => {
			let tempFilePathCompressed = res.tempFilePath;
			
			wx.getFileSystemManager().readFile({
				filePath: tempFilePathCompressed, // 压缩图片,然后安全检测
				success: buffer => {
					uni.showLoading({
						title: '加载中...'
					});

					//这里是 云函数调用方法
					wx.cloud.callFunction({
						name: 'check', // 这里是咱们创建的云函数名称 叫check
						data: {
							media: {
								contentType: 'image/png',
								buffer: buffer.data,
								encode: null
							}
						},
						complete(res) {
							uni.hideLoading();
							if (res.result.errCode == 0) { // 如果图片代码返回87014说明此图片是有问题的
								callback(tempImagePath); // 这里我调用了一个裁剪图片的代码,就不贴出来了, 你可以将此方法的内容转移到chooseImage方法中,而不需裁剪图片
							} else {
								uni.showModal({
									title: '请重试',
									content: '对不起,服务器开了小差',
									showCancel: false,
									confirmText: '好的',
								});
							}
						}
					})
				}
			})

		}
	})
}

			

 

 

看完文章你应该了解了大概的流程 ,  更加细节的内容建议你去看 上面给出的几篇文章的链接 !

 

使用微信自己的云函数的优势是 , 无需使用ACCESS_TOKEN凭证即可使用微信API


分享
0 条讨论
top