微搭低代码中的用户登录及注册

简介: 微搭低代码中的用户登录及注册

传统开发用户登录注册,一般是需要考虑建立用户表,用户注册的话可以由管理员主动添加,将分配好的账号和密码告知用户。如果是互联网应用允许用户自主注册。


低代码中因为没有外部用户管理这个模块,所以登录注册需要我们自己实现。实现的逻辑是我们建立一个用户的数据源,记录用户的openid、微信昵称、头像等信息。


这里有个技术点是openid,在小程序中,如果用户访问了你的小程序,每个人都有一个唯一标识,openid,这个标识可以标识是哪个用户。


知道了openid之后,就需要获取这个字段。小程序中这个字段是不能直接在前端中获取的。低代码中因为底层使用的是云开发,可以免鉴权的获取openid,我们就可以自己通过定义云函数来获取。


另外需要思考的是,在小程序中什么叫登录。传统开发里我们的登录是指用户录入用户名、密码,验证通过之后叫登录。小程序里我们一般也没看到登录的界面,登录是如何实现的呢?


其实在低代码中叫匿名登录,只要你一打开小程序,就算是登录了,只不过不需要判断用户名和密码。


小程序采用匿名登录也是由于他特定的场景决定的。我们的小程序一般是以网站的形式对外提供服务,就像我们浏览淘宝一样,并不是说你浏览商品的时候需要登录,不登录你也可以正常使用网站的各项功能。


那我看好些小程序在我的菜单里是要求登录或者注册的呀。这里的登录或者注册主要是为了获取你的个人信息,比如头像、昵称,有的还需要获取你的手机号码。


基本概念梳理清楚了之后我们就实现一下登录的逻辑。


全局变量


我们定义一个全局变量openid,为啥要定义这个呢?因为我们小程序一启动的时候我们就要调用后台方法去获取用户的身份信息,这个身份信息就是openid。获取到之后我们就把他放在全局变量中。


全局变量的意思是在所有页面都可以调用,这样如果用户在提交数据的时候就可以把身份信息存入数据库中,方便后边做数据权限的过滤。


定义的方法是在编辑器中,变量里创建


用户数据源的创建


如果我们需要保留用户的信息,就需要将获取到的用户个人信息存入数据库中,为此,我们在数据模型里创建一个数据源,建立的字段包括头像、昵称、openid


定义获取openid的后台方法


用户的openid需要通过云函数来获取,微搭中可以在自定义连接器里创建云函数

添加自定义方法,方法的类型选择自定义代码

在方法里贴入如下代码:


const cloud = require('wx-server-sdk');
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV,
})   //初始化环境
module.exports = async function (params, context) {
    const wxContext = cloud.getWXContext() //获取openid与appid
    return {
        openid: wxContext.OPENID
    }
}

随着javascript技术的发展,js也可以像java一样进行模块的导入导出,我们的代码的第一行


const cloud = require('wx-server-sdk');


通过require关键词引入了微信管理端的SDK,SDK是厂商给开发者提供的一个开发工具包,里边封装了各种各样的api,方便我们调用。


const关键词是定义一个常量,常量不允许改变其中的值。


cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV,
})   //初始化环境

这一句是初始化环境,初始化好了之后就可以获取环境里的具体的信息了。


module.exports = async function (params, context) {
}


这一段表示模块的导出,既可以导出方法,也可以导出变量,我们导出的变量是在


return {
        openid: wxContext.OPENID
    }


return 语句中定义的,一对儿{}表示对象,里边定义了一个属性openid,在低代码中可以用对象.属性的语法来获取到其中的值。


const wxContext = cloud.getWXContext()


这一句就是获取当前会话的上下文,会话就是你打开小程序之后与服务器建立的通道,这个通道里已经给你打了标签,里边的各种信息都可以获取。


以上就是对云函数的一个基本解释,代码看懂之后,如果我们需要使用还需要先测试

一个方法调用的时候一般包含入参和出参,入参是调用时候传入的条件,出参是方法执行返回的结果。一般可以直接点击出参映射自动将结果填充到出参里。


我们这个方法调用的时候返回是一个空对象,因为openid的值是需要在小程序里才可以获取到,所以需要我们自主添加一个出参,添加openid即可


低代码中调用自定义连接器


自定义连接器创建好后,在哪调用呢?因为我们小程序一启动的时候就需要获取用户的openid,所以需要在生命周期函数中调用。打开低代码编辑器,在全局生命周期函数中调用自定义连接器。

输入如下代码:

/**
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 如果需要 async-await,请在方法前 async 
 **/ 
export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const result = await app.cloud.callConnector({
        name: 'getuserinfo_8yjxd1q',
        methodName: 'getopenid',
        params: {}, // 方法入参
    });
    console.log(result.openid)
    app.dataset.state.openid = result.openid
  },
  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)
  }
}

自定义连接器是通过app.cloud.callConnector这个api来调用,里边有三个参数,name是自定义连接器的标识,methodName是方法名,params是入参,分别对应如下参数

这样在小程序启动的时候就获取到了用户的登录信息了


获取用户的信息


一般在小程序里,我们在我的模块,里设置用户登录和注册的功能,最近微搭更新了一个新的组件获取用户信息,可以用这个组件来获取

将这个组件添加到页面上

业务组件的特点是已经将微信的api封装到组件里,我们直接使用就好了。但是需要自己写低代码方法来获取事件调用后的返回值,我们这里需要将用户授权后获取到的头像和昵称存入数据库中。所以创建一个低代码方法,方法如下:

export default async function({event, data}) {
    console.log(event)
    const result = await app.cloud.callModel({
        name: 'user_uzynu99',
        methodName: 'wedaCreate',
        params: {
            nickname:event.detail.nickName,
            usericon:event.detail.avatarUrl,
            openid:app.dataset.state.openid
        }, // 方法入参
    });
}

给组件的事件设置自定义方法

这样就是实现了登录之后将用户信息写入到数据库中

我们本节介绍了用户登录注册的总体流程,要想熟练使用低码工具开发小程序,就需要对组件、低码方法、数据源基本操作熟练掌握,在开发的过程中就不会感到困难了,照着教程练习一下吧。

相关文章
|
8月前
|
小程序
如何配置微搭低代码的域名
如何配置微搭低代码的域名
|
SQL 缓存 NoSQL
【前后端】低代码平台Jeecg-Boot 3.2云服务器部署流程
【前后端】低代码平台Jeecg-Boot 3.2云服务器部署流程
1440 0
【前后端】低代码平台Jeecg-Boot 3.2云服务器部署流程
|
8月前
|
小程序 前端开发
如何在企业微信中使用微搭低代码
如何在企业微信中使用微搭低代码
|
8月前
|
前端开发 Java 关系型数据库
基于Jeecgboot前后端分离的流程管理平台
基于Jeecgboot前后端分离的流程管理平台
103 0
|
8月前
|
存储 小程序 API
微搭低代码从入门到精通03用户注册
微搭低代码从入门到精通03用户注册
|
前端开发 小程序 API
微搭低代码中实现二维码生成
微搭低代码中实现二维码生成
微搭低代码中实现二维码生成
|
缓存 开发框架 前端开发
SpringCloud微服务实战——搭建企业级开发框架(四十一):扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
  如果我们自己的系统需要调用第三方登录,那么我们就需要实现单点登录客户端,然后跟需要对接的平台调试登录SDK。JustAuth是第三方授权登录的工具类库,对接了国外内数十家第三方登录的SDK,我们在需要实现第三方登录时,只需要集成JustAuth工具包,然后配置即可实现第三方登录,省去了需要对接不同SDK的麻烦。   JustAuth官方提供了多种入门指南,集成使用非常方便。但是如果要贴合我们自有开发框架的业务需求,还是需要进行整合优化。下面根据我们的系统需求,从两方面进行整合:一是支持多租户功能,二是和自有系统的用户进行匹配。
4433 56
SpringCloud微服务实战——搭建企业级开发框架(四十一):扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
|
移动开发 运维 Cloud Native
多端低代码开发平台魔笔:教你1小时搭建代办事项管理平台
本实验将介绍如何通过多端低代码开发平台魔笔实现1小时快速搭建应用,本次实验以搭建代办事项管理平台为例,让用户更好的了解并体验魔笔。
359 0
|
缓存 小程序 安全
|
敏捷开发 存储 前端开发
2022 你还不会微前端吗 (上) — 从巨石应用到微应用(一)
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
371 0

热门文章

最新文章