WeChatミニプログラム公式顔認証の詳しい説明

WeChatミニプログラム公式顔認証の詳しい説明

ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。

こんにちは、ミニプログラムページの機能には、ユーザーの生体認証(顔写真やビデオ)やその他の機密情報の収集、身元認識や識別などが含まれます。

ユーザーの機密性の高いプライバシー ID 情報を保護するために、プラットフォームは現在この機能をサポートしていません。関連する機能を削除して再度送信してください。

その後、百度で検索して、申請する必要があることを知りました

wx.start顔認識検証({})

https://api.weixin.qq.com/cgi-bin/token?appid=appid&secret=secret&grant_type=client_credential

https://api.weixin.qq.com/cityservice/face/identify/getinfo?access_token=access_token

https://api.weixin.qq.com/cityservice/face/identify/getimage?access_token=access_token

まず、申請したインターフェースに名前とID番号の2つのパラメータを送信する必要があります。

写真.js

データ: {
    オープンID: ''、
    custName: '名前',
    custIdCard: 'IDカード番号',
    検証画像: ''
  },
  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
    this.setData({
      custName: オプション.custName、
      custIdCard: オプション.custIdCard
    });
    var _this = これ;
    wx.checkIsSupportFacialRecognition({
      チェックアライブタイプ: 2,
      成功: 関数 (res) {
        res.errCode === 0 || res.errMsg === "checkIsSupportFacialRecognition:ok") の場合 {
          //顔認識を呼び出す_this.startface(_this.data.custName.replace(/(^\s*)|(\s*)$/g, ""), _this.data.custIdCard); //ID カード名、ID カード番号が返されます。
        }
        wx.showToast('WeChatのバージョンが低すぎるため、この機能は一時的に使用できません。WeChatの最新バージョンにアップグレードしてください')
      },
      失敗: 関数(res){
        wx.showToast('WeChatのバージョンが低すぎるため、この機能は一時的に使用できません。WeChatの最新バージョンにアップグレードしてください')
      }

    })
  },
  スタートフェイス(名前、IDカード) {
    console.log('参加します!!!');
    var _this = これ;
    wx.start顔認識検証({
      name: _this.data.custName, //ID カード名 idCardNumber: _this.data.custIdCard, //ID カード番号 success: function (res) {
        var verifyResult = res.verifyResult; //認証結果 //インターフェースwx.request({を呼び出す
          URL: 'https://api.weixin.qq.com/cgi-bin/token?appid=wx2cafec51ec4c2153&secret=8d3e68a5a2c702673340d72d1c7db4cc&grant_type=client_credential',
          データ: {

          },
          メソッド: 'POST'、
          ヘッダー: {
            'コンテンツタイプ': 'application/json;charset=utf-8'
          },
          成功: 関数 (res) {
            コンソールにログ出力します。
            コンソールログ(res.data.access_token)
            var トークン = res.data.access_token;
            wx.リクエスト({
              url: 'https://api.weixin.qq.com/cityservice/face/identify/getinfo?access_token=' + res.data.access_token,
              データ: {
                verify_result: 検証結果
              },
              メソッド: 'POST'、
              ヘッダー: {
                'コンテンツタイプ': 'application/json;charset=utf-8'
              },
              成功: 関数 (res) {
                コンソールログ(res.data)
                console.log('やっと成功しました...')
                wx.リクエスト({
                  url: 'https://api.weixin.qq.com/cityservice/face/identify/getimage?access_token=' + トークン、
                  データ: {
                    verify_result: 検証結果
                  },
                  メソッド: 'POST'、
                  レスポンスタイプ: '配列バッファ',
                  ヘッダー: {
                    'コンテンツタイプ': 'application/json;charset=utf-8',
                  },
                  成功: (res) => {
                    // console.log('data:image/png;base64,'+wx.arrayBufferToBases64(res))

                    コンソールにログ出力します。
                    var base64 = wx.arrayBufferToBase64(res.data);
                    _this.setData({ verifyImg:'data:image/png;base64,'+base64})
                    wx.navigateTo({
                      url: '../msg/msg?msg=おめでとうございます。情報の確認が成功しました。&verifyImg=' + _this.data.verifyImg
                    });
                  },
                  失敗: 関数 (res) {
                    console.log('失敗', res.data)
                  }
                })

              },
              失敗: 関数 (res) {

              }
            })
          },
          失敗: 関数 (res) {

          }
        })



        コンソールログ(検証結果)
        // wx.navigateTo({
        // url: '../msg/msg?msg=顔認証に成功しました'
        // });
      },
      checkAliveType: 2, //画面が点滅します (顔認証のインタラクション モード、デフォルト 0、数字の読み取り)
      失敗: エラー => {
        wx.showToast('十分な明るさ​​を保ち、携帯電話を正面に向け、障害物がないようにしてください')
        wx.navigateTo({
          url: '../msg/msg?msg=十分な明るさ​​を保ち、携帯電話を正面から見て、障害物がないようにしてください。終了してもう一度お試しください。'
        });
      }
    })
  }

主な落とし穴は、インターフェースを複数回申請する必要があり、最終的なビジネスには依然としてユニオンIDが必要なので、WeChatオープンプラットフォームで認証を申請する必要があることです。

次に、検証結果の画像を取得するには、上記のhttps://api.weixin.qq.com/cityservice/face/identify/getimage?access_token=access_tokenが必要です。

返されたデータは、base64 コードに変換してから、イメージ タグに表示する必要があります。これをバックエンドに直接渡します。

以下は私のmsg jsコードです

メッセージ

const app = getApp();
ページ({

  /**
   * ページの初期データ */
  データ: {
    メッセージ:''、
    検証画像:''、
    url:app.globalData.PostData
  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
    var タイムスタンプ = Date.parse(new Date());
    タイムスタンプ = タイムスタンプ/1000
    console.log(オプション)
    var that = this;
    that.setData({
      メッセージ:オプション.msg​​、
      検証画像:オプション.検証画像
    });
    console.log(そのデータURL)
    console.log(that.data.verifyImg)
    
      wx.リクエスト({
        url: that.data.url+'fileUpload!upBase64.do', // 単なる例であり、実際のインターフェースではありません addressdata: {
          ファイル:that.data.verifyImg、
          ファイル名:タイムスタンプ、
          ファイルデータ:that.data.verifyImg
        },
        メソッド: 'POST'、
        ヘッダー: {
          'コンテンツタイプ': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        成功:関数 (res){
          定数データ = res.data
          console.log('成功',データ);
          //何かをする
        },
       失敗:関数(res){
         console.log('失敗',res)
       }
        
      })
  }

バックグラウンドアップロードのbase64変換コード

パブリックボイドupBase64() {
         System.out.println("======写真のアップロードを開始します====");
         System.out.println(ファイル);
        Json j = 新しい Json();
        文字列 FilePath = ServletActionContext.getServletContext().getRealPath(Constants.IMGPATH+"/"+Constants.PHOTOPATH);  
        ファイルパスFile = new File(FilePath);
        試す {
            // IE の場合は text/html に設定する必要があります。そうでない場合は、ダウンロードのためにポップアップ ウィンドウが表示されます // response.setContentType("text/html;charset=UTF-8");
            レスポンス.setContentType("application/json;charset=UTF-8");

            文字列 FileName = request.getParameter("filename");
            文字列 FileData = request.getParameter("filedata");
            System.out.println(ファイル名+"***************"+ファイルデータ);
            if (null == FileData || FileData.length() < 50) {
                j.setMsg("アップロードに失敗しました。データが短すぎるか、存在しません");
                j.setSuccess(false);
            } それ以外 {
                // 先頭の不合理なデータを削除します FileData = FileData.substring(30);
                FileData = URLDecoder.decode(FileData, "UTF-8");
                System.out.println("FileData="+FileData);
                byte[]データ = FileUtil.decode(FileData);
                /* (null == FileName || FileName.length() < 1) の場合 {
                    ファイル名 = System.currentTimeMillis() + ".jpg";
                }*/
                // ファイルに書き込みます FileOutputStream outputStream = new FileOutputStream(new File(PathFile,FileName)); 
                出力ストリームにデータを書き込みます。 
                出力ストリームをフラッシュします。 
                出力ストリームを閉じます。 
                System.out.println(ファイル名+"***************"+ファイルデータ);
                j.setMsg("アップロードに成功しました");
                j.setSuccess(true);
            }
        } catch (例外エラー) {
            j.setMsg("アップロードに失敗しました");
            j.setSuccess(false);
            err.printStackTrace();
        }
        書き込みJson(j);
    }

以上がWeChatミニプログラムの公式顔認証の詳細な説明です。WeChatミニプログラムの公式顔認証の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • WeChat アプレットの顔認識機能のコード例
  • WeChatアプレットが顔認識ログインのサンプルコードを実装
  • 顔認識機能を実装するミニプログラム(Baidu AI)
  • WeChatアプレットが顔検出機能を実装
  • WeChatアプレットが顔認識を実装
  • PHP が WeChat アプレットの顔認識ログイン機能を実装

<<:  MySQL パーティションテーブルの正しい使用方法

>>:  ファイアウォールの iptables 戦略を使用して Linux サーバー上のポートを転送する方法

推薦する

WangEditor リッチ テキスト コンポーネントを Angular でカプセル化する方法

リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...

LinuxでTomcatのポート番号を変更する方法

ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

JSはストップウォッチタイマーを実装します

この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...

MySQL ALTERコマンドの知識ポイントのまとめ

テーブル名を変更したり、テーブル フィールドを変更したりする必要がある場合は、 MySQL ALTE...

Element-ui アップロードファイルのアップロード制限の解決策

質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...

CSS3 を使用して左上または右上隅にリマインダー ドットを表示するサンプル コード

効果画像(三角形をご希望の場合は、ここをクリックしてください): コード: <html>...

Zabbixは複数のmysqlプロセスの監視を実装します

1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...

HTML の類似タグと属性の違いの詳細な説明

【1】<i></i>タグと<em></em>タグ同じ...

JavaScript で簡単なモグラ叩きゲームを実装する

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

JavaScript 組み込みオブジェクトの概要

目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...

Nginx に lua-nginx-module モジュールをインストールする方法

ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...

html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...

Dockerコンテナに入る方法と出る方法

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...