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

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

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


低代码中因为没有外部用户管理这个模块,所以登录注册需要我们自己实现。实现的逻辑是我们建立一个用户的数据源,记录用户的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
        }, // 方法入参
    });
}

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

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

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

相关文章
|
前端开发 JavaScript API
微搭低代码实现登录注册功能
微搭低代码实现登录注册功能
|
小程序 程序员 开发工具
电商小程序05用户注册
电商小程序05用户注册
|
NoSQL 安全 MongoDB
MongoDB 未授权访问漏洞利用
MongoDB 未授权访问漏洞利用
2250 0
|
6月前
|
机器学习/深度学习 自然语言处理 小程序
MiniMax开源超长文本处理神器,魔搭社区助力开发者推理部署
Transfermor架构与生俱来的二次计算复杂度,及其所带来的上下文窗口瓶颈,一直为业界所关注。此前,MiniMax开源了MiniMax-01系列模型,采用创新的线性注意力架构,使得模型能够在100万个token长度的上下文窗口上进行预训练;而在推理时,实现了高效处理全球最长400万token的上下文,是目前最长上下文窗口的20倍。
346 0
|
存储 安全 Unix
服务器的常用系统
【5月更文挑战第5天】服务器的常用系统
379 9
|
缓存 网络协议 Serverless
阿里云CDN简介和使用流程
本文档介绍了如何在阿里云上配置和使用CDN服务。首先,需要注册并实名认证阿里云账号,然后购买CDN服务。接着,添加要加速的域名,通过CDN控制台和阿里云云解析DNS进行配置,并验证CNAME设置是否生效。之后,配置源站信息,可以选择OSS域名、IP、源站域名或函数计算域名作为源站。最后,设置缓存规则,如缓存过期时间、状态码过期时间、自定义HTTP响应头等,以优化资源访问效率。
阿里云CDN简介和使用流程
|
存储 缓存 NoSQL
了解Redis,第一弹,什么是RedisRedis主要适用于分布式系统,用来用缓存,存储数据,在内存中存储那么为什么说是分布式呢?什么叫分布式什么是单机架构微服务架构微服务的本质
了解Redis,第一弹,什么是RedisRedis主要适用于分布式系统,用来用缓存,存储数据,在内存中存储那么为什么说是分布式呢?什么叫分布式什么是单机架构微服务架构微服务的本质
|
存储 小程序 API
微搭低代码从入门到精通03用户注册
微搭低代码从入门到精通03用户注册
|
PHP
HuoCMS|免费开源可商用CMS建站系统HuoCMS 2.0下载(thinkphp内核)
HuoCMS|免费开源可商用CMS建站系统HuoCMS 2.0下载(thinkphp内核)
298 2
|
Web App开发 人工智能 前端开发
Vercel 的 AI 工具 V0.dev 是什么?如何使用它?
# 网络开发者 # 人工智能 # javascript # 反应
7817 1