携帯電話番号の歩数記録を取得するWeChatアプレット

携帯電話番号の歩数記録を取得するWeChatアプレット

序文

最近、小さなプログラムを開発しているときに、このような問題に遭遇しました。ユーザーが認証をクリックして携帯電話番号を復号化しようとすると、1 回目は失敗しますが、2 回目は成功します。しばらく勉強した後、ようやくもっと合理的な解決策を見つけました。皆さんのお役に立てればと思い、ここに記録してまとめておきます。

要件の説明

ユーザーが「電話を取得」ボタンをクリックすると、WeChatでユーザーが設定した電話番号が復号化され、連絡先の電話番号入力ボックスに表示されます。

特定のコード

      <view class="cu-form-group">
            <view class="title text-black">連絡先電話番号</view>
            <input class="radius" name="mobile" placeholder="連絡先の電話番号を入力してください" value="{{detail.mobile}}" bindinput="onInputMobile"></input>
            <button bindgetphonenumber="getPhoneNumber" class="cu-btn line-blue sm" openType="getPhoneNumber">電話番号を取得</button>
        </ビュー>

まず、アプレットボタンコンポーネントが必要で、openType="getPhoneNumber" を設定します。

    onLoad: 非同期関数() {
        this.getSessionKey()
    },
    非同期getSessionKey() {
        const { コード } = wx.login() を待つ
        const res = Index.getSessionKey({
            コード
        })
        (res.code == 1)の場合{
            this.setData({
                セッションキー: res.data
            })
        }
    },
    getPhoneNumber: 非同期関数(e) {
        if (e.detail.errMsg === "getPhoneNumber:ok") {
            const res = Index.getPhone({
                iv: e.詳細.iv、
                暗号化データ: e.detail.encryptedData、
                セッションキー: this.data.session_key
            })
            (res.err == 0)の場合{
                wx.showToast({
                    タイトル: 「ネットワークが少し不安定です。もう一度クリックしてお試しください」
                    アイコン: 'なし'
                })
                戻る
            }
            const 詳細 = this.data.detail
            detail.mobile = res.err.phoneNumber
            this.setData({
                詳細
            })
        } そうでない場合 (e.detail.errMsg === "getPhoneNumber:fail user deny") {
            wx.showModal({
                タイトル: 「ヒント」
                内容: 「認証を拒否しました。もう一度クリックして認証してください」
                表示キャンセル: false、
                confirmText: 「了解しました」
            })
        }
    },

onLoadライフサイクル中にログインコードを取得し、そのコードをサーバーに送信してsession_keyを取得します。

サーバー側で session_key を取得するには、ミニプログラムの公式ドキュメントを参照してください。

ユーザーが「Get Phone」ボタンをクリックすると、session_key と取得された iv、encryptedData が復号化のためにサーバーに送信されます。

この方法でユーザーの携帯電話番号を取得できます。

ピット

以前の解決策では、ユーザーが [電話番号を取得] ボタンをクリックした後、getPhoneNumber 関数で wx.logon() を直接呼び出し、コード、iv、encryptedData をサーバーに送信していました。サーバーは最初にコードを使用して session_key を取得し、次にそれを iv および encryptedData と組み合わせて復号化しました。この方法では、最初の復号化は失敗し、次にボタンをもう一度クリックして復号化インターフェイスを呼び出すと成功します。 そして、この状況は 5 ~ 6 分ごとに再発します。

ログイン状態が期限切れになっているかどうかを確認するために wx.checkSession(Object object) を呼び出すと、常に成功します。

推測

後で考えてみたのですが、getPhoneNumber 関数で wx.login を呼び出して、サーバーがコードを使用して session_key を交換し、それを iv と組み合わせて、encryptedData を復号化できないのはなぜでしょうか? session_key を取得するために、wx.login を onLoad に入れるのはどうでしょうか?

wx.login が呼び出されると、WeChat サーバーの session_key が更新されると思います。getPhoneNumber で wx.login が直接呼び出されると、WeChat サーバーはそれを更新する時間がない可能性があり、サーバーはそれを復号化に使用します。前回期限が切れた session_key は引き続き復号化に使用されるため、2 回目以降にのみ成功します。 onload に wx.login を配置すると、session_key を時間内に取得できます。

要約する

WeChatミニプログラムを通じて携帯電話番号を取得する際の落とし穴に関するこの記事はこれで終わりです。WeChatミニプログラムを通じて携帯電話番号を取得することに関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatミニプログラムでユーザー認証を通じて携帯電話番号を取得する方法(getPhoneNumber)
  • WeChatアプレットは、ユーザーのログイン機能を承認するために携帯電話番号を取得します
  • WeChatミニプログラムのユーザー認証、位置情報認証、WeChatにバインドされた携帯電話番号の取得
  • WeChatアプレット機能の概要(携帯電話番号認証*、パスワード認証*、認証コードの取得*)
  • WeChatミニプログラムでユーザーの携帯電話番号を取得する方法
  • WeChatアプレットgetPhoneNumberはユーザーの携帯電話番号を取得します
  • WeChatアプレットはユーザー情報と携帯電話番号を取得します(バックエンドTP5.0)
  • WeChat アプレット開発: ユーザーの携帯電話番号の取得 (PHP インターフェースの復号化)
  • WeChatアプレットは携帯電話番号をバインドして認証コード機能を取得します
  • 携帯電話番号を取得するためのWeChatアプレットJavaScript復号化サンプルコードの詳細な説明

<<:  MySQL の char、varchar、text フィールド タイプの違い

>>:  MySQL の null 可能フィールドは NULL に設定する必要がありますか、それとも NOT NULL に設定する必要がありますか?

推薦する

HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル

<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。...

ポータルサイトのフォーカス画像のデザインに関するいくつかの結論

フォーカス画像は、画像、テキスト、動的なインタラクティブ効果を統合したコンテンツを表示する方法です。...

Vue で $attrs と $listeners を使用するチュートリアル

目次導入例要約する導入$属性すべての親コンポーネントのプロパティを継承します (props を通じて...

フロントエンドのパフォーマンス最適化を学ぶ準備として、HTMLページのレンダリングプロセスを理解する

現在、フロントエンドのパフォーマンス最適化について学んでいます。適切な解決策を見つけ、パフォーマンス...

Windows プラットフォームでの MySQL のインストールと設定方法と注意事項

2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...

フォーム入力ボックスに関するWebデザインのヒント

この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...

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

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

CSS 読み込み効果の実装 パックマン

えーっと、名前はただの推測です 2333序文これは練習用の CSS デモです。何か間違っている点があ...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...

echarts ワードクラウドチャートを使用した Vue の実践記録

echartsワードクラウドはechartsの拡張版ですhttps://echarts.apache...

Docker コンテナにデータベースをデプロイする場合の欠点は何ですか?

序文Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソ...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

CSS を使用して三角形を実装する一般的な手法 (複数の方法)

面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...