簡単な紹介: ミニプログラムの認可ログイン機能を実装する

この記事では、WeChat ミニ プログラム に関する関連知識を提供し、主にミニ プログラムの認証ログイン機能の実装方法を紹介します。一緒に見ていきましょう。みんな。

[関連する学習の推奨事項: 小プログラム学習チュートリアル]

私たちの日常の仕事や勉強の中で、私たちの生活の中で、WeChat ミニ プログラムは私たちの切り離せない一部になっています。注意深く注意してみると、新しいミニ プログラムを使用するたびに、必ず次のページに遭遇することになります:

これは WeChat ミニ プログラムの認証ログイン機能です。認証ログイン後、ミニ プログラムを通常に使用できるようになり、ミニ プログラムはユーザー権限、携帯電話番号、その他の個人情報も取得します

認可ログイン機能の分析

WeChat アプレットの認可ログインの具体的な手順は次のとおりです。

#詳細実装には主に次の 3 つのステップがあります。

• wx.login() WeChat API を呼び出して、一時的なログイン資格情報コードを取得し、それをサーバーに送り返します。開発者サーバー

• auth.code2Session WeChat API インターフェイスを呼び出して、ユーザーの一意の識別子 OpenID、WeChat オープン プラットフォーム アカウントのユーザーの一意の識別子 UnionID、およびセッション キー session_key

  # を取得します。
• ##手順通り 2. 取得したパラメータを復号し、ユーザーの携帯電話番号やアバターなどを取得し、必要なデータをキャッシュに保存します。

  #コードを実装する手順は次のとおりです:

1. 一時的なログイン資格情報コードを取得します

WeChat が getUserInfo インターフェイスを正式に変更したため、 WeChat アプレットに入るとすぐに認証ウィンドウが自動的にポップアップすることを認識することは現在不可能なので、ボタン ボタンを使用して手動で

をトリガーできるのはユーザーだけです。まず簡単なポップアップを作成しましょうボックスを開き、isShow

変数で制御します。isShow は手順 3 でキャッシュされた情報に依存します。すべての手順が完了すると、ユーザー情報が正しくキャッシュされます。このとき、ポップアップ ボックスは非表示、それ以外の場合、ポップアップ ボックスは表示状態になります。

  <view>
        <view>
          <text>需要先授权获取个人信息</text>
          <button>微信账号快速授权</button>
        </view>
  </view>

ボタンをクリックすると、getUserInfo メソッドが呼び出されます。

isShow

Set false に設定し、wx.login を使用してログイン資格情報コードを取得します

getUserInfo:e=>{      this.setData({        isShow:false
      })

      wx.login({        success: function (res) {               let code = res.code // 登录凭证code
         }
      })
      
  }

2. ログイン資格情報コードに基づいてユーザーのログイン情報を取得します

ログイン資格情報を取得しますコード 最後に、auth.code2Session WeChat API インターフェイスを呼び出します (これはサーバー側の操作であり、バックエンド ボスが処理します。私たちは彼から提供されたインターフェイスを直接呼び出すだけです)

         wx.request({                url: 获取用户信息的auth.code2Session微信api接口,                method: 'POST',                data:{                  code:code//登录凭证code
                },                header: {                  'content-type': 'application/json;charset=UTF-8'
                },                
                success: function (res) {                  var userphone= res.data.data                  //解密手机号
                  var msg = e.detail.errMsg;                  var sessionKey = userphone.session_key;//会话密钥
                  var encryptedData=e.detail.encryptedData; //签名
                  var unionid = userphone.unionid//唯一标识
                  var iv= e.detail.iv;                  //授权成功
                  if (msg == 'getPhoneNumber:ok') {
                    wx.checkSession({                      success:function(){                        //进行请求服务端解密手机号
                        this.deciyption(sessionKey,encryptedData,iv,unionid);
                      }
                    })
                  }
                }
              })
        }
      })

現時点では、ユーザー情報の大部分を取得しましたが、ユーザーの携帯電話番号、ユーザーのアバター、その他の情報はまだ暗号化されているため、これらのパラメータを取得するには復号化する必要があります

3。ユーザー情報に従って、復号化してください。ユーザーの携帯電話番号を取得します

deciyption(sessionKey,encryptedData,iv,unionid){    var that = this;
    wx.request({      url: 解密接口,      method: 'POST',      data: {        sessionKey: sessionKey,        encryptedData:encryptedData,        iv: iv
      },      header: {        'content-type': 'application/json;charset=UTF-8'
      },      success: function(res) {
        let data = res.data        if (data.resultCode == 'success') {
            wx.setStorageSync('userTel', data.data.phoneNumber);//存储解密后的用户手机号
        }else{
            wx.showToast({                title: '获取信息失败请重新授权',                icon: 'none'
            })
            that.setData({                isShow:true
            })
        }    
      },
      fail:function(res) {
        wx.showToast({            title: '获取失败请重新授权',            icon: 'none'
        })
        that.setData({          isShow:true
        })
      }
    })
  },

現時点で、承認されたログイン機能は完了しています

[関連する学習上の推奨事項:

小プログラム学習チュートリアル

]

以上が簡単な紹介: ミニプログラムの認可ログイン機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。