mpvueマイクロメッセージウィジェットのユーザー登録機能の実現過程を開発する

11584 ワード

資料の予習:
1.一度に授権する通常の書き方で、ユーザー公開情報(顔、ニックネームなど)を取得する必要がある場合、授権登録インタフェースを呼び出すと判断するが、この方法は処理されていない場合、ユーザーが授権を拒否したり、この微信ウィジェットを削除したりした後、ユーザー公開情報(顔、ニックネームなど)を再呼び出す必要がある場合、この方法はユーザー体験が悪く、使用を提案しない.
2.永久授権ユーザ公開情報(アバター、ニックネームなど)を使用する必要がない場合、授権登録インタフェースを呼び出さず、必要に応じて授権登録インタフェースを呼び出すことを判断し、取得したユーザ公開情報をデータベースに格納することで、登録のたびに指定関数を実行してデータベースから必要なユーザ公開情報を要求する(アイコン、ニックネームなど)でいいです.この方法は、ウィジェットを削除した後、再度ログインを許可する必要はありません(ユーザーが初めてログインを許可したときにユーザーの公開情報をデータベースに保存した後、直接データベースに請求すればいいので)、使用をお勧めします.
3.権限を与えずにログインしてユーザー公開情報(顔、ニックネームなど)を取得する必要はありません.wx.loginを使用してユーザーcodeを取得し、バックグラウンドに転送します.バックグラウンドはユーザーのcode値を通じて微信に1つの値を求めることができます.(具体的にはバックグラウンドに聞く必要がありますが、私は小さなフロントエンドで、バックグラウンドのものはよくわかりませんが、いくつかの論理を知っていて、成功して実現しました)そしてこのcodeで交換した値で指定ユーザーを識別することができます.必要であれば、フロントエンドに表示するアイコンやニックネームなどの情報はカスタム編集可能な機能を使用することができます.もちろん、小さなプログラムでも提供されたこのコンポーネントはユーザーの顔とニックネームを表示します(ただし、このコンポーネントは表示機能のみです)、ユーザーが自分の顔のニックネームを直接使用したい場合は、自分で許可することもできます(例えば、ブートボタンを追加するなど)、使用をお勧めします.
我が社、現在のログイン処理方式は:ユーザー名+パスワードでログインすることができます;携帯番号+携帯認証コードでログインすることもできます.また、微信認証を使用してログインすることもできます.
私たちの微信授権登録は、まずユーザーの携帯電話番号を取得し、バックグラウンドに行ってマッチングし、データベースに携帯電話番号がなければ、直接新しいユーザー登録に戻ります.
すべて,我々のフロントエンド処理では,ユーザのユーザ情報を取得するのではなく,ユーザの携帯電話番号を取得するだけでよい.
具体的な操作:
Step 1:ログインページに入るとwxが呼び出される.loginはcodeを手に入れた後、すぐにバックグラウンドインタフェースを要求し、authorTokenを交換し、本質はopenIdに関連するものである.

    //   wx.login  code      auhortoken     
    wxLogin () {
      wx.login({
        success (res) {
          wxloginForCode({code: res.code, appId: AppId}).then(res => {
            let {authToken} = res.data
            wx.setStorageSync('authToken', authToken)
          }).catch(err => {
            console.log(err)
          })
        },
        fail (e) {}
      })
    },

setp2:

<van-button color="#2BCAD9" round block open-type="getPhoneNumber" @getphonenumber="bindGetUserInfo" @click="getUserInfoClick" >      </van-button>

ユーザーは微信の許可をクリックしてログインし、携帯電話番号の許可をトリガーします.携帯番号を手に入れたら、バックグラウンドインタフェースに頼んで、登録後のtoken、ユーザーの携帯番号などを交換します.(このステップは、ユーザーパスワードがログインされたステップに相当します)
注意:vant-bottnはclickメソッドをトリガーしてからgetphonenumberというイベントをトリガーします.

//            ，               
    getUserInfoClick () {
    },
    //          
    bindGetUserInfo (e) {
      let that = this
      // console.log(e.mp.detail)
      // encryptedData               ，          。             ？            openId(authorToken)        。        ，                    。     。
      if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
        let { encryptedData, iv } = e.mp.detail
        let authToken = wx.getStorageSync('authToken')
        let para = {
          authToken: authToken,
          encryptedData,
          iv
        }
        wx.showLoading()
        //             api  。     ，         。         。
        that.$store.dispatch('loginByWx', para).then(() => {
          wx.hideLoading()
          //     
            wx.showToast({
              title: '    ',
              icon: 'success',
              duration: 3000
            })
            //     
            setTimeout(function () {
              wx.switchTab({
                url: '/pages/index/main'
              })
            }, 600)
        }).catch(() => {})
      } else {
        //         
        wx.showToast({
          title: '          ！',
          icon: 'none',
          duration: 4000
        })
      }
    },

oracle-関数

LambdaのオーソライザーでBASIC認証を追加する【言語不問】