文章目录
- 1 搭建数据源
- 2 开发API
- 3 搭建页面
- 4 数据入库
- 5 页面跳转
- 总结
小程序开发中,如果定位是面向内部人员使用的应用,那么我们就需要仔细考虑用户鉴权的问题。首先需要提供用户注册的通道,让用户可以自主完成注册。其次要提供角色分配的功能,让适当的功能提供给适当的人员,确保数据不被非授权访问。
要实现用户权限的自主控制,我们需要自己搭建用户的数据源,仔细考量字段的设计。对于鉴权的问题,我们通常需要通过定义后端逻辑来完成,以下是实现用户注册的具体流程
1 搭建数据源
先需要创建一个数据源用来存储用户的信息,字段包括姓名、账号、密码、手机号、用户状态、审核状态、角色、openid
这里注意的是用户状态、审核状态、角色设置为枚举,枚举的优点是可以限定用户选择范围,规范数据格式。
用户状态我们的枚举项为启用和禁用
审核状态的枚举项为待审核、审核通过、审核不通过
角色的枚举项为管理员、普通用户
至于openid我们是用来控制数据权限,可以限制为只能查看本人的数据
2 开发API
用户注册的时候,我们通常希望将用户的密码加密存储,因此需要开发一个密码加密的API,因为涉及到调用内置的加密算法包,我们就需要用到微搭的云函数的功能
微搭的底层是云开发,云开发提供的静态网页托管、云存储、云数据库、Http访问服务、云函数都可以被我们调用。
具体的新建方法是打开我们的数据源,找到API,点击+号创建
选择云开发云函数
输入云函数的名称
点击编辑APIs方法,修改一下方法的名称
修改方法名称,然后点击管理云函数
这个时候我们就会跳转到我们云开发的底层,然后点击新建云函数
输入云函数的名称
然后点击确定
创建成功之后点击云函数的名称,编写我们具体的后端代码
打开编辑器之后,切换到函数代码页签
首先需要创建项目的依赖文件,点击保存并安装依赖按钮
点击复制
点击新建文件
输入package.json
将刚才拷贝的内容复制到这个文件中
复制成功后点击保存并安装依赖,安装成功会对一个node_modules文件夹
至于代码我们现在可以问chatgpt,我这里问一下豆包,提示词为如何用nodejs对密码进行加密,给出代码
把给出的示例代码贴入到我们的编辑器中,要稍稍改一下,主要是设置我们的入参和返回结果
'use strict';
exports.main = async (event, context) => {const crypto = require('crypto');
// 要加密的密码,这里是从入参里获取密码,使用event.password
const password = event.password// 生成加密密钥
const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(16);// 创建加密对象
const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);// 加密密码
const encryptedPassword = cipher.update(password, 'utf8', 'base64');
const finalEncryptedPassword = encryptedPassword + cipher.final('base64');console.log(finalEncryptedPassword);
//这里构造了返回结果,返回一个对象,属性为加密后的密码return {password:finalEncryptedPassword}
};
代码贴入后先点击保存,然后点击测试,需要先构造一个入参
云函数设置好之后,就可以回到API的设置界面了,选择我们刚刚配置好的云函数
入参,添加password
之后点击方法测试,看到测试成功后点击出参映射即可
3 搭建页面
API搭建好之后就可以创建注册页面了,如果没有应用可以先新建一个空白应用
打开应用编辑器,点击创建页面的图标新建我们的注册页面
往页面拖入表单容器组件,选择我们创建的数据源
选中密码组件,设置失焦事件
选择调用数据源方法
选择密码加密数据源,设置入参点击fx
绑定为我们输入框的值
接着在调用数据源方法的成功时设置变量赋值事件
将数据源返回的值再次的赋值给组件的输入值,为此我们先需要定义一个变量,在代码区点击+号,创建一个变量,命名为password
然后在变量赋值的时候,选择我们的变量,值的话从事件的返回值里设置
我们现在这种设置就形成了一种链式调用,链式调用里下一个事件可以通过event.detail拿到上一个事件的返回值。因为我们的api方法返回一个对象,所以我们要通过点属性的形式拿到加密后的密码
这样设置好之后还要让我们的输入值绑定为变量
4 数据入库
一切设置好之后,我们就可以点击实时预览图标来测试我们的功能
点击提交,我们再回到编辑器中,切换到数据源界面,点击管理数据
可以看到密码已经被加密存储了
5 页面跳转
现在提交成功后提示了一个信息,还可以设置跳转到注册功能的页面。先新建一个页面
输入页面的名称,注册成功
默认会添加一个网格布局,我们自己搭建一下,删掉网格布局,添加一个普通容器,里边添加一个图标组件和文本组件
设置普通容器的样式,设置为纵向排列,水平垂直居中
将文本内容修改为注册成功
切换到我们的注册页面,选中表单容器,设置一下表单容器的提交事件
在显示消息成功事件下的成功时添加一个打开页面事件,设置为我们的注册成功页面即可
总结
本篇我们带着搭建实现了用户注册的功能,在开发具体功能时需要先进行数据建模,然后通过前后端逻辑的编写来实现具体的功能。当然了建模和前后端代码的编写一个是需要学习知识,再一个就是需要进行实践,这样才能做到理论联系实际,运用自如。