内容安全检测【图文检测】(微信小程序心得)

        有UGC内容的微信小程序上架之前有一个明确的内容安全指引,需要使用一些微信小程序自带的图文媒体api 拦截一些不合规的情况。以下分享一下项目案例,以图文为主,后台为云函数,咱们用文字检测抛砖引玉,图片差不多。

        首先看下使用到的文字检测api(微信自带 + 阿里云内容检测):

/* 微信自带的文字检测 */ 

const { openid, scene, content } = ...;

// ...

const res = await acloud.openapi.security.msgSecCheck({
    openid,
    scene,
    version: 2,
    content,
    title: 'utf-8'
});

if (res.suggest === 'review') { //需要进一步审核的情况  }
if (res.label !== 100) { // 枚举值100为正常 }

// 进一步的反馈给前端...

// api 链接https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/sec-center/sec-check/msgSecCheck.html

        调好之后,使用了一下,发现确实可以拦截一些文字内容,但好像不是很全面。考虑到UGC的内容是核心的东西,得尽量覆盖多一些,以防上线之后被打回,所以搜索了几个方案之后,决定配合使用阿里云的文本审核增强版,即用即付的收费策略,比较适合中小型小程序的成本控制策略。

        接入阿里文本审核有两种方式,一种用sdk,一种用http调用。上代码:

        使用之前,准备工作,主要是要拿到和api通讯的密钥:AccessKeyId 和 AccessKeySecret。详细参考官方链接 :接入api教程(前置工作 + 调用)

        拿到密钥之后,去云函数存储在云函数的环境变量中。如下图:  

        云端环境这样配置即可,本地调试时,这个配置没用,需要去本地云函数环境中需要手动配置一下密钥:

        之后,就可以正常进行本地云函数的测试,在使用密钥的时候用以下方式取得:

ALIBABA_CLOUD_ACCESS_KEY_SECRET = process.env.ALIBABA_CLOUD_ACCESS_KEY_SECRET

        下面是阿里云文本审核的两种调用方式,sdk不叫简单,可以去官方链接查看:SDK接入方式

        这种方式,我去调用的时候,看请求和阿里那边是通的,但是云函数里返回超时,和阿里的技术人员沟通几次之后,也没啥效果,后面就换用了http的方式调用,结果是👌的。下面讲一下HTTP调用的方式,需要配置请求头的信息,对接阿里那边。官方文档请看 原生HTTPS调用,说明一下,这个链接是图片审核的调用说明,使用上和文字审核大部分一致,只要改一个传参,如下图:

把这个 Action 改成 TextModeration 即可。

        然后上代码:

// 比较繁琐的地方是 签名的部分

const crypto = require('crypto');
const axios = require('axios');
const querystring = require('querystring');

const generateSignature = (paramData) => {
  let params = paramData;

  // 按照参数名称的字典顺序对参数进行排序
  let sortedParams = Object.keys(params).sort().reduce((acc, key) => {
    acc[key] = params[key];
    return acc;
  }, {});

  let canonicalizedQueryString = Object.keys(sortedParams)
  .map(key => percentEncode(key) + '=' + percentEncode(sortedParams[key]))
  .join('&');

  const HTTPMethod = 'POST';

  // 构造用于签名的字符串
  const stringToSign = 
  HTTPMethod + "&" +
  percentEncode("/") + "&" +
  percentEncode(canonicalizedQueryString);

  // 注意计算签名时,Key为AccessKey Secret加上一个"&"
  const signKey = process.env.ALIBABA_CLOUD_ACCESS_KEY_SECRET + "&";

  console.log(stringToSign);
  // 使用HMAC-SHA1算法计算签名
  const hmac = crypto.createHmac('sha1', signKey);
  
  return hmac.update(stringToSign).digest('base64');
};

let params = {
  Format: 'JSON',
  AccessKeyId: process.env.ALIBABA_CLOUD_ACCESS_KEY_ID,
  Version: '2022-03-02',
  Timestamp: new Date().toISOString(),
  SignatureMethod: 'HMAC-SHA1',
  SignatureVersion: '1.0',
  SignatureNonce: Date.now() + Math.random().toString(),
  Action: 'TextModeration'
};

// 签名结构体
params.Service = scene === 1 ? 'nickname_detection' : 'comment_detection';
params.ServiceParameters = JSON.stringify({
  content: contents.join('__')
}); // 选择要检测的服务类型以及传参


params.Signature = generateSignature(params); //签名

const baseURL = 'https://green-cip.cn-shanghai.aliyuncs.com';
const queryString = querystring.stringify(params);

const response = await axios.post(`${baseURL}?${queryString}`)

        一般情况下,就可以得到文字审核的结果了。

        最后把微信的文字检测和阿里的文字检测结合调用,阿里失败了就调用小程序自带的。可以在返回值里加一个tool:ali-security / wx-security,查看调用的是谁,方便调试。后续针对性的做一个返回值就行。

        小程序的文字安全审核就到这啦,图片安全检测的流程和文字一样。有啥问题,欢迎一起讨论。

 - to be continue -

---------- 最后贴一张小程序二维码(记录好的用餐体验) ---------

  • 36
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序源码(含截图)图文信息;欢迎页面,音乐控制微信小程序
以下是微信小程序图文瀑布流的介绍和实现方法: 图文瀑布流是一种常见的页面布局方式,可以让页面看起来更加美观和有序。在微信小程序中,我们可以通过使用`scroll-view`组件和`flex`布局来实现图文瀑布流。 具体实现方法如下: 1.在`wxml`文件中,使用`scroll-view`组件来实现滚动视图,并设置`scroll-y`属性为`true`,表示允许垂直滚动。 2.在`scroll-view`组件中,使用`flex`布局来实现图文瀑布流。我们可以使用`flex-wrap`属性来控制子元素的换行方式,使用`flex-direction`属性来控制子元素的排列方向,使用`flex`属性来控制子元素的大小和位置。 3.在`js`文件中,我们可以通过调用`wx.request`方法来获取后台数据,并将数据渲染到页面上。 下面是一个简单的微信小程序图文瀑布流的示例代码: ```html <scroll-view scroll-y="true"> <view class="container"> <view wx:for="{{list}}" wx:key="{{index}}" class="item" style="height:{{item.height}}px;"> <image src="{{item.imgUrl}}" mode="aspectFill"></image> <text>{{item.title}}</text> </view> </view> </scroll-view> ``` ```css .container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10rpx; } .item { width: 48%; margin-bottom: 10rpx; background-color: #fff; border-radius: 5rpx; box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); } .item image { width: 100%; height: 200rpx; border-radius: 5rpx 5rpx 0 0; } .item text { padding: 10rpx; font-size: 28rpx; color: #333; } ``` ```javascript Page({ data: { list: [] }, onLoad: function () { wx.request({ url: 'https://xxx.com/api/list', success: res => { this.setData({ list: res.data }) } }) } }) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值