WeChat ミニプログラムの画像のアップロードとコンテンツのセキュリティレビュー

記事ディレクトリ

理由

以前、写真をアップロードする機能を持った WeChat アプレットを開発しましたが、オンラインになってからはうまく機能しており、ユーザー数は徐々に増加しています。
しかし、ある日突然、システムメッセージを受け取りました: アプレットにはコンテンツのセキュリティリスクがあり、違法なコンテンツに対するフィルタリングメカニズムがなく、修正する必要があることを思い出させてくれます。メッセージは次のとおりです。

ここに画像の説明を挿入
このメッセージはセキュリティリスクの警告であり、制限時間内に修正および調整する必要があります。そうしないと、検索できない、QR コードからアプレットを開く、コンテンツを共有するなど、アプレットの一部の機能が無効になりますアプレットの、他のアプレットへのジャンプなど。
このことを考えると、アプレットを変更しないことは絶対に不可能です。そうしないと、関連する機能が使用できなくなり、検索トラフィックがなくなり、大きな影響が生じます。
変更を加える前に、まず WeChat アプレットのコンテンツレビューの具体的な状況を理解し、情報プロンプトのリンクに従って直接確認する必要があります。

コンテンツ管理の種類

WeChat ミニプログラムプラットフォームの運用仕様 - 行動規範 - コンテンツセキュリティセクションでは、次の内容が言及されています。

ミニプログラムには、違法および違法なコンテンツなどの不適切な情報をフィルタリングするメカニズムを設定する必要はありません。
テキスト/画像に機密コンテンツが含まれているかどうかを確認し、情報セキュリティ保護機能を向上させ、悪意のある使用によって悪意のあるコンテンツが拡散するリスクを軽減するには、コンテンツセキュリティ検出インターフェイスを呼び出す必要があります。

コンテンツのセキュリティについては、現在、コンテンツのセキュリティをテストする必要があるのは主にテキスト入力と画像のアップロードです。

入力テキストやアップロードされた画像にポルノ、政治的違反、テロなどの有害なコンテンツが主に含まれており、入力コンテンツが安全であることを確認するために、機密情報をフィルタリングするためにコンテンツレビューが必要です。

実際の開発では、WeChat アプレットが提供するオープンインターフェイスを使用して、これら 2 つのコンテンツに対して基本的なセキュリティチェックを実行できます。上の図に示すように、テキスト
ここに画像の説明を挿入
検出インターフェイスと、 WeChat アプレット AI プログラムが判断します。その中で、画像検出は別のインターフェースを使用することもできます。imgSecCheckこれは、画像が法律や規制に違反しているかどうかを検出するために特別に使用されます。
上記のインターフェイスには、https サービス、クラウド呼び出し、サードパーティ呼び出しなど、複数の呼び出し方法があります. この記事では、クラウド呼び出しの方法に焦点を当てます. その前に、ミニプログラムのクラウド機能を理解する必要があります.

小さなプログラムのクラウド開発

WeChat はクラウド開発機能を提供します.ミニプログラムでは、クラウド開発サービスを簡単に確立することもでき、機能を迅速に開発し、サーバーのセットアップを回避するのに役立ちます. WeChat クラウド開発の具体的な紹介については、WeChat ミニプログラム開発ドキュメントを参照してください。

アプレットでクラウドサービスを使用する場合は、アプレットを作成するときに、WeChat クラウドサービスを有効にすることを選択できます。
ここに画像の説明を挿入
明確にする必要があることの 1 つは、WeChat が提供するクラウドサービスを課金する必要があることです。 1ヶ月のお試し期間、ご利用いただけます。

ここに画像の説明を挿入
この記事の焦点は、WeChat アプレットクラウド開発サービスの構築方法ではなく、コンテンツセキュリティの検出と処理であるため、クラウド開発の内容を 1 つずつ紹介することはしません. インターネット上にはさまざまなチュートリアルがあります。自分で検索できます。

コンテンツのセキュリティ検出のために、クラウド呼び出しを使用する場合、クラウド開発サービスがセットアップされていれば、クラウド機能を使用できます。

画像検出

写真の検出に関しては、クラウド機能を使用します。インターフェースの方法は次のとおりですopenapi.security.imgSecCheck。

クラウド関数を作成する

最初に、コードのパーミッションを設定します. クラウドサービスを有効にしたアプレットプロジェクトには、cloudfunctionsクラウドクラウド機能を作成できます:
ここに画像の説明を挿入
上の図に示すように、クリックして新建Node.js云函数独自のクラウド機能を作成します.
たとえば、画像検出を処理するcheckImageSecという名前の、 cloudfunctionscloud ディレクトリの下にcheckImageSecという名前の、3 つのファイルが自動的に作成されます。

config.json: クラウド機能の基本構成
index.js: クラウド関数エントリ実行ファイル
package.json: クラウド関数プロジェクトの設定とパッケージの依存関係

ここに画像の説明を挿入
上の図に示すように、ファイルは自動的に作成されます.ここで注意すべきは、config.jsonファイルopenapi.security.imgSecCheckインターフェイスのアクセス許可を構成する必要があることです。
ここでのクラウド機能は本質的にNodeサービス, so it must be installed on the computer in the development environment Node.js. クラウド機能は、デフォルトでWeChatが提供するパッケージに依存しています: wx-server-sdk, これはクラウドオブジェクトを作成するために使用されます.

画像検出コードを書く

必要な画像検出コードをindex.jsファイル、openapi.security.imgSecCheckインターフェースを呼び出すことができます. 基本的な実装は次のとおりです:

const cloud = require('wx-server-sdk')
cloud.init({
    
     env: cloud.DYNAMIC_CURRENT_ENV })

// 云函数入口函数
exports.main = async (event) => {
    
    
  const arrayBuffer = event.arrayBuffer
  const contentType = event.contentType
  const buf = Buffer.from(arrayBuffer)
  const result = await cloud.openapi.security.imgSecCheck({
    
    
    media: {
    
    
      contentType,
      value: buf
    }
  })
  return result
}

上記のコードは、cloud雲. エントリ関数では、画像情報がパラメーターを介して受信されます.

arrayBuffer: 画像ArrayBuffer形式のバイナリデータ、NodejsでBufferデータ化
contentType: 画像の MIME メディアタイプ

設定後、クラウド機能が作成されcheckImageSec、アプレットのフロントエンドがそれを呼び出して画像を検出できます。

小さなプログラムの画像処理

クラウド機能を呼び出す前に、まずアプレットの画像アップロード機能を実装します。

写真をアップロードする

アプレットに画像をアップロードするのは比較的簡単です。ドキュメントによって提供されるインターフェイスを直接使用して、chooseMediaメディアファイル (画像またはビデオ) を選択します。

wx.chooseMedia({
    
    
  count,
  mediaType: ['image'],
  sizeType: [ 'original' ],
  sourceType: [ 'album' ],
  success: (imgRes) => {
    
    
    callBack && callBack(imgRes)
  },
  fail: () => {
    
    }
})

上記のコードで、携帯電話のアルバムからアップロードする写真を選択すると、写真の一時ディレクトリのアドレスが取得されますtempFilePath。
現在の画像は、アルバムの元の画像から取得されます.サイズが大きい場合や、形式が間違っている場合 (webp 形式の画像など)、画像のセキュリティ検出インターフェイスには画像imgSecCheckのとフォーマット:

検出する画像ファイル、形式は PNG、JPEG、JPG、GIF をサポートし、画像サイズは 750px x 1334px を超えない

したがって、受信した大きなサイズの画像をできるだけ圧縮しないようにする必要もあります。

画像圧縮

フロントエンドを介して, アプレットで画像圧縮が実行されます. もちろん, キャンバスを使用することもできます. まず,getImageInfoインターフェイス

wx.getImageInfo({
    
    
  src: tempFilePath,
  success: async (imgInfo) => {
    
    
    try {
    
    
      callBack && callBack(imgInfo)
    }
  },
  fail: () => {
    
    }
})

imgInfo上記のコードは、イメージのローカルパス、幅、高さ、およびさまざまな情報を含むイメージの情報を取得します。イメージを縮小するには、幅と高さのデータを使用する必要があります。
画像を縮小するには、canvas 要素 (id は checkCanvas) を作成し、対応するコンテキストオブジェクトを取得して、画像の幅と高さを最大 120 に設定します。コードは次のとおりです。

const SIZE = 120
const ratio = Math.max(imgInfo.width / SIZE, imgInfo.height / SIZE, 1)
const smallWidth = Math.trunc(imgInfo.width / ratio)
const smallHeight = Math.trunc(imgInfo.height / ratio)

// 将宽高大小设置到页面的canvas元素(checkCanvas)上
this.smallWidth = smallWidth
this.smallHeight = smallHeight

const ctx = wx.createCanvasContext('checkCanvas')
ctx.drawImage(imgInfo.path, 0, 0, smallWidth, smallHeight)
ctx.draw(false, function () {
    
    
  setTimeout(() => {
    
    
    wx.canvasToTempFilePath({
    
    
      canvasId: 'checkCanvas',
      width: smallWidth,
      height: smallHeight,
      destWidth: smallWidth,
      destHeight: smallHeight,
      success: (res) => {
    
    
        resolve(res.tempFilePath)
      },
      fail: (e) => {
    
    
        reject(e)
      }
    })
  }, 100)
})

画像が 120 未満に縮小された後、アプレットのキャンバス変換インターフェイスを介して新しい一時画像ファイルwx.canvasToTempFilePathが生成され、次にセキュリティチェックを実行できます。

クラウド機能セキュリティ検出アクセス

上記のクラウド関数のNode.jsコード、画像パラメーターはBufferデータを使用する必要があり、フロントエンドの画像データはデータのArrayBuffer形式述べられています。
一時画像ファイルは、対応するArrayBufferフォーマット。

const fsManager = wx.getFileSystemManager()
const bufferData = fsManager.readFileSync(imgFilePath)

readFileSyncインターフェイスは、ファイルのバイナリコンテンツをデフォルトのArrayBufferフォーマット。これにより、画像ファイルの使用可能なフォーマットデータを取得できます。

次に、検出と処理のためにクラウド関数を呼び出すことができます。呼び出し方法は比較的単純です。

wx.cloud.callFunction({
    
    
  name: 'checkImageSec',
  data: {
    
    
    contentType: `image/png`,
    arrayBuffer: bufferData
  },
  success: (res) => {
    
    
    if (res.result.errCode === 0) {
    
    
      console.log('合法图片' )
    } else if (res.result.errCode === 87014) {
    
    
      console.log('违法图片')
    }
    console.log('其他异常')
  },
  fail: () => {
    
    
    console.log('检测失败')
  }
})

ここまでで、クラウド機能を呼び出して画像コンテンツセキュリティ検知の基本コードが完成したので、この方法で画像が準拠しているかどうかを事前に検知し、違法な画像のアップロードや表示を禁止することができます。

テキスト検出

テキスト検出はクラウドオープンインターフェイスを呼び出します: openapi.security.msgSecCheck、呼び出しプロセス全体は基本的に画像検出のプロセスと同じですが、データの内容の違いにより、データ処理とパラメーターの送信にいくつかの違いがあります。
クラウド関数部分 (Nodejs コード) では、に渡す必要がありますopenid. WeChat コンテキストオブジェクト ( cloud.getWXContext()) を取得すると、openid を取得できます.checkTextSecという名前の. コアコードは次のとおりです:

exports.main = async (event) => {
    
    
  const wxContext = cloud.getWXContext()
  const openid = wxContext.OPENID
  const content = event.content
  const result = await cloud.openapi.security.msgSecCheck({
    
    
    openid,
    scene: 1,
    version: 2,
    content
  })
}

ここでのパラメータはテキストの内容、つまり文字列をそのまま使っており、アプレットの先頭部分でクラウド関数を呼び出し、checkTextSecテキストボックスの入力内容を渡し、テキストをチェックしています。

// content 输入框文本内容
wx.cloud.callFunction({
    
    
  name: 'checkTextSec',
  data: {
    
     content },
  success: (res) => {
    
    
    if (res.result.errCode === 0) {
    
    
      if (res.result.result.label === 100) {
    
    
        console.log('合法文本')
      } else {
    
    
        console.log('违法文本')
      }
    } else {
    
    
      console.log('其他异常')
    }
  },
  fail: () => {
    
    
    console.log('处理失败')
  }
})

上記のコードは、クラウド関数を呼び出して、テキストコンテンツのセキュリティ検出を処理します。これは、基本的に画像検出に似ています。

最終ピット

WeChat ミニプログラムが提供するオープンサービスを使用して画像とテキストのセキュリティチェックを行っていますが、問題を完全に解決することはできません.

ここに画像の説明を挿入
AIインテリジェントレビューの不足を補うために、開発者が手動レビューを実施することをお勧めします。
手動レビューを行うには、ユーザーの写真と入力テキストをアップロードし、バックグラウンドレビューの介入によって処理する必要があります。このコストは非常に高いと言え、多くの小さなプログラムではそれができません。
したがって、コンテンツのセキュリティのために小さなプログラムが禁止された場合、WeChat カスタマーサービススタッフに訴えた場合、WeChat カスタマーサービススタッフが手動レビューを主張した場合、個々の開発者にとって、小さなプログラムは基本的に終了し、直接破棄することができます。 .

ここに画像の説明を挿入
アピール失敗の確率が高すぎるから！