Actual front-end wechat small program login system design

🍎 wechat officially provides two identifiers:

  • OpenId is a user’s id for a small application/public account, and developers can identify the user by this id.
  • UnionId is the identity of a user for the same subject wechat applets/public numbers/APP. Developers need to bind the subject of the same account under the wechat open platform. Developers can realize data communication between multiple small programs, public accounts and even APPS through UnionId

🍎 first distinguishes between wechat mini program login and user phone number authorization and avatar nickname authorization

Wx.login () Official address login

  • When we realize login, in fact, we can call wx.login to achieve login function, can tick mark a user, can obtain openID, unionID, session_key and other information. To obtain mobile phone numbers and avatar nicknames is for the sake of the integrity of their business information, or business processes using mobile phone numbers and avatar nicknames to serve users. So most of the time, we will mistakenly think that login and head phone number and other information is one, the early design of wechat has a lot of small programs in wx.login when the pop-up window of the authorized wechat nickname, the user click reject, if you do not carry out the corresponding processing will not use the small program. It also causes many users to give up using applets. So now get the phone number and the avatar nickname they’re separate.

  • Session_key has expired, need server on the line of database storage, not because of this frequent call. If the login expires during login invalidation check, invoke the login interface again and replace the original session_key.

Implementation steps

1. Login implementation

const silentLogin = () => { return new Promise((resolve, reject)=>{ wx.login({ success: LoginCode =>{let data = {code: logincode. code} Request (' Login interface ', data). Then (res=>{let {userInfo} = res.values; App.globaldata = object.assign (app.globaldata, userInfo) // Resolve (); }).catch((err) => { reject(err); }) }, fail:(err)=>{ reject(err); }})})}Copy the code

Check the user login (get openID). We usually call this function first during the onLoad life cycle of the page to get the login status. Of course you don’t need to log in to call the excuse is not called.

Const getOpenid = (check = false)=>{// Enable mandatory check check let that = getCurrentPages().pop(); return new Promise(function (resolve, reject) { if(app.globalData.openid){ if(check){ wx.checkSession({ success:()=>{ resolve(); }, fail:()=>{ login().then(loginRes=>{ resolve(); }); } }) }else{ resolve(); } }else{ login().then(loginRes=>{ resolve(); },err=>{ reject(err); }); } }).then(()=>{ getPhoneAndNike(that); })}Copy the code

3. GetPhoneAndNike is our user’s authorized mobile phone number and avatar nickname when acquiring the user, and the user decides whether to authorize avatar nickname in the subsequent page.

const getPhoneAndNike = (that = getCurrentPages().pop())=>{ that.setData({ isLogin: !! app.globalData.phoneNumber, hasNick: !! (app.globalData.nickName && app.globalData.avatar) }) }Copy the code

4. Authorized mobile phone number

Code sample

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
Copy the code
getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
    loginByPhone(e.detail.encryptedData, e.detail.iv)
  }
Copy the code
  • EncryptedData encryptedData of complete user information, including sensitive data, as detailed in encryptedData decryption algorithms
  • Iv Initial vector of encryption algorithm, see encryption data decryption algorithm for details
  • The cloudID corresponding to cloudID sensitive data will be returned only when the small program of cloud development is opened. Open data can be directly obtained through cloud call. For details, see cloud call to directly obtain open data

The above data needs to be decrypted by the server

Const loginByPhone = ({encryptedData, iv, type = ''})=>{return new Promise((resolve, reject)=>{ Do not reuse the login interface, CheckSession ({success:)=>{// Call the decryption interface to obtain the decrypted phone number. Return updateUserInfo({encryptedData, iv}).then(res=>{ resolve(); }, err=>{ reject(); }); = > {}, fail: (err)/login/login failure first login () reject (err); } }) }) } const updateUserInfo = ({encryptedData, iv})=>{ let that = getCurrentPages().pop(); return new Promise((resolve, reject)=>{ let data = { openid: app.globalData.openid, encryptedData: encryptedData, iv: Iv} Request (' server decryption interface ', data). Then (res=>{let {userInfo} = res.values; app.globalData = Object.assign(app.globalData, userInfo); getPhoneAndNike(that); resolve(); }).catch(err=>{ reject(err) }) }) }Copy the code

5. Get the avatar nickname

The old version of wx.getUserInfo is deprecated. Detailed adjustment instructions

Const getUserProfile = ({type = ', desc = 'better service '})=>{return new Promise((resolve, reject)=>{if(!! (app.globalData.nickName && app.globalData.avatar)){ getPhoneAndNike(); resolve() }else{ wx.getUserProfile({ desc, success:(info)=>{ app.globalData = Object.assign(app.globalData, { avatar: info.userInfo.avatarUrl, nickName: info.userInfo.nickName}); getPhoneAndNike(); // Update the server's mailbox nickname updateProfile({... info.userInfo, openid: app.globalData.openid}) resolve(info) }, fail:(err)=>{ reject(err) } }) } }) } const updateProfile = (info)=>{ getPhoneAndNike(); Return new Promise((resolve, reject)=>{let data = {info: info,} request(' address ', data). Then (res=>{resolve(res); },err=>{ reject(err); })})}Copy the code

Summary: The overall login process is about silent login when entering the small program, check whether the login status is invalid, and obtain login information again when it is invalid. You need to check your login status to get your avatar’s nickname, and you need to decrypt it to get your phone number. The server updates the user’s mobile phone number and avatar nickname at the same time.