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

使用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