Micro build low code to realize user login and registration

In small program development , We can get the information of wechat users openid,openid It can be used as the unique identification of the user , When querying data, you can filter the data to query the submitted data . Is there also... In the micro building openid The concept , You can get the data submitted by users ？

The answer is yes , How do you do that ？ The idea is to create a data source method first , Returns... In the data source openid, Then the low code can call the method of the data source and assign it to the global variable , In this way, the global variables can be obtained in the subsequent business openid 了 , It is convenient to control data permissions .

To achieve this goal , Let's start by creating a data source .

create data source

Let's first create a user managed data source , It contains the basic information of users , And add a openid Field of

Insert picture description here

Add a custom method , Return the user's openid

Insert picture description here

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 an

We create a new blank application , Type selection applet

Insert picture description here

Create a blank page , Add the following components to the page

Insert picture description here

The logic of the component is to display an image and unlisted text if you are not logged in , Click the login button , After successful authorization, the user's Avatar and nickname will appear

To implement the above logic, we first define a user variable

Insert picture description here

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 as the avatar and nickname in the variable

Insert picture description here

Insert picture description here

We have on components if Judge whether the component is displayed by expression

Insert picture description here

Components displayed when not logged in If The judgment is just the opposite of the above expression

Insert picture description here

In this way, you can switch the page effect when you are not logged in and after you log in

Then you need to implement the login logic , Define a low code method for the page , When the applet is loaded, we get openid

Insert picture description here

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 variables 

  },
  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 low code methods on the current page , Implement login logic

Insert picture description here

/*
*  It can be done by  $page.handler.xxx  Access the methods defined here 
*  Be careful ： This method is only valid on the page to which it belongs 
*  if necessary  async-await, Please amend 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 , Call the method

Insert picture description here

Preview release

After the function is developed , Click publish , Publish as Preview

Insert picture description here

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

Insert picture description here

In this way, the function of user login and registration is completed , Subsequent submission pages need to be accompanied by openid, It is convenient for us to query the page according to openid To filter the data .