WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文

ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNumber を通じて WeChat にバインドされているユーザーの携帯電話番号を取得します。私たち全員が注意しなければならないことが 1 つあります。現在、WeChat はユーザー エクスペリエンスに重点を置いており、getPhoneNumber などの一部のメソッドは、呼び出す前にユーザーが積極的にトリガーする必要があります。

実装のアイデア:

1. wx.login からコードを取得し、ユーザーの openID と sessionKey を取得します。

2. getPhoneNumberを介してencryptedDataを取得する、iv

3. バックエンドに[encryptedData]、[iv]、[sessionKey]パラメータを介してユーザーの携帯電話番号を復号化して取得するよう要求します。

乾物に直接:

1. ユーザーはボタンをクリックして携帯電話番号を取得します

<ボタンクラス='pop_btn' プレーン="true"

open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">ユーザーの電話番号を取得する</button>

2. ポップアップ認証画像:

3. 復号化により携帯電話番号を取得する

コード上で直接:

wxlogin: function() { //ユーザーのopenIDとsessionKeyを取得する
  var that = this;
  wx.ログイン({
    //コードを取得する wx.login で取得したログイン認証情報を使用して openid と交換する
    成功: (res) = >{
      wx.リクエスト({
        メソッド: "GET",
        URL: 'https://xxxwx/wxlogin.do',
        データ: {
          コード: res.code,
          アプリID: "appIdSbcx",
          アプリキー: "appKeySbcx"

        },
        ヘッダー: {
          'content-type': 'application/json' // デフォルト値},
        成功: (res) = >{
          コンソールログ(res);
          that.setData({
            セッションキー: res.data.session_key

          });
        }
      });
    }
  });
}

getPhoneNumber: function(e) { //電話番号取得ボタンをクリックします。var that = this;
  wx.checkSession({
    成功: 関数() {
      コンソールログ(e.detail.errMsg)
      コンソールログ(e.detail.iv)
      コンソールログ(e.detail.encryptedData)
      var ency = e.detail.encryptedData;
      var iv = e.detail.iv;
      var sessionk = that.data.sessionKey;
      if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
        that.setData({
          モーダルステータス: true
        });

      } else { // 認証に同意する wx.request({
          メソッド: "GET",
URL: 'https://xxx/wx/deciphering.do',
          データ: {
            暗号化データ: ency、
            ivデータ: iv、
            セッションキー:セッションk
          },
          ヘッダー: {
            'content-type': 'application/json' // デフォルト値},
          成功: (res) = >{
            console.log("復号化に成功しました~~~~~~~復号化された番号をローカルに保存してください~~~~~~~~");
            コンソールログ(res);
            var 電話番号 = res.data.電話番号;
            console.log(電話);
          },
          失敗: 関数(res) {
            console.log("復号化に失敗しました~~~~~~~~~~~~~~");
            コンソールログ(res);
          }
        });
      }

    },

    失敗: 関数() {
      console.log("session_key の有効期限が切れています。ログイン プロセスを再実行する必要があります");
      that.wxlogin(); // 再ログイン}
  });
}

背景コード:

/**
* ユーザーの携帯電話番号を復号して取得する* @param encrypdata
* @param ivdata
* @param セッションキー
* @param リクエスト
* @戻る
* @例外をスローします 
*/
@RequestMapping(値 = "解読", メソッド = RequestMethod.GET)
パブリック @ResponseBody 文字列の解読(文字列の暗号化データ、 
文字列ivdata、文字列sessionkey、
HttpServletRequest リクエスト) {

    byte[] encrypData = Base64.decode(encrypdata); 
    バイト[] ivData = Base64.decode(ivdata); 
    byte[] sessionKey = Base64.decode(セッションキー); 
    文字列 str="";
試す {
str = decrypt(セッションキー、ivData、encrypData);
} キャッチ (例外 e) {
// TODO 自動生成されたキャッチブロック
e.printStackTrace();
}
    System.out.println(str); 
    str を返します。

}
パブリック静的文字列復号化(byte[] key, byte[] iv, byte[] encData)は例外をスローします{ 
    アルゴリズムパラメータスペック ivSpec = new IvParameterSpec(iv); 
    暗号 cipher = Cipher.getInstance("AES/CBC/PKCS5Padding"); 
    SecretKeySpec keySpec = 新しい SecretKeySpec(キー、"AES"); 
    cipher.init(Cipher.DECRYPT_MODE、keySpec、ivSpec); 
    // 復号化された文字列を解析します。 return new String(cipher.doFinal(encData),"UTF-8"); 
  }

要約する

これで、WeChatミニプログラムのユーザー認証による携帯電話番号の取得に関するこの記事は終了です。WeChatミニプログラムのユーザー認証による携帯電話番号の取得に関する関連コンテンツの詳細については、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレット認証ログインを処理するエレガントな方法
  • springboot+jwt+springSecurity WeChat アプレット認証ログインの問題
  • ユーザー情報(アバター、ニックネーム)を取得するためのWeChatアプレットwx.getUserInfo認証の実装
  • uni-app WeChatアプレットのログイン認証の実装
  • WeChat ミニプログラム ユーザーの背景位置情報と記録の承認とリクエストの例

<<:  Vmware での Ubuntu サーバーのインストール チュートリアル

>>:  VMWare Linux MySQL 5.7.13 のインストールと設定のチュートリアル

推薦する

mysql バックアップ スクリプト mysqldump の使い方の詳細な説明

この記事では、参考までにMySQLバックアップスクリプトを紹介します。具体的な内容は次のとおりです。...

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

フロントエンド JavaScript ハウスキーパー package.json

目次1. 必須属性1. 名前2. バージョン2. 説明情報1. 説明2. キーワード3. 著者4. ...

CSSラベル表示モードについて1つの記事で学ぶ

タグの種類(表示モード) HTML タグは、一般的にブロック タグとインライン タグの 2 種類に分...

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策

解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを...

進捗バーのネイティブ JavaScript 実装

進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりで...

JS の new 関数の詳細な説明

目次1. 例2. 兵士100人を作成する3. 質問4. 改善点5. エレガント? 6. JSの父から...

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...

CSS 水平プログレスバーと垂直プログレスバーの実装コード

時々、素敵なスクロールバー効果を見るのは楽しいものです。ここでは、CSSを使用してそれを実現する方法...

TomcatとJDKのバージョンの対応と各Tomcatバージョンの機能

Apache Tomcat は、Java Servlet および Java Server Pages...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

Vue で Alibaba のアイコンフォント ベクター アイコンを使用する方法について

インターネット上には多くのインポート方法があり、公式も3つのインポート方法を提供していますが、インポ...

Vue3+Element+Tsは、フォームの基本的な検索リセットやその他の機能を実装します

Vue2 の記述スタイルから Vue3 の形式に切り替えると、記述スタイルとコード構造にいくつかの変...

JS 面接の質問: forEach はループから抜け出すことができますか?

この質問をされたとき、私は無知で頭が真っ白になりました。もちろん、正しく答えられませんでした。私はず...