Micro build low code to realize user login and registration

In the small program development, we can get the openid of wechat users. Openid can be used as the unique identification of users. When querying data, we can filter the data to query the data submitted by ourselves. Is there also the concept of openid in wechat, which can obtain the data submitted by users themselves?

The answer is yes, so how to do it? The idea is to first create a data source method, return openid in the data source, and then call the data source method in the low code and assign it to the global variable, so that openid can be obtained from the global variable in the subsequent business, which is convenient for Data permission control.

To achieve this, we start by creating a data source.

create data source

We first create a user managed data source, including the basic information of users, and add an openid field

Add a custom method to return the openid of the user

const cloud = require('wx-server-sdk');
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
module.exports = async function (params, context) {
        
  const wxContext = cloud.getWXContext()
  return {
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
        
    
}
}

Create application

Let's create a new blank application, type selection applet

Create a blank page and add the following components to the page

The logic of the component is that if you are not logged in, a picture and text will be displayed. Click the login button, and the user's Avatar and nickname will appear after successful authorization

In order to realize the above logic, we first define a user variable

The initial values are set as follows

{
  "city": "",
  "gender": "",
  "openid": "",
  "country": "",
  "language": "zh_CN",
  "nickName": "",
  "province": "",
  "avatarUrl": ""
}

Then bind the first picture and the second text component into the avatar and nickname in the variable

Our if judgment on the component determines whether the component is displayed through an expression

The If judgment of the component displayed when not logged in is exactly opposite to the expression above

In this way, the effect of the page can be switched between not logging in and after logging in

Then we need to implement the login logic, define a low code method for the page, and get the openid when the applet is loaded

export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const objData = await app.cloud.dataSources.userinfo_xpw5sxe.getopenid();
    app.dataset.state.useropenid=objData.openid;  //Assign to global variable

  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

Define a low code method on the current page to realize login logic

/*
* Via $page handler. XXX accesses the methods defined here
* Note: this method is only valid on the page to which it belongs
* If async await is required, please modify it to export default async function() {}
*/

export default async function({event, data}) {

 
    try {
     wx.getUserProfile({
            desc: 'Used to improve user information',
            success:async (res) => {
            //const data = await app.cloud.dataSources.userinfo_xpw5sxe.wedaCreate(res);
            console.log("res.userinfo",res.userInfo)
            $page.dataset.state.userinfo = res.userInfo
            $page.dataset.state.userinfo.openid = app.dataset.state.useropenid
            let ret =await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
            console.log(ret)
            }
    })
    //console.log("userinfo",$page.dataset.state.userinfo)
    //const ret = await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
    //console.log(ret)
    } catch (e) {
    console.log('error code ', e.code, 'error message', e.message);
  }
}

Then define the click event for the button and call the method

Preview Publishing

After the function is developed, click publish to publish the preview version

After authorized login, a record will be written to the data source to record the user's information

In this way, the function of user login and registration is completed. Subsequent submission pages need to bring openid, which is convenient for us to filter data according to openid on the query page.

Added by vombomin on Wed, 26 Jan 2022 20:12:54 +0200